diff --git a/browser/public/index.html b/browser/public/index.html
index e2c3eb2761..0b6ffd7f9d 100644
--- a/browser/public/index.html
+++ b/browser/public/index.html
@@ -316,6 +316,14 @@
        <div id="nav-multi-column-combobox-list" class="nav-list" state="collapsed"> 
            <a class="nav-link" href="#" data-nav="/samples/editors/multi-column-combobox/overview">─<span>Overview</span></a> 
        </div>
+       <label id="nav-x-date-picker" class="nav-component">X Date Picker</label> 
+       <div id="nav-x-date-picker-list" class="nav-list" state="collapsed"> 
+           <a class="nav-link" href="#" data-nav="/samples/editors/x-date-picker/date-limits">─<span>XDate Picker Date Limits</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/editors/x-date-picker/editing">─<span>XDate Picker Editing</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/editors/x-date-picker/format">─<span>XDate Picker Format</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/editors/x-date-picker/overview">─<span>XDate Picker Overview</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/editors/x-date-picker/range">─<span>XDate Picker Range</span></a> 
+       </div>
 
        <div class="nav-group">EXCEL</div> 
        <label id="nav-excel-library" class="nav-component">Excel Library</label> 
@@ -459,6 +467,7 @@
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/cell-editing-styling">─<span>Cell Editing Styling</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/cell-selection-mode">─<span>Cell Selection Mode</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/cell-selection-style">─<span>Cell Selection Style</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/grids/grid/change-icons-custom">─<span>Change Icons Custom</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/clipboard-operations">─<span>Clipboard Operations</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/column-auto-sizing">─<span>Column Auto Sizing</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/column-collapsible-groups">─<span>Column Collapsible Groups</span></a> 
@@ -501,6 +510,7 @@
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/editing-columns">─<span>Editing Columns</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/editing-events">─<span>Editing Events</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/editing-excel-style">─<span>Editing Excel Style</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/grids/grid/editing-excel-style-custom">─<span>Editing Excel Style Custom</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/editing-lifecycle">─<span>Editing Lifecycle</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/excel-exporting">─<span>Excel Exporting</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/excel-style-filtering-sample-1">─<span>Excel Style Filtering Sample1</span></a> 
@@ -949,9 +959,9 @@
        </div>
        <label id="nav-divider" class="nav-component">Divider</label> 
        <div id="nav-divider-list" class="nav-list" state="collapsed"> 
-           <a class="nav-link" href="#" data-nav="/samples/layouts/divider/base">─<span>Base</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/layouts/divider/dashed">─<span>Dashed</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/layouts/divider/middle">─<span>Middle</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/divider/overview">─<span>Overview</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/layouts/divider/select">─<span>Select</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/layouts/divider/vertical">─<span>Vertical</span></a> 
        </div>
@@ -1091,7 +1101,7 @@
        </div>
        <label id="nav-date-picker" class="nav-component">Date Picker</label> 
        <div id="nav-date-picker-list" class="nav-list" state="collapsed"> 
-           <a class="nav-link" href="#" data-nav="/samples/scheduling/date-picker/dialog_mode">─<span>Dialog_mode</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/scheduling/date-picker/dialog-mode">─<span>Dialog Mode</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/scheduling/date-picker/form">─<span>Form</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/scheduling/date-picker/format">─<span>Format</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/scheduling/date-picker/overview">─<span>Overview</span></a> 
diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js
index e6ebb81b60..b51954e3cf 100644
--- a/browser/tasks/gulp-samples.js
+++ b/browser/tasks/gulp-samples.js
@@ -976,17 +976,17 @@ function updateIG(cb) {
     // { version: "3.2.12",  name:               "igniteui-webcomponents-core" },   // PUBLIC NPM
     let packageUpgrades = [
         // these IG packages are often updated:
-        { version: "5.1.0", name: "igniteui-webcomponents-core" },
-        { version: "5.1.0", name: "igniteui-webcomponents-charts" },
-        { version: "5.1.0", name: "igniteui-webcomponents-excel" },
-        { version: "5.1.0", name: "igniteui-webcomponents-gauges" },
-        { version: "5.1.0", name: "igniteui-webcomponents-grids" },
-        { version: "5.1.0", name: "igniteui-webcomponents-inputs" },
-        { version: "5.1.0", name: "igniteui-webcomponents-layouts" },
-        { version: "5.1.0", name: "igniteui-webcomponents-maps" },
-        { version: "5.1.0", name: "igniteui-webcomponents-spreadsheet-chart-adapter" },
-        { version: "5.1.0", name: "igniteui-webcomponents-spreadsheet" },
-        { version: "5.1.0", name: "igniteui-webcomponents-datasources" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-core" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-charts" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-excel" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-gauges" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-grids" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-inputs" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-layouts" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-maps" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-spreadsheet-chart-adapter" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-spreadsheet" },
+        { version: "5.1.1-beta.0", name: "igniteui-webcomponents-datasources" },
         // these IG packages are sometimes updated:
         { version: "5.1.2" , name: "igniteui-webcomponents" },
         { version: "1.15.2", name: "igniteui-dockmanager" },
diff --git a/package-lock.json b/package-lock.json
index bb4c5768f7..f0ebc67507 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,17 +22,17 @@
         "file-saver": "^2.0.2",
         "igniteui-dockmanager": "1.15.2",
         "igniteui-webcomponents": "5.1.2",
-        "igniteui-webcomponents-charts": "5.1.0",
-        "igniteui-webcomponents-core": "5.1.0",
-        "igniteui-webcomponents-datasources": "5.1.0",
-        "igniteui-webcomponents-excel": "5.1.0",
-        "igniteui-webcomponents-gauges": "5.1.0",
-        "igniteui-webcomponents-grids": "5.1.0",
-        "igniteui-webcomponents-inputs": "5.1.0",
-        "igniteui-webcomponents-layouts": "5.1.0",
-        "igniteui-webcomponents-maps": "5.1.0",
-        "igniteui-webcomponents-spreadsheet": "5.1.0",
-        "igniteui-webcomponents-spreadsheet-chart-adapter": "5.1.0",
+        "igniteui-webcomponents-charts": "5.1.1-beta.0",
+        "igniteui-webcomponents-core": "5.1.1-beta.0",
+        "igniteui-webcomponents-datasources": "5.1.1-beta.0",
+        "igniteui-webcomponents-excel": "5.1.1-beta.0",
+        "igniteui-webcomponents-gauges": "5.1.1-beta.0",
+        "igniteui-webcomponents-grids": "5.1.1-beta.0",
+        "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+        "igniteui-webcomponents-layouts": "5.1.1-beta.0",
+        "igniteui-webcomponents-maps": "5.1.1-beta.0",
+        "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
+        "igniteui-webcomponents-spreadsheet-chart-adapter": "5.1.1-beta.0",
         "lit": "^3.2.0",
         "lit-html": "^3.2.0"
       },
@@ -8797,14 +8797,14 @@
       }
     },
     "node_modules/igniteui-webcomponents-charts": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-charts/-/igniteui-webcomponents-charts-5.1.0.tgz",
-      "integrity": "sha512-f0qfHyt7AVKaXwUInkX7mbqmY3xN7M0mdGQXSH19BmImtXTRFnLQmz88qDRY7klZu30hBAOMF+cCwqeplh0/CQ==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-charts/-/igniteui-webcomponents-charts-5.1.1-beta.0.tgz",
+      "integrity": "sha512-ROSrVpdzJGf373GBZ3Xgaqpo0jTKxxC9FooiOyrjj5lHJdjX40B/3d9GkOnc/q61eZceSNLZ/Xb6cCuGaiyszg==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.1.0"
+        "igniteui-webcomponents-core": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-charts/node_modules/tslib": {
@@ -8813,9 +8813,9 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-core": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-core/-/igniteui-webcomponents-core-5.1.0.tgz",
-      "integrity": "sha512-cT+fHs2fCRpvGQJ2IUR9n5kUxyHYuqtBLTHQqLWJdsjBDsiZWaeNwQOEFRhEfgQtkK8TL0sD2JoFSJke1CZjwA==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-core/-/igniteui-webcomponents-core-5.1.1-beta.0.tgz",
+      "integrity": "sha512-wpEWsvZgEO+M0VlmKgpmh3icCJZYzgwLWOzzDZpc1EARX51Gg9yd/yvpEY9/0qWEMBcfAa+gloaTbADlmtu2og==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
@@ -8829,14 +8829,14 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-datasources": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-datasources/-/igniteui-webcomponents-datasources-5.1.0.tgz",
-      "integrity": "sha512-Wv+Wh4bwWcj3ZPo6Q+B5Cldlxxqa+VxItslUIj7hxLxRLzbOEzqe5IaMO/qp0gaX4DJLtVZGaALN7RXTUhSpCw==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-datasources/-/igniteui-webcomponents-datasources-5.1.1-beta.0.tgz",
+      "integrity": "sha512-hc3GLBtJirFd8JFv9fnhQRyoZ4WIiWX1O5WqhBK8N9tAmCKMvdUYumcneDDqhYm02re18UUJPUCISyO19HzlyA==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.1.0"
+        "igniteui-webcomponents-core": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-datasources/node_modules/tslib": {
@@ -8845,16 +8845,16 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-excel": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-excel/-/igniteui-webcomponents-excel-5.1.0.tgz",
-      "integrity": "sha512-fCwkHy/sezTvmUxafVKL56lss6FWT3OkFgPS12/xxk71fNezXSNADthrdfCUD81MN+ENhMjm70t0nSRwGmjNeQ==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-excel/-/igniteui-webcomponents-excel-5.1.1-beta.0.tgz",
+      "integrity": "sha512-PFzwxuo5sD4X96Wpcy91xb7GXezs/WZRXccEexdPjPemO1hg1FcQzn9BW4msLQoc+augwStyQJs0ORyl6ZoQWA==",
       "dependencies": {
         "jszip": "^3.1.5",
         "pako": "^1.0.6",
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.1.0"
+        "igniteui-webcomponents-core": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-excel/node_modules/tslib": {
@@ -8863,14 +8863,14 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-gauges": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-gauges/-/igniteui-webcomponents-gauges-5.1.0.tgz",
-      "integrity": "sha512-l79Pog49UmFJhZTvwmz542F2vCoE/IgrRsQW6Rrqv67h31e/cWdL0vpv92SmuB/jFdaowbKz5fONT08Js+qHVQ==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-gauges/-/igniteui-webcomponents-gauges-5.1.1-beta.0.tgz",
+      "integrity": "sha512-njFvsNWeHc6uObHZqBeavjBZYIurDGlyJE0PSoNBy1+lC+7m8N5vr5DldEO5AEmWJkdu3P7Bd+3k7foHaw6Y7g==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.1.0"
+        "igniteui-webcomponents-core": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-gauges/node_modules/tslib": {
@@ -8879,16 +8879,16 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-grids": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-grids/-/igniteui-webcomponents-grids-5.1.0.tgz",
-      "integrity": "sha512-ap0lXTH7SumgmBDHOSCCx7DNJUU1dNMrTYmv/ywIljNox2KngWDkNCWfRvJUlUxscUbZlr7oxcB6MTBGkZhrLQ==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-grids/-/igniteui-webcomponents-grids-5.1.1-beta.0.tgz",
+      "integrity": "sha512-rN3P+gkr7jkUPJozcsIaQarOH8MQTk/EeH/U14P8Dw6RFcTCniKXzzn0HNzBaflgHrpM0IX4Atu7RFs1cqOdtg==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.1.0",
-        "igniteui-webcomponents-inputs": "5.1.0",
-        "igniteui-webcomponents-layouts": "5.1.0"
+        "igniteui-webcomponents-core": "5.1.1-beta.0",
+        "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+        "igniteui-webcomponents-layouts": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-grids/node_modules/tslib": {
@@ -8897,14 +8897,14 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-inputs": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-inputs/-/igniteui-webcomponents-inputs-5.1.0.tgz",
-      "integrity": "sha512-ugwnqy9mhgfHlpnXADIEEkIn8/nq1Xj7x4FEVd3wdZkT7RTs/DfrUARYEUdIJsYpSfcv+lE/0V+zuOGntibCwQ==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-inputs/-/igniteui-webcomponents-inputs-5.1.1-beta.0.tgz",
+      "integrity": "sha512-XKChOhtXVlBqg8k1mIaqQK5mXhd+2VwuigjU3XvYYjoVGp22hf/ZaHjrL0AiTjRVeF95m3yLuJyjA28jEdbnag==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.1.0"
+        "igniteui-webcomponents-core": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-inputs/node_modules/tslib": {
@@ -8913,15 +8913,15 @@
       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
     "node_modules/igniteui-webcomponents-layouts": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-layouts/-/igniteui-webcomponents-layouts-5.1.0.tgz",
-      "integrity": "sha512-otY/p+eoDT6+TP2DTWRyiA9aANh4D92FMclAngbkSPfKPY/LldbasnL+gxrCQDRdHNqxLfEr11XzR5xDWdBa4Q==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-layouts/-/igniteui-webcomponents-layouts-5.1.1-beta.0.tgz",
+      "integrity": "sha512-43/hvNZAQS/KuhGpE0427rU0LdP0Q9WI5lyxsjRS0+6ROZXMgN4yaBdDvEWKzqatOJot2gEGHaNfshkEWJ84mw==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.1.0",
-        "igniteui-webcomponents-inputs": "5.1.0"
+        "igniteui-webcomponents-core": "5.1.1-beta.0",
+        "igniteui-webcomponents-inputs": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-layouts/node_modules/tslib": {
@@ -8930,15 +8930,15 @@
       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
     "node_modules/igniteui-webcomponents-maps": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-maps/-/igniteui-webcomponents-maps-5.1.0.tgz",
-      "integrity": "sha512-m3trF8Zl4/YRwdDRIU4CR32ceKtzAwIsKBJO+QCu2naE22EGEyE7B24Zr1oVBUGLzK6+BFsv/HtDyHoWFrhq1Q==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-maps/-/igniteui-webcomponents-maps-5.1.1-beta.0.tgz",
+      "integrity": "sha512-mmX6zOlMmZjvdIp/EcK0eIWWVhNajulmYfvKwgSUnTH/HmhU/XEeLfDR6A/psafGyOPjyLf/DGpFWr/HGnWIsA==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-charts": "5.1.0",
-        "igniteui-webcomponents-core": "5.1.0"
+        "igniteui-webcomponents-charts": "5.1.1-beta.0",
+        "igniteui-webcomponents-core": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-maps/node_modules/tslib": {
@@ -8947,29 +8947,29 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-spreadsheet": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-spreadsheet/-/igniteui-webcomponents-spreadsheet-5.1.0.tgz",
-      "integrity": "sha512-8d52MKH7jTJXRDTA4wQrfmcyrTOBjdTC8HXPeW8sWtuwVOiF9VcBm9Q+gTpq24I5R4sfLZBydpUmOpIFUSWAaw==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-spreadsheet/-/igniteui-webcomponents-spreadsheet-5.1.1-beta.0.tgz",
+      "integrity": "sha512-/br4fDP7sWRyyja683Raf+rmPSZo4PUE4UvvHKafDMuz/rTGyG9Chci78IvQq4aoS0kW/+oUPGqbkT1BCvyBzA==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.1.0",
-        "igniteui-webcomponents-excel": "5.1.0"
+        "igniteui-webcomponents-core": "5.1.1-beta.0",
+        "igniteui-webcomponents-excel": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-spreadsheet-chart-adapter/-/igniteui-webcomponents-spreadsheet-chart-adapter-5.1.0.tgz",
-      "integrity": "sha512-g52WApAADmwfOlak6oNfIqiUNPIzdJl2hr4Yg8A/03wl+f4W+cH859zHAvqBpwTTLGo2DC+nUHhI2ZFjImTywg==",
+      "version": "5.1.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-spreadsheet-chart-adapter/-/igniteui-webcomponents-spreadsheet-chart-adapter-5.1.1-beta.0.tgz",
+      "integrity": "sha512-9o+/YNlrUNmV8JcII7JubORBP8Xn0d20yhia2HUSuXaePz0gh+qB/DwWGJ5l/ibEVysefoaLTeya4uBKQ5OFNg==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-charts": "5.1.0",
-        "igniteui-webcomponents-core": "5.1.0",
-        "igniteui-webcomponents-excel": "5.1.0",
-        "igniteui-webcomponents-spreadsheet": "5.1.0"
+        "igniteui-webcomponents-charts": "5.1.1-beta.0",
+        "igniteui-webcomponents-core": "5.1.1-beta.0",
+        "igniteui-webcomponents-excel": "5.1.1-beta.0",
+        "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter/node_modules/tslib": {
diff --git a/package.json b/package.json
index 1f6bcba373..c8e3b07c2d 100644
--- a/package.json
+++ b/package.json
@@ -42,17 +42,17 @@
     "file-saver": "^2.0.2",
     "igniteui-dockmanager": "1.15.2",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-datasources": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
-    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-datasources": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.1.1-beta.0",
     "lit": "^3.2.0",
     "lit-html": "^3.2.0"
   },
diff --git a/samples/charts/category-chart/annotations-all/package.json b/samples/charts/category-chart/annotations-all/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/annotations-all/package.json
+++ b/samples/charts/category-chart/annotations-all/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/annotations-all/sandbox.config.json b/samples/charts/category-chart/annotations-all/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/annotations-all/sandbox.config.json
+++ b/samples/charts/category-chart/annotations-all/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-all/src/index.css b/samples/charts/category-chart/annotations-all/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/annotations-all/src/index.css
+++ b/samples/charts/category-chart/annotations-all/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-all/src/index.ts b/samples/charts/category-chart/annotations-all/src/index.ts
index 02f6075cfb..5f754e4809 100644
--- a/samples/charts/category-chart/annotations-all/src/index.ts
+++ b/samples/charts/category-chart/annotations-all/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -41,7 +41,6 @@ export class Sample {
             chart.dataSource = this.temperatureAnnotatedData;
         }
         this._bind();
-
     }
 
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
diff --git a/samples/charts/category-chart/annotations-all/tsconfig.json b/samples/charts/category-chart/annotations-all/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/annotations-all/tsconfig.json
+++ b/samples/charts/category-chart/annotations-all/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/annotations-all/webpack.config.js b/samples/charts/category-chart/annotations-all/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/annotations-all/webpack.config.js
+++ b/samples/charts/category-chart/annotations-all/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/annotations-callouts/package.json b/samples/charts/category-chart/annotations-callouts/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/annotations-callouts/package.json
+++ b/samples/charts/category-chart/annotations-callouts/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/annotations-callouts/sandbox.config.json b/samples/charts/category-chart/annotations-callouts/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/annotations-callouts/sandbox.config.json
+++ b/samples/charts/category-chart/annotations-callouts/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-callouts/src/index.css b/samples/charts/category-chart/annotations-callouts/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/annotations-callouts/src/index.css
+++ b/samples/charts/category-chart/annotations-callouts/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-callouts/src/index.ts b/samples/charts/category-chart/annotations-callouts/src/index.ts
index 4b76ef40b2..e7cfd95941 100644
--- a/samples/charts/category-chart/annotations-callouts/src/index.ts
+++ b/samples/charts/category-chart/annotations-callouts/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             chart.dataSource = this.temperatureAnnotatedData;
         }
         this._bind();
-
     }
 
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
diff --git a/samples/charts/category-chart/annotations-callouts/tsconfig.json b/samples/charts/category-chart/annotations-callouts/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/annotations-callouts/tsconfig.json
+++ b/samples/charts/category-chart/annotations-callouts/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/annotations-callouts/webpack.config.js b/samples/charts/category-chart/annotations-callouts/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/annotations-callouts/webpack.config.js
+++ b/samples/charts/category-chart/annotations-callouts/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/annotations-crosshairs/package.json b/samples/charts/category-chart/annotations-crosshairs/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/annotations-crosshairs/package.json
+++ b/samples/charts/category-chart/annotations-crosshairs/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/annotations-crosshairs/sandbox.config.json b/samples/charts/category-chart/annotations-crosshairs/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/annotations-crosshairs/sandbox.config.json
+++ b/samples/charts/category-chart/annotations-crosshairs/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-crosshairs/src/index.css b/samples/charts/category-chart/annotations-crosshairs/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/annotations-crosshairs/src/index.css
+++ b/samples/charts/category-chart/annotations-crosshairs/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-crosshairs/src/index.ts b/samples/charts/category-chart/annotations-crosshairs/src/index.ts
index 52a2d988bd..c354e6a758 100644
--- a/samples/charts/category-chart/annotations-crosshairs/src/index.ts
+++ b/samples/charts/category-chart/annotations-crosshairs/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -37,7 +37,6 @@ export class Sample {
             chart.dataSource = this.temperatureAnnotatedData;
         }
         this._bind();
-
     }
 
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
diff --git a/samples/charts/category-chart/annotations-crosshairs/tsconfig.json b/samples/charts/category-chart/annotations-crosshairs/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/annotations-crosshairs/tsconfig.json
+++ b/samples/charts/category-chart/annotations-crosshairs/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/annotations-crosshairs/webpack.config.js b/samples/charts/category-chart/annotations-crosshairs/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/annotations-crosshairs/webpack.config.js
+++ b/samples/charts/category-chart/annotations-crosshairs/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/annotations-custom/package.json b/samples/charts/category-chart/annotations-custom/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/annotations-custom/package.json
+++ b/samples/charts/category-chart/annotations-custom/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/annotations-custom/sandbox.config.json b/samples/charts/category-chart/annotations-custom/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/annotations-custom/sandbox.config.json
+++ b/samples/charts/category-chart/annotations-custom/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-custom/src/index.css b/samples/charts/category-chart/annotations-custom/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/annotations-custom/src/index.css
+++ b/samples/charts/category-chart/annotations-custom/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-custom/src/index.ts b/samples/charts/category-chart/annotations-custom/src/index.ts
index 34e1710b1f..c683ace2f3 100644
--- a/samples/charts/category-chart/annotations-custom/src/index.ts
+++ b/samples/charts/category-chart/annotations-custom/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -36,7 +36,6 @@ export class Sample {
             chart.calloutsDataSource = this.temperatureAnnotatedData;
         }
         this._bind();
-
     }
 
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
diff --git a/samples/charts/category-chart/annotations-custom/tsconfig.json b/samples/charts/category-chart/annotations-custom/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/annotations-custom/tsconfig.json
+++ b/samples/charts/category-chart/annotations-custom/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/annotations-custom/webpack.config.js b/samples/charts/category-chart/annotations-custom/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/annotations-custom/webpack.config.js
+++ b/samples/charts/category-chart/annotations-custom/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/annotations-final-value/package.json b/samples/charts/category-chart/annotations-final-value/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/annotations-final-value/package.json
+++ b/samples/charts/category-chart/annotations-final-value/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/annotations-final-value/sandbox.config.json b/samples/charts/category-chart/annotations-final-value/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/annotations-final-value/sandbox.config.json
+++ b/samples/charts/category-chart/annotations-final-value/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-final-value/src/index.css b/samples/charts/category-chart/annotations-final-value/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/annotations-final-value/src/index.css
+++ b/samples/charts/category-chart/annotations-final-value/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-final-value/src/index.ts b/samples/charts/category-chart/annotations-final-value/src/index.ts
index 6ac0e33e5f..97be46d792 100644
--- a/samples/charts/category-chart/annotations-final-value/src/index.ts
+++ b/samples/charts/category-chart/annotations-final-value/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             chart.dataSource = this.temperatureAnnotatedData;
         }
         this._bind();
-
     }
 
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
diff --git a/samples/charts/category-chart/annotations-final-value/tsconfig.json b/samples/charts/category-chart/annotations-final-value/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/annotations-final-value/tsconfig.json
+++ b/samples/charts/category-chart/annotations-final-value/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/annotations-final-value/webpack.config.js b/samples/charts/category-chart/annotations-final-value/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/annotations-final-value/webpack.config.js
+++ b/samples/charts/category-chart/annotations-final-value/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/annotations-highlighting/package.json b/samples/charts/category-chart/annotations-highlighting/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/annotations-highlighting/package.json
+++ b/samples/charts/category-chart/annotations-highlighting/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/annotations-highlighting/sandbox.config.json b/samples/charts/category-chart/annotations-highlighting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/annotations-highlighting/sandbox.config.json
+++ b/samples/charts/category-chart/annotations-highlighting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-highlighting/src/index.css b/samples/charts/category-chart/annotations-highlighting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/annotations-highlighting/src/index.css
+++ b/samples/charts/category-chart/annotations-highlighting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/annotations-highlighting/src/index.ts b/samples/charts/category-chart/annotations-highlighting/src/index.ts
index f3a74a18a2..2f6c21a86d 100644
--- a/samples/charts/category-chart/annotations-highlighting/src/index.ts
+++ b/samples/charts/category-chart/annotations-highlighting/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -37,7 +37,6 @@ export class Sample {
             chart.dataSource = this.temperatureAnnotatedData;
         }
         this._bind();
-
     }
 
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
diff --git a/samples/charts/category-chart/annotations-highlighting/tsconfig.json b/samples/charts/category-chart/annotations-highlighting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/annotations-highlighting/tsconfig.json
+++ b/samples/charts/category-chart/annotations-highlighting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/annotations-highlighting/webpack.config.js b/samples/charts/category-chart/annotations-highlighting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/annotations-highlighting/webpack.config.js
+++ b/samples/charts/category-chart/annotations-highlighting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/annotations/package.json b/samples/charts/category-chart/annotations/package.json
index 6e8852c772..aef66af0ef 100644
--- a/samples/charts/category-chart/annotations/package.json
+++ b/samples/charts/category-chart/annotations/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/package.json b/samples/charts/category-chart/area-chart-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/package.json
+++ b/samples/charts/category-chart/area-chart-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/sandbox.config.json b/samples/charts/category-chart/area-chart-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/sandbox.config.json
+++ b/samples/charts/category-chart/area-chart-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/src/index.css b/samples/charts/category-chart/area-chart-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/src/index.css
+++ b/samples/charts/category-chart/area-chart-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/src/index.ts b/samples/charts/category-chart/area-chart-multiple-sources/src/index.ts
index 96972fb7c3..24335fec1c 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/src/index.ts
+++ b/samples/charts/category-chart/area-chart-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/tsconfig.json b/samples/charts/category-chart/area-chart-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/tsconfig.json
+++ b/samples/charts/category-chart/area-chart-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/webpack.config.js b/samples/charts/category-chart/area-chart-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/area-chart-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/area-chart-single-source/package.json b/samples/charts/category-chart/area-chart-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/area-chart-single-source/package.json
+++ b/samples/charts/category-chart/area-chart-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/area-chart-single-source/sandbox.config.json b/samples/charts/category-chart/area-chart-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/area-chart-single-source/sandbox.config.json
+++ b/samples/charts/category-chart/area-chart-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/area-chart-single-source/src/index.css b/samples/charts/category-chart/area-chart-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/area-chart-single-source/src/index.css
+++ b/samples/charts/category-chart/area-chart-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/area-chart-single-source/src/index.ts b/samples/charts/category-chart/area-chart-single-source/src/index.ts
index 06100ba79f..d6589a2735 100644
--- a/samples/charts/category-chart/area-chart-single-source/src/index.ts
+++ b/samples/charts/category-chart/area-chart-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/area-chart-single-source/tsconfig.json b/samples/charts/category-chart/area-chart-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/area-chart-single-source/tsconfig.json
+++ b/samples/charts/category-chart/area-chart-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/area-chart-single-source/webpack.config.js b/samples/charts/category-chart/area-chart-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/area-chart-single-source/webpack.config.js
+++ b/samples/charts/category-chart/area-chart-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/area-chart-styling/package.json b/samples/charts/category-chart/area-chart-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/area-chart-styling/package.json
+++ b/samples/charts/category-chart/area-chart-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/area-chart-styling/sandbox.config.json b/samples/charts/category-chart/area-chart-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/area-chart-styling/sandbox.config.json
+++ b/samples/charts/category-chart/area-chart-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/area-chart-styling/src/index.css b/samples/charts/category-chart/area-chart-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/area-chart-styling/src/index.css
+++ b/samples/charts/category-chart/area-chart-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/area-chart-styling/src/index.ts b/samples/charts/category-chart/area-chart-styling/src/index.ts
index 96972fb7c3..24335fec1c 100644
--- a/samples/charts/category-chart/area-chart-styling/src/index.ts
+++ b/samples/charts/category-chart/area-chart-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/area-chart-styling/tsconfig.json b/samples/charts/category-chart/area-chart-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/area-chart-styling/tsconfig.json
+++ b/samples/charts/category-chart/area-chart-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/area-chart-styling/webpack.config.js b/samples/charts/category-chart/area-chart-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/area-chart-styling/webpack.config.js
+++ b/samples/charts/category-chart/area-chart-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-gap/package.json b/samples/charts/category-chart/axis-gap/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/axis-gap/package.json
+++ b/samples/charts/category-chart/axis-gap/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-gap/sandbox.config.json b/samples/charts/category-chart/axis-gap/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-gap/sandbox.config.json
+++ b/samples/charts/category-chart/axis-gap/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-gap/src/index.css b/samples/charts/category-chart/axis-gap/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-gap/src/index.css
+++ b/samples/charts/category-chart/axis-gap/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-gap/src/index.ts b/samples/charts/category-chart/axis-gap/src/index.ts
index e6d24abb25..fd2f6a4d6d 100644
--- a/samples/charts/category-chart/axis-gap/src/index.ts
+++ b/samples/charts/category-chart/axis-gap/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -38,7 +38,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/axis-gap/tsconfig.json b/samples/charts/category-chart/axis-gap/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-gap/tsconfig.json
+++ b/samples/charts/category-chart/axis-gap/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-gap/webpack.config.js b/samples/charts/category-chart/axis-gap/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-gap/webpack.config.js
+++ b/samples/charts/category-chart/axis-gap/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-gridlines/package.json b/samples/charts/category-chart/axis-gridlines/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/axis-gridlines/package.json
+++ b/samples/charts/category-chart/axis-gridlines/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-gridlines/sandbox.config.json b/samples/charts/category-chart/axis-gridlines/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-gridlines/sandbox.config.json
+++ b/samples/charts/category-chart/axis-gridlines/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-gridlines/src/index.css b/samples/charts/category-chart/axis-gridlines/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-gridlines/src/index.css
+++ b/samples/charts/category-chart/axis-gridlines/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-gridlines/src/index.ts b/samples/charts/category-chart/axis-gridlines/src/index.ts
index 2f85fe3827..0c0ad79173 100644
--- a/samples/charts/category-chart/axis-gridlines/src/index.ts
+++ b/samples/charts/category-chart/axis-gridlines/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -43,7 +43,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/axis-gridlines/tsconfig.json b/samples/charts/category-chart/axis-gridlines/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-gridlines/tsconfig.json
+++ b/samples/charts/category-chart/axis-gridlines/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-gridlines/webpack.config.js b/samples/charts/category-chart/axis-gridlines/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-gridlines/webpack.config.js
+++ b/samples/charts/category-chart/axis-gridlines/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-inverted/package.json b/samples/charts/category-chart/axis-inverted/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/axis-inverted/package.json
+++ b/samples/charts/category-chart/axis-inverted/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-inverted/sandbox.config.json b/samples/charts/category-chart/axis-inverted/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-inverted/sandbox.config.json
+++ b/samples/charts/category-chart/axis-inverted/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-inverted/src/index.css b/samples/charts/category-chart/axis-inverted/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-inverted/src/index.css
+++ b/samples/charts/category-chart/axis-inverted/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-inverted/src/index.ts b/samples/charts/category-chart/axis-inverted/src/index.ts
index 970e28c00a..6e51b317f8 100644
--- a/samples/charts/category-chart/axis-inverted/src/index.ts
+++ b/samples/charts/category-chart/axis-inverted/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -37,7 +37,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/axis-inverted/tsconfig.json b/samples/charts/category-chart/axis-inverted/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-inverted/tsconfig.json
+++ b/samples/charts/category-chart/axis-inverted/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-inverted/webpack.config.js b/samples/charts/category-chart/axis-inverted/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-inverted/webpack.config.js
+++ b/samples/charts/category-chart/axis-inverted/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-labels/package.json b/samples/charts/category-chart/axis-labels/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/axis-labels/package.json
+++ b/samples/charts/category-chart/axis-labels/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-labels/sandbox.config.json b/samples/charts/category-chart/axis-labels/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-labels/sandbox.config.json
+++ b/samples/charts/category-chart/axis-labels/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-labels/src/index.css b/samples/charts/category-chart/axis-labels/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-labels/src/index.css
+++ b/samples/charts/category-chart/axis-labels/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-labels/src/index.ts b/samples/charts/category-chart/axis-labels/src/index.ts
index 203f0dc710..d8871d7012 100644
--- a/samples/charts/category-chart/axis-labels/src/index.ts
+++ b/samples/charts/category-chart/axis-labels/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -43,7 +43,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/axis-labels/tsconfig.json b/samples/charts/category-chart/axis-labels/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-labels/tsconfig.json
+++ b/samples/charts/category-chart/axis-labels/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-labels/webpack.config.js b/samples/charts/category-chart/axis-labels/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-labels/webpack.config.js
+++ b/samples/charts/category-chart/axis-labels/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-locations/package.json b/samples/charts/category-chart/axis-locations/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/axis-locations/package.json
+++ b/samples/charts/category-chart/axis-locations/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-locations/sandbox.config.json b/samples/charts/category-chart/axis-locations/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-locations/sandbox.config.json
+++ b/samples/charts/category-chart/axis-locations/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-locations/src/index.css b/samples/charts/category-chart/axis-locations/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-locations/src/index.css
+++ b/samples/charts/category-chart/axis-locations/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-locations/src/index.ts b/samples/charts/category-chart/axis-locations/src/index.ts
index fb5e9a4820..409d4b2aed 100644
--- a/samples/charts/category-chart/axis-locations/src/index.ts
+++ b/samples/charts/category-chart/axis-locations/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -39,7 +39,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/axis-locations/tsconfig.json b/samples/charts/category-chart/axis-locations/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-locations/tsconfig.json
+++ b/samples/charts/category-chart/axis-locations/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-locations/webpack.config.js b/samples/charts/category-chart/axis-locations/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-locations/webpack.config.js
+++ b/samples/charts/category-chart/axis-locations/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-options/package.json b/samples/charts/category-chart/axis-options/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/axis-options/package.json
+++ b/samples/charts/category-chart/axis-options/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-options/sandbox.config.json b/samples/charts/category-chart/axis-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-options/sandbox.config.json
+++ b/samples/charts/category-chart/axis-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-options/src/index.css b/samples/charts/category-chart/axis-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-options/src/index.css
+++ b/samples/charts/category-chart/axis-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-options/src/index.ts b/samples/charts/category-chart/axis-options/src/index.ts
index 402367a44c..c65229b500 100644
--- a/samples/charts/category-chart/axis-options/src/index.ts
+++ b/samples/charts/category-chart/axis-options/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { OlympicMedalsTopCountriesItem, OlympicMedalsTopCountries } from './OlympicMedalsTopCountries';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.olympicMedalsTopCountries;
         }
         this._bind();
-
     }
 
     private _olympicMedalsTopCountries: OlympicMedalsTopCountries = null;
diff --git a/samples/charts/category-chart/axis-options/tsconfig.json b/samples/charts/category-chart/axis-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-options/tsconfig.json
+++ b/samples/charts/category-chart/axis-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-options/webpack.config.js b/samples/charts/category-chart/axis-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-options/webpack.config.js
+++ b/samples/charts/category-chart/axis-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-overlap/package.json b/samples/charts/category-chart/axis-overlap/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/axis-overlap/package.json
+++ b/samples/charts/category-chart/axis-overlap/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-overlap/sandbox.config.json b/samples/charts/category-chart/axis-overlap/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-overlap/sandbox.config.json
+++ b/samples/charts/category-chart/axis-overlap/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-overlap/src/index.css b/samples/charts/category-chart/axis-overlap/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-overlap/src/index.css
+++ b/samples/charts/category-chart/axis-overlap/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-overlap/src/index.ts b/samples/charts/category-chart/axis-overlap/src/index.ts
index 6d071486e7..5d5f559af0 100644
--- a/samples/charts/category-chart/axis-overlap/src/index.ts
+++ b/samples/charts/category-chart/axis-overlap/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -38,7 +38,6 @@ export class Sample {
             chart.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/axis-overlap/tsconfig.json b/samples/charts/category-chart/axis-overlap/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-overlap/tsconfig.json
+++ b/samples/charts/category-chart/axis-overlap/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-overlap/webpack.config.js b/samples/charts/category-chart/axis-overlap/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-overlap/webpack.config.js
+++ b/samples/charts/category-chart/axis-overlap/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-range/package.json b/samples/charts/category-chart/axis-range/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/axis-range/package.json
+++ b/samples/charts/category-chart/axis-range/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-range/sandbox.config.json b/samples/charts/category-chart/axis-range/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-range/sandbox.config.json
+++ b/samples/charts/category-chart/axis-range/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-range/src/index.css b/samples/charts/category-chart/axis-range/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-range/src/index.css
+++ b/samples/charts/category-chart/axis-range/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-range/src/index.ts b/samples/charts/category-chart/axis-range/src/index.ts
index b825110993..e297580d82 100644
--- a/samples/charts/category-chart/axis-range/src/index.ts
+++ b/samples/charts/category-chart/axis-range/src/index.ts
@@ -7,10 +7,10 @@ import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
 import { EnumUtil } from 'igniteui-webcomponents-core';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -48,7 +48,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/axis-range/tsconfig.json b/samples/charts/category-chart/axis-range/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-range/tsconfig.json
+++ b/samples/charts/category-chart/axis-range/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-range/webpack.config.js b/samples/charts/category-chart/axis-range/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-range/webpack.config.js
+++ b/samples/charts/category-chart/axis-range/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-tickmarks/package.json b/samples/charts/category-chart/axis-tickmarks/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/axis-tickmarks/package.json
+++ b/samples/charts/category-chart/axis-tickmarks/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-tickmarks/sandbox.config.json b/samples/charts/category-chart/axis-tickmarks/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-tickmarks/sandbox.config.json
+++ b/samples/charts/category-chart/axis-tickmarks/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-tickmarks/src/index.css b/samples/charts/category-chart/axis-tickmarks/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-tickmarks/src/index.css
+++ b/samples/charts/category-chart/axis-tickmarks/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-tickmarks/src/index.ts b/samples/charts/category-chart/axis-tickmarks/src/index.ts
index 31d06489f0..6f2e41c0c6 100644
--- a/samples/charts/category-chart/axis-tickmarks/src/index.ts
+++ b/samples/charts/category-chart/axis-tickmarks/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -39,7 +39,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/axis-tickmarks/tsconfig.json b/samples/charts/category-chart/axis-tickmarks/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-tickmarks/tsconfig.json
+++ b/samples/charts/category-chart/axis-tickmarks/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-tickmarks/webpack.config.js b/samples/charts/category-chart/axis-tickmarks/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-tickmarks/webpack.config.js
+++ b/samples/charts/category-chart/axis-tickmarks/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/axis-titles/package.json b/samples/charts/category-chart/axis-titles/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/axis-titles/package.json
+++ b/samples/charts/category-chart/axis-titles/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/axis-titles/sandbox.config.json b/samples/charts/category-chart/axis-titles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/axis-titles/sandbox.config.json
+++ b/samples/charts/category-chart/axis-titles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-titles/src/index.css b/samples/charts/category-chart/axis-titles/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/axis-titles/src/index.css
+++ b/samples/charts/category-chart/axis-titles/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/axis-titles/src/index.ts b/samples/charts/category-chart/axis-titles/src/index.ts
index 96972fb7c3..24335fec1c 100644
--- a/samples/charts/category-chart/axis-titles/src/index.ts
+++ b/samples/charts/category-chart/axis-titles/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/axis-titles/tsconfig.json b/samples/charts/category-chart/axis-titles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/axis-titles/tsconfig.json
+++ b/samples/charts/category-chart/axis-titles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/axis-titles/webpack.config.js b/samples/charts/category-chart/axis-titles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/axis-titles/webpack.config.js
+++ b/samples/charts/category-chart/axis-titles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/chart-highlight-filter/package.json b/samples/charts/category-chart/chart-highlight-filter/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/chart-highlight-filter/package.json
+++ b/samples/charts/category-chart/chart-highlight-filter/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/chart-highlight-filter/sandbox.config.json b/samples/charts/category-chart/chart-highlight-filter/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/chart-highlight-filter/sandbox.config.json
+++ b/samples/charts/category-chart/chart-highlight-filter/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/chart-highlight-filter/src/index.css b/samples/charts/category-chart/chart-highlight-filter/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/chart-highlight-filter/src/index.css
+++ b/samples/charts/category-chart/chart-highlight-filter/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/chart-highlight-filter/src/index.ts b/samples/charts/category-chart/chart-highlight-filter/src/index.ts
index 657dd27132..814b5b9ea7 100644
--- a/samples/charts/category-chart/chart-highlight-filter/src/index.ts
+++ b/samples/charts/category-chart/chart-highlight-filter/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { SalesDataItem, SalesData } from './SalesData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             chart.dataSource = this.salesData;
         }
         this._bind();
-
     }
 
     private _salesData: SalesData = null;
diff --git a/samples/charts/category-chart/chart-highlight-filter/tsconfig.json b/samples/charts/category-chart/chart-highlight-filter/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/chart-highlight-filter/tsconfig.json
+++ b/samples/charts/category-chart/chart-highlight-filter/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/chart-highlight-filter/webpack.config.js b/samples/charts/category-chart/chart-highlight-filter/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/chart-highlight-filter/webpack.config.js
+++ b/samples/charts/category-chart/chart-highlight-filter/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/package.json b/samples/charts/category-chart/column-chart-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/package.json
+++ b/samples/charts/category-chart/column-chart-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/sandbox.config.json b/samples/charts/category-chart/column-chart-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/sandbox.config.json
+++ b/samples/charts/category-chart/column-chart-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/src/index.css b/samples/charts/category-chart/column-chart-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/src/index.css
+++ b/samples/charts/category-chart/column-chart-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/src/index.ts b/samples/charts/category-chart/column-chart-multiple-sources/src/index.ts
index 0804305663..3d24d0dafc 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/src/index.ts
+++ b/samples/charts/category-chart/column-chart-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/tsconfig.json b/samples/charts/category-chart/column-chart-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/tsconfig.json
+++ b/samples/charts/category-chart/column-chart-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/webpack.config.js b/samples/charts/category-chart/column-chart-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/column-chart-single-source/package.json b/samples/charts/category-chart/column-chart-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/column-chart-single-source/package.json
+++ b/samples/charts/category-chart/column-chart-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/column-chart-single-source/sandbox.config.json b/samples/charts/category-chart/column-chart-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/column-chart-single-source/sandbox.config.json
+++ b/samples/charts/category-chart/column-chart-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/column-chart-single-source/src/index.css b/samples/charts/category-chart/column-chart-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/column-chart-single-source/src/index.css
+++ b/samples/charts/category-chart/column-chart-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/column-chart-single-source/src/index.ts b/samples/charts/category-chart/column-chart-single-source/src/index.ts
index c069ba0299..6067221aec 100644
--- a/samples/charts/category-chart/column-chart-single-source/src/index.ts
+++ b/samples/charts/category-chart/column-chart-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.temperatureAverageData;
         }
         this._bind();
-
     }
 
     private _temperatureAverageData: TemperatureAverageData = null;
diff --git a/samples/charts/category-chart/column-chart-single-source/tsconfig.json b/samples/charts/category-chart/column-chart-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/column-chart-single-source/tsconfig.json
+++ b/samples/charts/category-chart/column-chart-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/column-chart-single-source/webpack.config.js b/samples/charts/category-chart/column-chart-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/column-chart-single-source/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/column-chart-styling/package.json b/samples/charts/category-chart/column-chart-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/column-chart-styling/package.json
+++ b/samples/charts/category-chart/column-chart-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/column-chart-styling/sandbox.config.json b/samples/charts/category-chart/column-chart-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/column-chart-styling/sandbox.config.json
+++ b/samples/charts/category-chart/column-chart-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/column-chart-styling/src/index.css b/samples/charts/category-chart/column-chart-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/column-chart-styling/src/index.css
+++ b/samples/charts/category-chart/column-chart-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/column-chart-styling/src/index.ts b/samples/charts/category-chart/column-chart-styling/src/index.ts
index 6ba374ffe9..8dc070fe0f 100644
--- a/samples/charts/category-chart/column-chart-styling/src/index.ts
+++ b/samples/charts/category-chart/column-chart-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
diff --git a/samples/charts/category-chart/column-chart-styling/tsconfig.json b/samples/charts/category-chart/column-chart-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/column-chart-styling/tsconfig.json
+++ b/samples/charts/category-chart/column-chart-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/column-chart-styling/webpack.config.js b/samples/charts/category-chart/column-chart-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/column-chart-styling/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/column-chart-with-highlighting/package.json b/samples/charts/category-chart/column-chart-with-highlighting/package.json
index a2061879ac..e9bc4e5f2b 100644
--- a/samples/charts/category-chart/column-chart-with-highlighting/package.json
+++ b/samples/charts/category-chart/column-chart-with-highlighting/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/column-chart-with-highlighting/src/index.ts b/samples/charts/category-chart/column-chart-with-highlighting/src/index.ts
index 32eb98a0e3..d17713257b 100644
--- a/samples/charts/category-chart/column-chart-with-highlighting/src/index.ts
+++ b/samples/charts/category-chart/column-chart-with-highlighting/src/index.ts
@@ -25,7 +25,7 @@ export class CategoryChartHighlighting {
         this.chart.legend = this.legend
         this.chart.isItemHighlightingEnabled = false;
         this.chart.isSeriesHighlightingEnabled = true;
-        this.chart.isCategoryHighlightingEnabled = false;    
+        this.chart.isCategoryHighlightingEnabled = false;
         this.chart.highlightingMode = SeriesHighlightingMode.Auto;
         this.chart.highlightingBehavior = SeriesHighlightingBehavior.Auto;
         this.chart.legendHighlightingMode = LegendHighlightingMode.Auto;
@@ -41,7 +41,6 @@ export class CategoryChartHighlighting {
 
         const legendHighlightingMode = document.getElementById("legendHighlightingMode") as HTMLSelectElement;
         legendHighlightingMode!.addEventListener("change", this.onLegendHighlightingModeChanged);
-
     }
 
     public onHighlightingTargetChanged = (e: any) => {
@@ -50,32 +49,33 @@ export class CategoryChartHighlighting {
         if(value == "Series"){
             this.chart.isItemHighlightingEnabled = false;
             this.chart.isSeriesHighlightingEnabled = true;
-            this.chart.isCategoryHighlightingEnabled = false;            
+            this.chart.isCategoryHighlightingEnabled = false;
         }
          else if(value == "Item") {
             this.chart.isItemHighlightingEnabled = true;
             this.chart.isSeriesHighlightingEnabled = false;
-            this.chart.isCategoryHighlightingEnabled = false;                    
+            this.chart.isCategoryHighlightingEnabled = false;
         }
          else if(value == "Category") {
             this.chart.isItemHighlightingEnabled = false;
             this.chart.isSeriesHighlightingEnabled = false;
-            this.chart.isCategoryHighlightingEnabled = true;                    
+            this.chart.isCategoryHighlightingEnabled = true;
         }
          else if(value=="None") {
             this.chart.isItemHighlightingEnabled = false;
             this.chart.isSeriesHighlightingEnabled = false;
-            this.chart.isCategoryHighlightingEnabled = false;        
+            this.chart.isCategoryHighlightingEnabled = false;
         }
-      
-    } 
-    
+    }
+
     public onHighlightingModeChanged(e: any) {
         this.chart.highlightingMode = e.target.value as SeriesHighlightingMode;
     }
+
     public onBehaviorModeChanged(e: any) {
         this.chart.highlightingBehavior = e.target.value as SeriesHighlightingBehavior;
     }
+
     public onLegendHighlightingModeChanged(e: any) {
         this.chart.legendHighlightingMode = e.target.value as LegendHighlightingMode;
     }
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/package.json b/samples/charts/category-chart/column-chart-with-tooltips/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/package.json
+++ b/samples/charts/category-chart/column-chart-with-tooltips/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/sandbox.config.json b/samples/charts/category-chart/column-chart-with-tooltips/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/sandbox.config.json
+++ b/samples/charts/category-chart/column-chart-with-tooltips/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/src/index.css b/samples/charts/category-chart/column-chart-with-tooltips/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/src/index.css
+++ b/samples/charts/category-chart/column-chart-with-tooltips/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/src/index.ts b/samples/charts/category-chart/column-chart-with-tooltips/src/index.ts
index 150c1ca151..3ff824399f 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/src/index.ts
+++ b/samples/charts/category-chart/column-chart-with-tooltips/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -39,7 +39,6 @@ export class Sample {
             chart.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/tsconfig.json b/samples/charts/category-chart/column-chart-with-tooltips/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/tsconfig.json
+++ b/samples/charts/category-chart/column-chart-with-tooltips/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/webpack.config.js b/samples/charts/category-chart/column-chart-with-tooltips/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-with-tooltips/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/custom-selection/package.json b/samples/charts/category-chart/custom-selection/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/custom-selection/package.json
+++ b/samples/charts/category-chart/custom-selection/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/custom-selection/sandbox.config.json b/samples/charts/category-chart/custom-selection/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/custom-selection/sandbox.config.json
+++ b/samples/charts/category-chart/custom-selection/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/custom-selection/src/index.css b/samples/charts/category-chart/custom-selection/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/custom-selection/src/index.css
+++ b/samples/charts/category-chart/custom-selection/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/custom-selection/src/index.ts b/samples/charts/category-chart/custom-selection/src/index.ts
index d05aceec7a..f7f2db716b 100644
--- a/samples/charts/category-chart/custom-selection/src/index.ts
+++ b/samples/charts/category-chart/custom-selection/src/index.ts
@@ -2,11 +2,10 @@ import { IgcDataLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityM
 import { IgcDataLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { SelectableDataItem, SelectableData } from './SelectableData';
 import { IgcDomainChartSeriesPointerEventArgs } from 'igniteui-webcomponents-charts';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataLegendModule,
     IgcCategoryChartModule,
@@ -30,7 +29,6 @@ export class Sample {
             chart.seriesPointerDown = this.categoryChartCustomSelectionPointerDown;
         }
         this._bind();
-
     }
 
     private _selectableData: SelectableData = null;
@@ -42,7 +40,6 @@ export class Sample {
         return this._selectableData;
     }
 
-
     public categoryChartCustomSelectionPointerDown(sender: any, args: IgcDomainChartSeriesPointerEventArgs): void {
 
         var chart = this.chart;
diff --git a/samples/charts/category-chart/custom-selection/tsconfig.json b/samples/charts/category-chart/custom-selection/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/custom-selection/tsconfig.json
+++ b/samples/charts/category-chart/custom-selection/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/custom-selection/webpack.config.js b/samples/charts/category-chart/custom-selection/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/custom-selection/webpack.config.js
+++ b/samples/charts/category-chart/custom-selection/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/data-aggregations/package.json b/samples/charts/category-chart/data-aggregations/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/data-aggregations/package.json
+++ b/samples/charts/category-chart/data-aggregations/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/data-aggregations/sandbox.config.json b/samples/charts/category-chart/data-aggregations/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/data-aggregations/sandbox.config.json
+++ b/samples/charts/category-chart/data-aggregations/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-aggregations/src/index.css b/samples/charts/category-chart/data-aggregations/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/data-aggregations/src/index.css
+++ b/samples/charts/category-chart/data-aggregations/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-aggregations/src/index.ts b/samples/charts/category-chart/data-aggregations/src/index.ts
index 8aa936dcc2..6c2d52f359 100644
--- a/samples/charts/category-chart/data-aggregations/src/index.ts
+++ b/samples/charts/category-chart/data-aggregations/src/index.ts
@@ -7,10 +7,10 @@ import { SalesDataItem, SalesData } from './SalesData';
 import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs, PropertyEditorValueType } from 'igniteui-webcomponents-layouts';
 import { EnumUtil } from 'igniteui-webcomponents-core';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
diff --git a/samples/charts/category-chart/data-aggregations/tsconfig.json b/samples/charts/category-chart/data-aggregations/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/data-aggregations/tsconfig.json
+++ b/samples/charts/category-chart/data-aggregations/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/data-aggregations/webpack.config.js b/samples/charts/category-chart/data-aggregations/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/data-aggregations/webpack.config.js
+++ b/samples/charts/category-chart/data-aggregations/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/data-filter/package.json b/samples/charts/category-chart/data-filter/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/data-filter/package.json
+++ b/samples/charts/category-chart/data-filter/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/data-filter/sandbox.config.json b/samples/charts/category-chart/data-filter/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/data-filter/sandbox.config.json
+++ b/samples/charts/category-chart/data-filter/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-filter/src/index.css b/samples/charts/category-chart/data-filter/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/data-filter/src/index.css
+++ b/samples/charts/category-chart/data-filter/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-filter/src/index.ts b/samples/charts/category-chart/data-filter/src/index.ts
index e884e13389..53fb2d72af 100644
--- a/samples/charts/category-chart/data-filter/src/index.ts
+++ b/samples/charts/category-chart/data-filter/src/index.ts
@@ -7,10 +7,10 @@ import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthR
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
 import { EnumUtil } from 'igniteui-webcomponents-core';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -44,7 +44,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/category-chart/data-filter/tsconfig.json b/samples/charts/category-chart/data-filter/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/data-filter/tsconfig.json
+++ b/samples/charts/category-chart/data-filter/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/data-filter/webpack.config.js b/samples/charts/category-chart/data-filter/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/data-filter/webpack.config.js
+++ b/samples/charts/category-chart/data-filter/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/package.json b/samples/charts/category-chart/data-legend-formatting-decimals/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/package.json
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/sandbox.config.json b/samples/charts/category-chart/data-legend-formatting-decimals/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/sandbox.config.json
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/src/index.css b/samples/charts/category-chart/data-legend-formatting-decimals/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/src/index.css
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/src/index.ts b/samples/charts/category-chart/data-legend-formatting-decimals/src/index.ts
index f8ee6bb4bf..4e3e333a2f 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/src/index.ts
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcDataLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/tsconfig.json b/samples/charts/category-chart/data-legend-formatting-decimals/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/tsconfig.json
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/webpack.config.js b/samples/charts/category-chart/data-legend-formatting-decimals/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/webpack.config.js
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/data-legend/package.json b/samples/charts/category-chart/data-legend/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/data-legend/package.json
+++ b/samples/charts/category-chart/data-legend/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/data-legend/sandbox.config.json b/samples/charts/category-chart/data-legend/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/data-legend/sandbox.config.json
+++ b/samples/charts/category-chart/data-legend/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-legend/src/index.css b/samples/charts/category-chart/data-legend/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/data-legend/src/index.css
+++ b/samples/charts/category-chart/data-legend/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-legend/src/index.ts b/samples/charts/category-chart/data-legend/src/index.ts
index f8ee6bb4bf..4e3e333a2f 100644
--- a/samples/charts/category-chart/data-legend/src/index.ts
+++ b/samples/charts/category-chart/data-legend/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcDataLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/data-legend/tsconfig.json b/samples/charts/category-chart/data-legend/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/data-legend/tsconfig.json
+++ b/samples/charts/category-chart/data-legend/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/data-legend/webpack.config.js b/samples/charts/category-chart/data-legend/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/data-legend/webpack.config.js
+++ b/samples/charts/category-chart/data-legend/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json b/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/sandbox.config.json b/samples/charts/category-chart/data-tooltip-formatting-decimals/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/sandbox.config.json
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/src/index.css b/samples/charts/category-chart/data-tooltip-formatting-decimals/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/src/index.css
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/src/index.ts b/samples/charts/category-chart/data-tooltip-formatting-decimals/src/index.ts
index 7c88e74467..bc88967a8f 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/src/index.ts
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -23,7 +22,6 @@ export class Sample {
             chart.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/tsconfig.json b/samples/charts/category-chart/data-tooltip-formatting-decimals/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/tsconfig.json
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/webpack.config.js b/samples/charts/category-chart/data-tooltip-formatting-decimals/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/webpack.config.js
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/data-tooltip-positioning/package.json b/samples/charts/category-chart/data-tooltip-positioning/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/package.json
+++ b/samples/charts/category-chart/data-tooltip-positioning/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/data-tooltip-positioning/sandbox.config.json b/samples/charts/category-chart/data-tooltip-positioning/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/sandbox.config.json
+++ b/samples/charts/category-chart/data-tooltip-positioning/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-tooltip-positioning/src/index.css b/samples/charts/category-chart/data-tooltip-positioning/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/src/index.css
+++ b/samples/charts/category-chart/data-tooltip-positioning/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-tooltip-positioning/src/index.ts b/samples/charts/category-chart/data-tooltip-positioning/src/index.ts
index 849fb5369e..53bac6c01f 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/src/index.ts
+++ b/samples/charts/category-chart/data-tooltip-positioning/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -40,7 +40,6 @@ export class Sample {
             chart.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/data-tooltip-positioning/tsconfig.json b/samples/charts/category-chart/data-tooltip-positioning/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/tsconfig.json
+++ b/samples/charts/category-chart/data-tooltip-positioning/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/data-tooltip-positioning/webpack.config.js b/samples/charts/category-chart/data-tooltip-positioning/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/webpack.config.js
+++ b/samples/charts/category-chart/data-tooltip-positioning/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/data-tooltip/package.json b/samples/charts/category-chart/data-tooltip/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/data-tooltip/package.json
+++ b/samples/charts/category-chart/data-tooltip/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/data-tooltip/sandbox.config.json b/samples/charts/category-chart/data-tooltip/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/data-tooltip/sandbox.config.json
+++ b/samples/charts/category-chart/data-tooltip/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-tooltip/src/index.css b/samples/charts/category-chart/data-tooltip/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/data-tooltip/src/index.css
+++ b/samples/charts/category-chart/data-tooltip/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/data-tooltip/src/index.ts b/samples/charts/category-chart/data-tooltip/src/index.ts
index 7c88e74467..bc88967a8f 100644
--- a/samples/charts/category-chart/data-tooltip/src/index.ts
+++ b/samples/charts/category-chart/data-tooltip/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -23,7 +22,6 @@ export class Sample {
             chart.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/data-tooltip/tsconfig.json b/samples/charts/category-chart/data-tooltip/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/data-tooltip/tsconfig.json
+++ b/samples/charts/category-chart/data-tooltip/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/data-tooltip/webpack.config.js b/samples/charts/category-chart/data-tooltip/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/data-tooltip/webpack.config.js
+++ b/samples/charts/category-chart/data-tooltip/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/format-specifiers/package.json b/samples/charts/category-chart/format-specifiers/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/category-chart/format-specifiers/package.json
+++ b/samples/charts/category-chart/format-specifiers/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/format-specifiers/sandbox.config.json b/samples/charts/category-chart/format-specifiers/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/format-specifiers/sandbox.config.json
+++ b/samples/charts/category-chart/format-specifiers/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/format-specifiers/src/index.css b/samples/charts/category-chart/format-specifiers/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/format-specifiers/src/index.css
+++ b/samples/charts/category-chart/format-specifiers/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/format-specifiers/src/index.ts b/samples/charts/category-chart/format-specifiers/src/index.ts
index 8ef753fe9e..17d46aff71 100644
--- a/samples/charts/category-chart/format-specifiers/src/index.ts
+++ b/samples/charts/category-chart/format-specifiers/src/index.ts
@@ -5,11 +5,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDesc
 import { IgcDataLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcNumberFormatSpecifier } from 'igniteui-webcomponents-core';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule,
     IgcDataLegendModule,
@@ -37,6 +36,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier1;
     }
+
     private chart: IgcCategoryChartComponent
     private _numberFormatSpecifier3: IgcNumberFormatSpecifier[] | null = null;
     public get numberFormatSpecifier3(): IgcNumberFormatSpecifier[] {
@@ -55,6 +55,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier3;
     }
+
     private _numberFormatSpecifier5: IgcNumberFormatSpecifier[] | null = null;
     public get numberFormatSpecifier5(): IgcNumberFormatSpecifier[] {
         if (this._numberFormatSpecifier5 == null)
@@ -71,6 +72,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier5;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -85,7 +87,6 @@ export class Sample {
             chart.yAxisLabelFormatSpecifiers = this.numberFormatSpecifier5;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/format-specifiers/tsconfig.json b/samples/charts/category-chart/format-specifiers/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/format-specifiers/tsconfig.json
+++ b/samples/charts/category-chart/format-specifiers/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/format-specifiers/webpack.config.js b/samples/charts/category-chart/format-specifiers/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/format-specifiers/webpack.config.js
+++ b/samples/charts/category-chart/format-specifiers/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/high-frequency/package.json b/samples/charts/category-chart/high-frequency/package.json
index 9f5f886fdc..dce20cf392 100644
--- a/samples/charts/category-chart/high-frequency/package.json
+++ b/samples/charts/category-chart/high-frequency/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/high-volume/package.json b/samples/charts/category-chart/high-volume/package.json
index b396cff716..4b54694b37 100644
--- a/samples/charts/category-chart/high-volume/package.json
+++ b/samples/charts/category-chart/high-volume/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/highlighting-behavior/package.json b/samples/charts/category-chart/highlighting-behavior/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/highlighting-behavior/package.json
+++ b/samples/charts/category-chart/highlighting-behavior/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/highlighting-behavior/sandbox.config.json b/samples/charts/category-chart/highlighting-behavior/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/highlighting-behavior/sandbox.config.json
+++ b/samples/charts/category-chart/highlighting-behavior/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/highlighting-behavior/src/index.css b/samples/charts/category-chart/highlighting-behavior/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/highlighting-behavior/src/index.css
+++ b/samples/charts/category-chart/highlighting-behavior/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/highlighting-behavior/src/index.ts b/samples/charts/category-chart/highlighting-behavior/src/index.ts
index 604f7d7205..1a2becb679 100644
--- a/samples/charts/category-chart/highlighting-behavior/src/index.ts
+++ b/samples/charts/category-chart/highlighting-behavior/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             chart.dataSource = this.temperatureAnnotatedData;
         }
         this._bind();
-
     }
 
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
diff --git a/samples/charts/category-chart/highlighting-behavior/tsconfig.json b/samples/charts/category-chart/highlighting-behavior/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/highlighting-behavior/tsconfig.json
+++ b/samples/charts/category-chart/highlighting-behavior/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/highlighting-behavior/webpack.config.js b/samples/charts/category-chart/highlighting-behavior/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/highlighting-behavior/webpack.config.js
+++ b/samples/charts/category-chart/highlighting-behavior/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/highlighting-mode/package.json b/samples/charts/category-chart/highlighting-mode/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/highlighting-mode/package.json
+++ b/samples/charts/category-chart/highlighting-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/highlighting-mode/sandbox.config.json b/samples/charts/category-chart/highlighting-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/highlighting-mode/sandbox.config.json
+++ b/samples/charts/category-chart/highlighting-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/highlighting-mode/src/index.css b/samples/charts/category-chart/highlighting-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/highlighting-mode/src/index.css
+++ b/samples/charts/category-chart/highlighting-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/highlighting-mode/src/index.ts b/samples/charts/category-chart/highlighting-mode/src/index.ts
index ceb63b9398..47ce5fd867 100644
--- a/samples/charts/category-chart/highlighting-mode/src/index.ts
+++ b/samples/charts/category-chart/highlighting-mode/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             chart.dataSource = this.temperatureAnnotatedData;
         }
         this._bind();
-
     }
 
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
diff --git a/samples/charts/category-chart/highlighting-mode/tsconfig.json b/samples/charts/category-chart/highlighting-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/highlighting-mode/tsconfig.json
+++ b/samples/charts/category-chart/highlighting-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/highlighting-mode/webpack.config.js b/samples/charts/category-chart/highlighting-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/highlighting-mode/webpack.config.js
+++ b/samples/charts/category-chart/highlighting-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/highlighting/package.json b/samples/charts/category-chart/highlighting/package.json
index a2061879ac..e9bc4e5f2b 100644
--- a/samples/charts/category-chart/highlighting/package.json
+++ b/samples/charts/category-chart/highlighting/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/legend-highlighting/package.json b/samples/charts/category-chart/legend-highlighting/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/legend-highlighting/package.json
+++ b/samples/charts/category-chart/legend-highlighting/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/legend-highlighting/sandbox.config.json b/samples/charts/category-chart/legend-highlighting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/legend-highlighting/sandbox.config.json
+++ b/samples/charts/category-chart/legend-highlighting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/legend-highlighting/src/index.css b/samples/charts/category-chart/legend-highlighting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/legend-highlighting/src/index.css
+++ b/samples/charts/category-chart/legend-highlighting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/legend-highlighting/src/index.ts b/samples/charts/category-chart/legend-highlighting/src/index.ts
index c5383ea3bd..32e46417d6 100644
--- a/samples/charts/category-chart/legend-highlighting/src/index.ts
+++ b/samples/charts/category-chart/legend-highlighting/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/category-chart/legend-highlighting/tsconfig.json b/samples/charts/category-chart/legend-highlighting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/legend-highlighting/tsconfig.json
+++ b/samples/charts/category-chart/legend-highlighting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/legend-highlighting/webpack.config.js b/samples/charts/category-chart/legend-highlighting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/legend-highlighting/webpack.config.js
+++ b/samples/charts/category-chart/legend-highlighting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/package.json b/samples/charts/category-chart/line-chart-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/package.json
+++ b/samples/charts/category-chart/line-chart-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/sandbox.config.json b/samples/charts/category-chart/line-chart-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/sandbox.config.json
+++ b/samples/charts/category-chart/line-chart-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/src/index.css b/samples/charts/category-chart/line-chart-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/src/index.css
+++ b/samples/charts/category-chart/line-chart-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/src/index.ts b/samples/charts/category-chart/line-chart-multiple-sources/src/index.ts
index 96972fb7c3..24335fec1c 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/src/index.ts
+++ b/samples/charts/category-chart/line-chart-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/tsconfig.json b/samples/charts/category-chart/line-chart-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/tsconfig.json
+++ b/samples/charts/category-chart/line-chart-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/webpack.config.js b/samples/charts/category-chart/line-chart-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/line-chart-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/line-chart-single-source/package.json b/samples/charts/category-chart/line-chart-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/line-chart-single-source/package.json
+++ b/samples/charts/category-chart/line-chart-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/line-chart-single-source/sandbox.config.json b/samples/charts/category-chart/line-chart-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/line-chart-single-source/sandbox.config.json
+++ b/samples/charts/category-chart/line-chart-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/line-chart-single-source/src/index.css b/samples/charts/category-chart/line-chart-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/line-chart-single-source/src/index.css
+++ b/samples/charts/category-chart/line-chart-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/line-chart-single-source/src/index.ts b/samples/charts/category-chart/line-chart-single-source/src/index.ts
index 06100ba79f..d6589a2735 100644
--- a/samples/charts/category-chart/line-chart-single-source/src/index.ts
+++ b/samples/charts/category-chart/line-chart-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/line-chart-single-source/tsconfig.json b/samples/charts/category-chart/line-chart-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/line-chart-single-source/tsconfig.json
+++ b/samples/charts/category-chart/line-chart-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/line-chart-single-source/webpack.config.js b/samples/charts/category-chart/line-chart-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/line-chart-single-source/webpack.config.js
+++ b/samples/charts/category-chart/line-chart-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/line-chart-styling/package.json b/samples/charts/category-chart/line-chart-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/line-chart-styling/package.json
+++ b/samples/charts/category-chart/line-chart-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/line-chart-styling/sandbox.config.json b/samples/charts/category-chart/line-chart-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/line-chart-styling/sandbox.config.json
+++ b/samples/charts/category-chart/line-chart-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/line-chart-styling/src/index.css b/samples/charts/category-chart/line-chart-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/line-chart-styling/src/index.css
+++ b/samples/charts/category-chart/line-chart-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/line-chart-styling/src/index.ts b/samples/charts/category-chart/line-chart-styling/src/index.ts
index 96972fb7c3..24335fec1c 100644
--- a/samples/charts/category-chart/line-chart-styling/src/index.ts
+++ b/samples/charts/category-chart/line-chart-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/line-chart-styling/tsconfig.json b/samples/charts/category-chart/line-chart-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/line-chart-styling/tsconfig.json
+++ b/samples/charts/category-chart/line-chart-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/line-chart-styling/webpack.config.js b/samples/charts/category-chart/line-chart-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/line-chart-styling/webpack.config.js
+++ b/samples/charts/category-chart/line-chart-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/line-chart-with-animations/package.json b/samples/charts/category-chart/line-chart-with-animations/package.json
index 80a11dbde7..b7528d5524 100644
--- a/samples/charts/category-chart/line-chart-with-animations/package.json
+++ b/samples/charts/category-chart/line-chart-with-animations/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/line-chart-with-animations/src/index.ts b/samples/charts/category-chart/line-chart-with-animations/src/index.ts
index 45fddb335c..1f0a36a98e 100644
--- a/samples/charts/category-chart/line-chart-with-animations/src/index.ts
+++ b/samples/charts/category-chart/line-chart-with-animations/src/index.ts
@@ -60,7 +60,7 @@ export class CategoryChartLineChartWithAnimations {
 
     public onTransitionTimeChanged(e: any) {
         this.chart.transitionInDuration = e.target.value;
-        this.transitionLabel.textContent = e.target.value + "ms";            
+        this.transitionLabel.textContent = e.target.value + "ms";
         this.reloadChart();
     }
 
diff --git a/samples/charts/category-chart/line-chart-with-annotations/package.json b/samples/charts/category-chart/line-chart-with-annotations/package.json
index 6e8852c772..aef66af0ef 100644
--- a/samples/charts/category-chart/line-chart-with-annotations/package.json
+++ b/samples/charts/category-chart/line-chart-with-annotations/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/line-chart-with-annotations/src/index.ts b/samples/charts/category-chart/line-chart-with-annotations/src/index.ts
index 8dee95332d..b85a8889d7 100644
--- a/samples/charts/category-chart/line-chart-with-annotations/src/index.ts
+++ b/samples/charts/category-chart/line-chart-with-annotations/src/index.ts
@@ -12,7 +12,7 @@ export class Sample {
     private chart: IgcCategoryChartComponent;
     public includedProperties: string[] = ["Year", "USA"];
     public data: any[] = [];
-    
+
     constructor() {
 
         this.onCrosshairsVisible = this.onCrosshairsVisible.bind(this);
@@ -38,7 +38,7 @@ export class Sample {
         let checkbox4 = document.getElementById('checkbox4');
         checkbox4!.addEventListener('change', this.onMarkersVisible);
     }
-   
+
     public initData() {
         this.data = [
             { Year: "2009", USA: 19 },
@@ -53,7 +53,7 @@ export class Sample {
             { Year: "2018", USA: 34 },
             { Year: "2019", USA: 38 },
         ];
-        
+
         let idx: number = 0;
 
         for (const item of this.data) {
diff --git a/samples/charts/category-chart/marker-options/package.json b/samples/charts/category-chart/marker-options/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/marker-options/package.json
+++ b/samples/charts/category-chart/marker-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/marker-options/sandbox.config.json b/samples/charts/category-chart/marker-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/marker-options/sandbox.config.json
+++ b/samples/charts/category-chart/marker-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/marker-options/src/index.css b/samples/charts/category-chart/marker-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/marker-options/src/index.css
+++ b/samples/charts/category-chart/marker-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/marker-options/src/index.ts b/samples/charts/category-chart/marker-options/src/index.ts
index 00585e9468..0b1a0a9825 100644
--- a/samples/charts/category-chart/marker-options/src/index.ts
+++ b/samples/charts/category-chart/marker-options/src/index.ts
@@ -7,10 +7,10 @@ import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
 import { EnumUtil } from 'igniteui-webcomponents-core';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -43,7 +43,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/marker-options/tsconfig.json b/samples/charts/category-chart/marker-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/marker-options/tsconfig.json
+++ b/samples/charts/category-chart/marker-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/marker-options/webpack.config.js b/samples/charts/category-chart/marker-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/marker-options/webpack.config.js
+++ b/samples/charts/category-chart/marker-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/marker-templates/package.json b/samples/charts/category-chart/marker-templates/package.json
index b566357064..de6aae8aea 100644
--- a/samples/charts/category-chart/marker-templates/package.json
+++ b/samples/charts/category-chart/marker-templates/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/marker-templates/src/index.ts b/samples/charts/category-chart/marker-templates/src/index.ts
index 7d290c3167..0156ddc722 100644
--- a/samples/charts/category-chart/marker-templates/src/index.ts
+++ b/samples/charts/category-chart/marker-templates/src/index.ts
@@ -65,7 +65,6 @@ export class CategoryChartMarkerTemplates {
                     return;
                 }
 
-
                 const dataItem = renderInfo.data.item;
                 if (dataItem === null) return;
 
diff --git a/samples/charts/category-chart/overview/package.json b/samples/charts/category-chart/overview/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/overview/package.json
+++ b/samples/charts/category-chart/overview/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/overview/sandbox.config.json b/samples/charts/category-chart/overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/overview/sandbox.config.json
+++ b/samples/charts/category-chart/overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/overview/src/index.css b/samples/charts/category-chart/overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/overview/src/index.css
+++ b/samples/charts/category-chart/overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/overview/src/index.ts b/samples/charts/category-chart/overview/src/index.ts
index b134c613fd..982ef63180 100644
--- a/samples/charts/category-chart/overview/src/index.ts
+++ b/samples/charts/category-chart/overview/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/overview/tsconfig.json b/samples/charts/category-chart/overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/overview/tsconfig.json
+++ b/samples/charts/category-chart/overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/overview/webpack.config.js b/samples/charts/category-chart/overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/overview/webpack.config.js
+++ b/samples/charts/category-chart/overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/package.json b/samples/charts/category-chart/point-chart-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/package.json
+++ b/samples/charts/category-chart/point-chart-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/sandbox.config.json b/samples/charts/category-chart/point-chart-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/sandbox.config.json
+++ b/samples/charts/category-chart/point-chart-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/src/index.css b/samples/charts/category-chart/point-chart-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/src/index.css
+++ b/samples/charts/category-chart/point-chart-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/src/index.ts b/samples/charts/category-chart/point-chart-multiple-sources/src/index.ts
index 96972fb7c3..24335fec1c 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/src/index.ts
+++ b/samples/charts/category-chart/point-chart-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/tsconfig.json b/samples/charts/category-chart/point-chart-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/tsconfig.json
+++ b/samples/charts/category-chart/point-chart-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/webpack.config.js b/samples/charts/category-chart/point-chart-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/point-chart-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/point-chart-single-source/package.json b/samples/charts/category-chart/point-chart-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/point-chart-single-source/package.json
+++ b/samples/charts/category-chart/point-chart-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/point-chart-single-source/sandbox.config.json b/samples/charts/category-chart/point-chart-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/point-chart-single-source/sandbox.config.json
+++ b/samples/charts/category-chart/point-chart-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/point-chart-single-source/src/index.css b/samples/charts/category-chart/point-chart-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/point-chart-single-source/src/index.css
+++ b/samples/charts/category-chart/point-chart-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/point-chart-single-source/src/index.ts b/samples/charts/category-chart/point-chart-single-source/src/index.ts
index 06100ba79f..d6589a2735 100644
--- a/samples/charts/category-chart/point-chart-single-source/src/index.ts
+++ b/samples/charts/category-chart/point-chart-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/point-chart-single-source/tsconfig.json b/samples/charts/category-chart/point-chart-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/point-chart-single-source/tsconfig.json
+++ b/samples/charts/category-chart/point-chart-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/point-chart-single-source/webpack.config.js b/samples/charts/category-chart/point-chart-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/point-chart-single-source/webpack.config.js
+++ b/samples/charts/category-chart/point-chart-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/point-chart-styling/package.json b/samples/charts/category-chart/point-chart-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/point-chart-styling/package.json
+++ b/samples/charts/category-chart/point-chart-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/point-chart-styling/sandbox.config.json b/samples/charts/category-chart/point-chart-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/point-chart-styling/sandbox.config.json
+++ b/samples/charts/category-chart/point-chart-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/point-chart-styling/src/index.css b/samples/charts/category-chart/point-chart-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/point-chart-styling/src/index.css
+++ b/samples/charts/category-chart/point-chart-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/point-chart-styling/src/index.ts b/samples/charts/category-chart/point-chart-styling/src/index.ts
index 96972fb7c3..24335fec1c 100644
--- a/samples/charts/category-chart/point-chart-styling/src/index.ts
+++ b/samples/charts/category-chart/point-chart-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/point-chart-styling/tsconfig.json b/samples/charts/category-chart/point-chart-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/point-chart-styling/tsconfig.json
+++ b/samples/charts/category-chart/point-chart-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/point-chart-styling/webpack.config.js b/samples/charts/category-chart/point-chart-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/point-chart-styling/webpack.config.js
+++ b/samples/charts/category-chart/point-chart-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/selection-modes/package.json b/samples/charts/category-chart/selection-modes/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/selection-modes/package.json
+++ b/samples/charts/category-chart/selection-modes/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/selection-modes/sandbox.config.json b/samples/charts/category-chart/selection-modes/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/selection-modes/sandbox.config.json
+++ b/samples/charts/category-chart/selection-modes/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/selection-modes/src/index.css b/samples/charts/category-chart/selection-modes/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/selection-modes/src/index.css
+++ b/samples/charts/category-chart/selection-modes/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/selection-modes/src/index.ts b/samples/charts/category-chart/selection-modes/src/index.ts
index bc35ce73aa..238f8c15b6 100644
--- a/samples/charts/category-chart/selection-modes/src/index.ts
+++ b/samples/charts/category-chart/selection-modes/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule,
     IgcDataChartInteractivityModule
@@ -23,7 +22,6 @@ export class Sample {
             chart.dataSource = this.temperatureAverageData;
         }
         this._bind();
-
     }
 
     private _temperatureAverageData: TemperatureAverageData = null;
diff --git a/samples/charts/category-chart/selection-modes/tsconfig.json b/samples/charts/category-chart/selection-modes/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/selection-modes/tsconfig.json
+++ b/samples/charts/category-chart/selection-modes/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/selection-modes/webpack.config.js b/samples/charts/category-chart/selection-modes/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/selection-modes/webpack.config.js
+++ b/samples/charts/category-chart/selection-modes/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/selection-multiple-modes/package.json b/samples/charts/category-chart/selection-multiple-modes/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/selection-multiple-modes/package.json
+++ b/samples/charts/category-chart/selection-multiple-modes/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/selection-multiple-modes/sandbox.config.json b/samples/charts/category-chart/selection-multiple-modes/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/selection-multiple-modes/sandbox.config.json
+++ b/samples/charts/category-chart/selection-multiple-modes/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/selection-multiple-modes/src/index.css b/samples/charts/category-chart/selection-multiple-modes/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/selection-multiple-modes/src/index.css
+++ b/samples/charts/category-chart/selection-multiple-modes/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/selection-multiple-modes/src/index.ts b/samples/charts/category-chart/selection-multiple-modes/src/index.ts
index 9290aaf45e..bcd4d513fd 100644
--- a/samples/charts/category-chart/selection-multiple-modes/src/index.ts
+++ b/samples/charts/category-chart/selection-multiple-modes/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescript
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -41,7 +41,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
diff --git a/samples/charts/category-chart/selection-multiple-modes/tsconfig.json b/samples/charts/category-chart/selection-multiple-modes/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/selection-multiple-modes/tsconfig.json
+++ b/samples/charts/category-chart/selection-multiple-modes/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/selection-multiple-modes/webpack.config.js b/samples/charts/category-chart/selection-multiple-modes/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/selection-multiple-modes/webpack.config.js
+++ b/samples/charts/category-chart/selection-multiple-modes/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/package.json b/samples/charts/category-chart/spline-area-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/package.json
+++ b/samples/charts/category-chart/spline-area-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/sandbox.config.json b/samples/charts/category-chart/spline-area-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/sandbox.config.json
+++ b/samples/charts/category-chart/spline-area-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/src/index.css b/samples/charts/category-chart/spline-area-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/src/index.css
+++ b/samples/charts/category-chart/spline-area-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/src/index.ts b/samples/charts/category-chart/spline-area-multiple-sources/src/index.ts
index 4142598816..72f889b2fa 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/src/index.ts
+++ b/samples/charts/category-chart/spline-area-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/tsconfig.json b/samples/charts/category-chart/spline-area-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/tsconfig.json
+++ b/samples/charts/category-chart/spline-area-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/webpack.config.js b/samples/charts/category-chart/spline-area-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/spline-area-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/spline-area-single-source/package.json b/samples/charts/category-chart/spline-area-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/spline-area-single-source/package.json
+++ b/samples/charts/category-chart/spline-area-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/spline-area-single-source/sandbox.config.json b/samples/charts/category-chart/spline-area-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/spline-area-single-source/sandbox.config.json
+++ b/samples/charts/category-chart/spline-area-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-area-single-source/src/index.css b/samples/charts/category-chart/spline-area-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/spline-area-single-source/src/index.css
+++ b/samples/charts/category-chart/spline-area-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-area-single-source/src/index.ts b/samples/charts/category-chart/spline-area-single-source/src/index.ts
index 06100ba79f..d6589a2735 100644
--- a/samples/charts/category-chart/spline-area-single-source/src/index.ts
+++ b/samples/charts/category-chart/spline-area-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/spline-area-single-source/tsconfig.json b/samples/charts/category-chart/spline-area-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/spline-area-single-source/tsconfig.json
+++ b/samples/charts/category-chart/spline-area-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/spline-area-single-source/webpack.config.js b/samples/charts/category-chart/spline-area-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/spline-area-single-source/webpack.config.js
+++ b/samples/charts/category-chart/spline-area-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/spline-area-styling/package.json b/samples/charts/category-chart/spline-area-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/spline-area-styling/package.json
+++ b/samples/charts/category-chart/spline-area-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/spline-area-styling/sandbox.config.json b/samples/charts/category-chart/spline-area-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/spline-area-styling/sandbox.config.json
+++ b/samples/charts/category-chart/spline-area-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-area-styling/src/index.css b/samples/charts/category-chart/spline-area-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/spline-area-styling/src/index.css
+++ b/samples/charts/category-chart/spline-area-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-area-styling/src/index.ts b/samples/charts/category-chart/spline-area-styling/src/index.ts
index 4142598816..72f889b2fa 100644
--- a/samples/charts/category-chart/spline-area-styling/src/index.ts
+++ b/samples/charts/category-chart/spline-area-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/spline-area-styling/tsconfig.json b/samples/charts/category-chart/spline-area-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/spline-area-styling/tsconfig.json
+++ b/samples/charts/category-chart/spline-area-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/spline-area-styling/webpack.config.js b/samples/charts/category-chart/spline-area-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/spline-area-styling/webpack.config.js
+++ b/samples/charts/category-chart/spline-area-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/spline-multiple-sources/package.json b/samples/charts/category-chart/spline-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/spline-multiple-sources/package.json
+++ b/samples/charts/category-chart/spline-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/spline-multiple-sources/sandbox.config.json b/samples/charts/category-chart/spline-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/spline-multiple-sources/sandbox.config.json
+++ b/samples/charts/category-chart/spline-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-multiple-sources/src/index.css b/samples/charts/category-chart/spline-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/spline-multiple-sources/src/index.css
+++ b/samples/charts/category-chart/spline-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-multiple-sources/src/index.ts b/samples/charts/category-chart/spline-multiple-sources/src/index.ts
index 4142598816..72f889b2fa 100644
--- a/samples/charts/category-chart/spline-multiple-sources/src/index.ts
+++ b/samples/charts/category-chart/spline-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/spline-multiple-sources/tsconfig.json b/samples/charts/category-chart/spline-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/spline-multiple-sources/tsconfig.json
+++ b/samples/charts/category-chart/spline-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/spline-multiple-sources/webpack.config.js b/samples/charts/category-chart/spline-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/spline-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/spline-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/spline-single-source/package.json b/samples/charts/category-chart/spline-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/spline-single-source/package.json
+++ b/samples/charts/category-chart/spline-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/spline-single-source/sandbox.config.json b/samples/charts/category-chart/spline-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/spline-single-source/sandbox.config.json
+++ b/samples/charts/category-chart/spline-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-single-source/src/index.css b/samples/charts/category-chart/spline-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/spline-single-source/src/index.css
+++ b/samples/charts/category-chart/spline-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-single-source/src/index.ts b/samples/charts/category-chart/spline-single-source/src/index.ts
index 06100ba79f..d6589a2735 100644
--- a/samples/charts/category-chart/spline-single-source/src/index.ts
+++ b/samples/charts/category-chart/spline-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/spline-single-source/tsconfig.json b/samples/charts/category-chart/spline-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/spline-single-source/tsconfig.json
+++ b/samples/charts/category-chart/spline-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/spline-single-source/webpack.config.js b/samples/charts/category-chart/spline-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/spline-single-source/webpack.config.js
+++ b/samples/charts/category-chart/spline-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/spline-styling/package.json b/samples/charts/category-chart/spline-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/spline-styling/package.json
+++ b/samples/charts/category-chart/spline-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/spline-styling/sandbox.config.json b/samples/charts/category-chart/spline-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/spline-styling/sandbox.config.json
+++ b/samples/charts/category-chart/spline-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-styling/src/index.css b/samples/charts/category-chart/spline-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/spline-styling/src/index.css
+++ b/samples/charts/category-chart/spline-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/spline-styling/src/index.ts b/samples/charts/category-chart/spline-styling/src/index.ts
index 4142598816..72f889b2fa 100644
--- a/samples/charts/category-chart/spline-styling/src/index.ts
+++ b/samples/charts/category-chart/spline-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/spline-styling/tsconfig.json b/samples/charts/category-chart/spline-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/spline-styling/tsconfig.json
+++ b/samples/charts/category-chart/spline-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/spline-styling/webpack.config.js b/samples/charts/category-chart/spline-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/spline-styling/webpack.config.js
+++ b/samples/charts/category-chart/spline-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/stack-columns/package.json b/samples/charts/category-chart/stack-columns/package.json
index 5fda8b5427..a136c1bebf 100644
--- a/samples/charts/category-chart/stack-columns/package.json
+++ b/samples/charts/category-chart/stack-columns/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/step-area-multiple-sources/package.json b/samples/charts/category-chart/step-area-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/package.json
+++ b/samples/charts/category-chart/step-area-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/step-area-multiple-sources/sandbox.config.json b/samples/charts/category-chart/step-area-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/sandbox.config.json
+++ b/samples/charts/category-chart/step-area-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-area-multiple-sources/src/index.css b/samples/charts/category-chart/step-area-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/src/index.css
+++ b/samples/charts/category-chart/step-area-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-area-multiple-sources/src/index.ts b/samples/charts/category-chart/step-area-multiple-sources/src/index.ts
index 4142598816..72f889b2fa 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/src/index.ts
+++ b/samples/charts/category-chart/step-area-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/step-area-multiple-sources/tsconfig.json b/samples/charts/category-chart/step-area-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/tsconfig.json
+++ b/samples/charts/category-chart/step-area-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/step-area-multiple-sources/webpack.config.js b/samples/charts/category-chart/step-area-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/step-area-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/step-area-single-source/package.json b/samples/charts/category-chart/step-area-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/step-area-single-source/package.json
+++ b/samples/charts/category-chart/step-area-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/step-area-single-source/sandbox.config.json b/samples/charts/category-chart/step-area-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/step-area-single-source/sandbox.config.json
+++ b/samples/charts/category-chart/step-area-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-area-single-source/src/index.css b/samples/charts/category-chart/step-area-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/step-area-single-source/src/index.css
+++ b/samples/charts/category-chart/step-area-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-area-single-source/src/index.ts b/samples/charts/category-chart/step-area-single-source/src/index.ts
index 634bdcf8ce..b286d37fff 100644
--- a/samples/charts/category-chart/step-area-single-source/src/index.ts
+++ b/samples/charts/category-chart/step-area-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule,
     IgcDataChartInteractivityModule
@@ -23,7 +22,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/step-area-single-source/tsconfig.json b/samples/charts/category-chart/step-area-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/step-area-single-source/tsconfig.json
+++ b/samples/charts/category-chart/step-area-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/step-area-single-source/webpack.config.js b/samples/charts/category-chart/step-area-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/step-area-single-source/webpack.config.js
+++ b/samples/charts/category-chart/step-area-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/step-area-styling/package.json b/samples/charts/category-chart/step-area-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/step-area-styling/package.json
+++ b/samples/charts/category-chart/step-area-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/step-area-styling/sandbox.config.json b/samples/charts/category-chart/step-area-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/step-area-styling/sandbox.config.json
+++ b/samples/charts/category-chart/step-area-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-area-styling/src/index.css b/samples/charts/category-chart/step-area-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/step-area-styling/src/index.css
+++ b/samples/charts/category-chart/step-area-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-area-styling/src/index.ts b/samples/charts/category-chart/step-area-styling/src/index.ts
index 4142598816..72f889b2fa 100644
--- a/samples/charts/category-chart/step-area-styling/src/index.ts
+++ b/samples/charts/category-chart/step-area-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/step-area-styling/tsconfig.json b/samples/charts/category-chart/step-area-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/step-area-styling/tsconfig.json
+++ b/samples/charts/category-chart/step-area-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/step-area-styling/webpack.config.js b/samples/charts/category-chart/step-area-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/step-area-styling/webpack.config.js
+++ b/samples/charts/category-chart/step-area-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/step-line-multiple-sources/package.json b/samples/charts/category-chart/step-line-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/package.json
+++ b/samples/charts/category-chart/step-line-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/step-line-multiple-sources/sandbox.config.json b/samples/charts/category-chart/step-line-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/sandbox.config.json
+++ b/samples/charts/category-chart/step-line-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-line-multiple-sources/src/index.css b/samples/charts/category-chart/step-line-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/src/index.css
+++ b/samples/charts/category-chart/step-line-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-line-multiple-sources/src/index.ts b/samples/charts/category-chart/step-line-multiple-sources/src/index.ts
index 7f121863f5..2c2556358a 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/src/index.ts
+++ b/samples/charts/category-chart/step-line-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/step-line-multiple-sources/tsconfig.json b/samples/charts/category-chart/step-line-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/tsconfig.json
+++ b/samples/charts/category-chart/step-line-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/step-line-multiple-sources/webpack.config.js b/samples/charts/category-chart/step-line-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/step-line-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/step-line-single-source/package.json b/samples/charts/category-chart/step-line-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/step-line-single-source/package.json
+++ b/samples/charts/category-chart/step-line-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/step-line-single-source/sandbox.config.json b/samples/charts/category-chart/step-line-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/step-line-single-source/sandbox.config.json
+++ b/samples/charts/category-chart/step-line-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-line-single-source/src/index.css b/samples/charts/category-chart/step-line-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/step-line-single-source/src/index.css
+++ b/samples/charts/category-chart/step-line-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-line-single-source/src/index.ts b/samples/charts/category-chart/step-line-single-source/src/index.ts
index 634bdcf8ce..b286d37fff 100644
--- a/samples/charts/category-chart/step-line-single-source/src/index.ts
+++ b/samples/charts/category-chart/step-line-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcCategoryChartModule,
     IgcDataChartInteractivityModule
@@ -23,7 +22,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/step-line-single-source/tsconfig.json b/samples/charts/category-chart/step-line-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/step-line-single-source/tsconfig.json
+++ b/samples/charts/category-chart/step-line-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/step-line-single-source/webpack.config.js b/samples/charts/category-chart/step-line-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/step-line-single-source/webpack.config.js
+++ b/samples/charts/category-chart/step-line-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/step-line-styling/package.json b/samples/charts/category-chart/step-line-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/category-chart/step-line-styling/package.json
+++ b/samples/charts/category-chart/step-line-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/step-line-styling/sandbox.config.json b/samples/charts/category-chart/step-line-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/step-line-styling/sandbox.config.json
+++ b/samples/charts/category-chart/step-line-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-line-styling/src/index.css b/samples/charts/category-chart/step-line-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/step-line-styling/src/index.css
+++ b/samples/charts/category-chart/step-line-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/step-line-styling/src/index.ts b/samples/charts/category-chart/step-line-styling/src/index.ts
index 7f121863f5..2c2556358a 100644
--- a/samples/charts/category-chart/step-line-styling/src/index.ts
+++ b/samples/charts/category-chart/step-line-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcCategoryChartModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/step-line-styling/tsconfig.json b/samples/charts/category-chart/step-line-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/step-line-styling/tsconfig.json
+++ b/samples/charts/category-chart/step-line-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/step-line-styling/webpack.config.js b/samples/charts/category-chart/step-line-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/step-line-styling/webpack.config.js
+++ b/samples/charts/category-chart/step-line-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/category-chart/tooltip-template/package.json b/samples/charts/category-chart/tooltip-template/package.json
index 526ac329dc..73fbac4d48 100644
--- a/samples/charts/category-chart/tooltip-template/package.json
+++ b/samples/charts/category-chart/tooltip-template/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/tooltip-template/src/index.ts b/samples/charts/category-chart/tooltip-template/src/index.ts
index ed6181a424..636c73d6c7 100644
--- a/samples/charts/category-chart/tooltip-template/src/index.ts
+++ b/samples/charts/category-chart/tooltip-template/src/index.ts
@@ -14,12 +14,12 @@ export class CategoryChartTooltipTemplate {
     public data: any[] = [];
 
     constructor() {
-        
+
         this.initData();
 
         this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
-        this.chart.seriesAdded = this.onSeriesAdded;        
-        this.chart.dataSource = this.data;                
+        this.chart.seriesAdded = this.onSeriesAdded;
+        this.chart.dataSource = this.data;
     }
 
     public onSeriesAdded = (s: IgcDomainChartComponent, e: IgcChartSeriesEventArgs) => {
@@ -34,19 +34,19 @@ export class CategoryChartTooltipTemplate {
 
         var dataItem = context.item;
         if (!dataItem) return null;
-    
+
         var tooltipItem1 = document.createElement("div");
         tooltipItem1.innerHTML = "Franchise: " + dataItem.Franchise;
         tooltipItem1.className = "tooltipTitle";
-    
+
         var tooltipItem2 = document.createElement("div");
         tooltipItem2.innerHTML = "Revenue of All Movies: " + dataItem.TotalRevenue;
         tooltipItem2.className = "tooltipLbl";
-    
+
         var tooltipItem3= document.createElement("div");
         tooltipItem3.innerHTML = "Highest Grossing Movie: $" + dataItem.HighestGrossing;
         tooltipItem3.className = "tooltipLbl";
-    
+
         var tooltip = document.createElement("div");
         tooltip.className = "tooltipVertical";
         tooltip.appendChild(tooltipItem1);
@@ -64,7 +64,7 @@ export class CategoryChartTooltipTemplate {
             { Franchise: "Avengers", TotalRevenue: 7.76, HighestGrossing: 2.8 },
             { Franchise: "Spider Man", TotalRevenue: 7.22, HighestGrossing: 1.28 },
             { Franchise: "James Bond", TotalRevenue: 7.12, HighestGrossing: 1.11 }
-        ];    
+        ];
     }
 }
 
diff --git a/samples/charts/category-chart/tooltip-types/package.json b/samples/charts/category-chart/tooltip-types/package.json
index 526ac329dc..73fbac4d48 100644
--- a/samples/charts/category-chart/tooltip-types/package.json
+++ b/samples/charts/category-chart/tooltip-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/trendline/package.json b/samples/charts/category-chart/trendline/package.json
index 7364741400..34a6a4fcea 100644
--- a/samples/charts/category-chart/trendline/package.json
+++ b/samples/charts/category-chart/trendline/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/value-lines/package.json b/samples/charts/category-chart/value-lines/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/category-chart/value-lines/package.json
+++ b/samples/charts/category-chart/value-lines/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/category-chart/value-lines/sandbox.config.json b/samples/charts/category-chart/value-lines/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/category-chart/value-lines/sandbox.config.json
+++ b/samples/charts/category-chart/value-lines/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/category-chart/value-lines/src/index.css b/samples/charts/category-chart/value-lines/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/category-chart/value-lines/src/index.css
+++ b/samples/charts/category-chart/value-lines/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/category-chart/value-lines/src/index.ts b/samples/charts/category-chart/value-lines/src/index.ts
index b3b253da69..0babc1c654 100644
--- a/samples/charts/category-chart/value-lines/src/index.ts
+++ b/samples/charts/category-chart/value-lines/src/index.ts
@@ -7,10 +7,10 @@ import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
 import { EnumUtil } from 'igniteui-webcomponents-core';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -44,7 +44,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/category-chart/value-lines/tsconfig.json b/samples/charts/category-chart/value-lines/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/category-chart/value-lines/tsconfig.json
+++ b/samples/charts/category-chart/value-lines/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/category-chart/value-lines/webpack.config.js b/samples/charts/category-chart/value-lines/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/category-chart/value-lines/webpack.config.js
+++ b/samples/charts/category-chart/value-lines/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/annotations-custom/package.json b/samples/charts/data-chart/annotations-custom/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/annotations-custom/package.json
+++ b/samples/charts/data-chart/annotations-custom/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/annotations-custom/sandbox.config.json b/samples/charts/data-chart/annotations-custom/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/annotations-custom/sandbox.config.json
+++ b/samples/charts/data-chart/annotations-custom/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/annotations-custom/src/index.css b/samples/charts/data-chart/annotations-custom/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/annotations-custom/src/index.css
+++ b/samples/charts/data-chart/annotations-custom/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/annotations-custom/src/index.ts b/samples/charts/data-chart/annotations-custom/src/index.ts
index dbc73fcc81..d5e8707139 100644
--- a/samples/charts/data-chart/annotations-custom/src/index.ts
+++ b/samples/charts/data-chart/annotations-custom/src/index.ts
@@ -2,11 +2,10 @@ import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotat
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent, IgcCalloutLayerComponent, IgcFinalValueLayerComponent, IgcCrosshairLayerComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
 import { CountryRenewableCalloutsItem, CountryRenewableCallouts } from './CountryRenewableCallouts';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule,
@@ -45,7 +44,6 @@ export class Sample {
             calloutLayer1.dataSource = this.countryRenewableCallouts;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/data-chart/annotations-custom/tsconfig.json b/samples/charts/data-chart/annotations-custom/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/annotations-custom/tsconfig.json
+++ b/samples/charts/data-chart/annotations-custom/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/annotations-custom/webpack.config.js b/samples/charts/data-chart/annotations-custom/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/annotations-custom/webpack.config.js
+++ b/samples/charts/data-chart/annotations-custom/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/package.json b/samples/charts/data-chart/axis-annotations-corner-radius/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/package.json
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/sandbox.config.json b/samples/charts/data-chart/axis-annotations-corner-radius/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/sandbox.config.json
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/src/index.css b/samples/charts/data-chart/axis-annotations-corner-radius/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/src/index.css
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/src/index.ts b/samples/charts/data-chart/axis-annotations-corner-radius/src/index.ts
index 745317c194..e7e49fda8c 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/src/index.ts
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcAnnotationLayerProxyModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent, IgcCalloutLayerComponent, IgcFinalValueLayerComponent, IgcCrosshairLayerComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule,
@@ -43,7 +42,6 @@ export class Sample {
             lineSeries1.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/tsconfig.json b/samples/charts/data-chart/axis-annotations-corner-radius/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/tsconfig.json
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/webpack.config.js b/samples/charts/data-chart/axis-annotations-corner-radius/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/webpack.config.js
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/axis-annotations/package.json b/samples/charts/data-chart/axis-annotations/package.json
index 4313c76dd2..048278d143 100644
--- a/samples/charts/data-chart/axis-annotations/package.json
+++ b/samples/charts/data-chart/axis-annotations/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/axis-crossing/package.json b/samples/charts/data-chart/axis-crossing/package.json
index 9186f79ca8..e607ca7798 100644
--- a/samples/charts/data-chart/axis-crossing/package.json
+++ b/samples/charts/data-chart/axis-crossing/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/axis-crossing/src/index.ts b/samples/charts/data-chart/axis-crossing/src/index.ts
index 8f5d725e5d..94c0be46a0 100644
--- a/samples/charts/data-chart/axis-crossing/src/index.ts
+++ b/samples/charts/data-chart/axis-crossing/src/index.ts
@@ -7,12 +7,12 @@ ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartScatterModule,
     IgcDataChartScatterCoreModule,
-    IgcDataChartInteractivityModule,        
+    IgcDataChartInteractivityModule,
 );
 
 export class DataChartAxisCrossing {
 
-    private chart: IgcDataChartComponent;    
+    private chart: IgcDataChartComponent;
     private xAxis: IgcNumericXAxisComponent;
     private yAxis: IgcNumericYAxisComponent;
     private xAxisCrossLabel: HTMLLabelElement;
@@ -25,9 +25,9 @@ export class DataChartAxisCrossing {
         this.onYAxisSliderChanged = this.onYAxisSliderChanged.bind(this);
 
         this.initData();
-        
-        this.chart = document.getElementById('chart') as IgcDataChartComponent;    
-        
+
+        this.chart = document.getElementById('chart') as IgcDataChartComponent;
+
         this.xAxis = document.getElementById("xAxis") as IgcNumericXAxisComponent;
         this.yAxis = document.getElementById("yAxis") as IgcNumericYAxisComponent;
 
@@ -39,11 +39,11 @@ export class DataChartAxisCrossing {
 
         const xAxisSlider = document.getElementById("xAxisCrossingSlider") as HTMLInputElement;
         xAxisSlider.addEventListener("input", this.onXAxisSliderChanged);
-        
+
         const yAxisSlider = document.getElementById("yAxisCrossingSlider") as HTMLInputElement;
         yAxisSlider.addEventListener("input", this.onYAxisSliderChanged);
 
-        this.chart.dataSource = this.data;        
+        this.chart.dataSource = this.data;
     }
 
     public initData() {
diff --git a/samples/charts/data-chart/axis-label-rotation/package.json b/samples/charts/data-chart/axis-label-rotation/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-chart/axis-label-rotation/package.json
+++ b/samples/charts/data-chart/axis-label-rotation/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/axis-label-rotation/sandbox.config.json b/samples/charts/data-chart/axis-label-rotation/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/axis-label-rotation/sandbox.config.json
+++ b/samples/charts/data-chart/axis-label-rotation/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/axis-label-rotation/src/index.css b/samples/charts/data-chart/axis-label-rotation/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/axis-label-rotation/src/index.css
+++ b/samples/charts/data-chart/axis-label-rotation/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/axis-label-rotation/src/index.ts b/samples/charts/data-chart/axis-label-rotation/src/index.ts
index f6e12f3200..1a913885d1 100644
--- a/samples/charts/data-chart/axis-label-rotation/src/index.ts
+++ b/samples/charts/data-chart/axis-label-rotation/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCateg
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAverageDataLongLabelsItem, TemperatureAverageDataLongLabels } from './TemperatureAverageDataLongLabels';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -47,7 +47,6 @@ export class Sample {
             colSeries1.dataSource = this.temperatureAverageDataLongLabels;
         }
         this._bind();
-
     }
 
     private _temperatureAverageDataLongLabels: TemperatureAverageDataLongLabels = null;
diff --git a/samples/charts/data-chart/axis-label-rotation/tsconfig.json b/samples/charts/data-chart/axis-label-rotation/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/axis-label-rotation/tsconfig.json
+++ b/samples/charts/data-chart/axis-label-rotation/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/axis-label-rotation/webpack.config.js b/samples/charts/data-chart/axis-label-rotation/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/axis-label-rotation/webpack.config.js
+++ b/samples/charts/data-chart/axis-label-rotation/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/axis-locations/package.json b/samples/charts/data-chart/axis-locations/package.json
index 9186f79ca8..e607ca7798 100644
--- a/samples/charts/data-chart/axis-locations/package.json
+++ b/samples/charts/data-chart/axis-locations/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/axis-min-max-gap/package.json b/samples/charts/data-chart/axis-min-max-gap/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/axis-min-max-gap/package.json
+++ b/samples/charts/data-chart/axis-min-max-gap/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/axis-min-max-gap/sandbox.config.json b/samples/charts/data-chart/axis-min-max-gap/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/axis-min-max-gap/sandbox.config.json
+++ b/samples/charts/data-chart/axis-min-max-gap/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/axis-min-max-gap/src/index.css b/samples/charts/data-chart/axis-min-max-gap/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/axis-min-max-gap/src/index.css
+++ b/samples/charts/data-chart/axis-min-max-gap/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/axis-min-max-gap/src/index.ts b/samples/charts/data-chart/axis-min-max-gap/src/index.ts
index c7432f426c..e987d8e950 100644
--- a/samples/charts/data-chart/axis-min-max-gap/src/index.ts
+++ b/samples/charts/data-chart/axis-min-max-gap/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcCategoryHighlightLayerComponent, IgcColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCategoryModule,
     IgcDataChartAnnotationModule,
@@ -37,7 +36,6 @@ export class Sample {
             columnSeries1.dataSource = this.temperatureAverageData;
         }
         this._bind();
-
     }
 
     private _temperatureAverageData: TemperatureAverageData = null;
diff --git a/samples/charts/data-chart/axis-min-max-gap/tsconfig.json b/samples/charts/data-chart/axis-min-max-gap/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/axis-min-max-gap/tsconfig.json
+++ b/samples/charts/data-chart/axis-min-max-gap/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/axis-min-max-gap/webpack.config.js b/samples/charts/data-chart/axis-min-max-gap/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/axis-min-max-gap/webpack.config.js
+++ b/samples/charts/data-chart/axis-min-max-gap/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/axis-settings/package.json b/samples/charts/data-chart/axis-settings/package.json
index ebf041a5c2..7735d328e2 100644
--- a/samples/charts/data-chart/axis-settings/package.json
+++ b/samples/charts/data-chart/axis-settings/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/axis-sharing/package.json b/samples/charts/data-chart/axis-sharing/package.json
index ba0a679ef3..2b926c6576 100644
--- a/samples/charts/data-chart/axis-sharing/package.json
+++ b/samples/charts/data-chart/axis-sharing/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/axis-types/package.json b/samples/charts/data-chart/axis-types/package.json
index a8d28a917c..692ab96a3d 100644
--- a/samples/charts/data-chart/axis-types/package.json
+++ b/samples/charts/data-chart/axis-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/package.json b/samples/charts/data-chart/bar-chart-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/package.json
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/sandbox.config.json b/samples/charts/data-chart/bar-chart-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/sandbox.config.json
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/src/index.css b/samples/charts/data-chart/bar-chart-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/src/index.css
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/src/index.ts b/samples/charts/data-chart/bar-chart-multiple-sources/src/index.ts
index 2e0bf6a2b0..39eb59102f 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/src/index.ts
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -49,7 +48,6 @@ export class Sample {
             barSeries2.dataSource = this.highestGrossingMovies;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/tsconfig.json b/samples/charts/data-chart/bar-chart-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/tsconfig.json
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/webpack.config.js b/samples/charts/data-chart/bar-chart-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/bar-chart-overlapping/package.json b/samples/charts/data-chart/bar-chart-overlapping/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/package.json
+++ b/samples/charts/data-chart/bar-chart-overlapping/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/bar-chart-overlapping/sandbox.config.json b/samples/charts/data-chart/bar-chart-overlapping/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/sandbox.config.json
+++ b/samples/charts/data-chart/bar-chart-overlapping/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/bar-chart-overlapping/src/index.css b/samples/charts/data-chart/bar-chart-overlapping/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/src/index.css
+++ b/samples/charts/data-chart/bar-chart-overlapping/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/bar-chart-overlapping/src/index.ts b/samples/charts/data-chart/bar-chart-overlapping/src/index.ts
index 107da7fc75..fb30aec5a0 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/src/index.ts
+++ b/samples/charts/data-chart/bar-chart-overlapping/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartAnnotationModule, IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcCalloutLayerComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { RoadblocksToSuccessItem, RoadblocksToSuccess } from './RoadblocksToSuccess';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartAnnotationModule,
@@ -57,7 +56,6 @@ export class Sample {
             barSeries2.dataSource = this.roadblocksToSuccess;
         }
         this._bind();
-
     }
 
     private _roadblocksToSuccess: RoadblocksToSuccess = null;
diff --git a/samples/charts/data-chart/bar-chart-overlapping/tsconfig.json b/samples/charts/data-chart/bar-chart-overlapping/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/tsconfig.json
+++ b/samples/charts/data-chart/bar-chart-overlapping/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/bar-chart-overlapping/webpack.config.js b/samples/charts/data-chart/bar-chart-overlapping/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/webpack.config.js
+++ b/samples/charts/data-chart/bar-chart-overlapping/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/bar-chart-single-source/package.json b/samples/charts/data-chart/bar-chart-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/bar-chart-single-source/package.json
+++ b/samples/charts/data-chart/bar-chart-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/bar-chart-single-source/sandbox.config.json b/samples/charts/data-chart/bar-chart-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/bar-chart-single-source/sandbox.config.json
+++ b/samples/charts/data-chart/bar-chart-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/bar-chart-single-source/src/index.css b/samples/charts/data-chart/bar-chart-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/bar-chart-single-source/src/index.css
+++ b/samples/charts/data-chart/bar-chart-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/bar-chart-single-source/src/index.ts b/samples/charts/data-chart/bar-chart-single-source/src/index.ts
index 3636d77720..4055133c8e 100644
--- a/samples/charts/data-chart/bar-chart-single-source/src/index.ts
+++ b/samples/charts/data-chart/bar-chart-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryCoreModule,
@@ -40,7 +39,6 @@ export class Sample {
             barSeries1.dataSource = this.onlineShoppingSearches;
         }
         this._bind();
-
     }
 
     private _onlineShoppingSearches: OnlineShoppingSearches = null;
diff --git a/samples/charts/data-chart/bar-chart-single-source/tsconfig.json b/samples/charts/data-chart/bar-chart-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/bar-chart-single-source/tsconfig.json
+++ b/samples/charts/data-chart/bar-chart-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/bar-chart-single-source/webpack.config.js b/samples/charts/data-chart/bar-chart-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/bar-chart-single-source/webpack.config.js
+++ b/samples/charts/data-chart/bar-chart-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/bar-chart-styling/package.json b/samples/charts/data-chart/bar-chart-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/bar-chart-styling/package.json
+++ b/samples/charts/data-chart/bar-chart-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/bar-chart-styling/sandbox.config.json b/samples/charts/data-chart/bar-chart-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/bar-chart-styling/sandbox.config.json
+++ b/samples/charts/data-chart/bar-chart-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/bar-chart-styling/src/index.css b/samples/charts/data-chart/bar-chart-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/bar-chart-styling/src/index.css
+++ b/samples/charts/data-chart/bar-chart-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/bar-chart-styling/src/index.ts b/samples/charts/data-chart/bar-chart-styling/src/index.ts
index f0157363bc..75222ca3be 100644
--- a/samples/charts/data-chart/bar-chart-styling/src/index.ts
+++ b/samples/charts/data-chart/bar-chart-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcAnnotationLayerProxyModule, IgcCalloutLayerModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcCalloutLayerComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule,
@@ -45,7 +44,6 @@ export class Sample {
             calloutLayer1.dataSource = this.onlineShoppingSearches;
         }
         this._bind();
-
     }
 
     private _onlineShoppingSearches: OnlineShoppingSearches = null;
diff --git a/samples/charts/data-chart/bar-chart-styling/tsconfig.json b/samples/charts/data-chart/bar-chart-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/bar-chart-styling/tsconfig.json
+++ b/samples/charts/data-chart/bar-chart-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/bar-chart-styling/webpack.config.js b/samples/charts/data-chart/bar-chart-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/bar-chart-styling/webpack.config.js
+++ b/samples/charts/data-chart/bar-chart-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/callout-layer-styling/package.json b/samples/charts/data-chart/callout-layer-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/callout-layer-styling/package.json
+++ b/samples/charts/data-chart/callout-layer-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/callout-layer-styling/sandbox.config.json b/samples/charts/data-chart/callout-layer-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/callout-layer-styling/sandbox.config.json
+++ b/samples/charts/data-chart/callout-layer-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/callout-layer-styling/src/index.css b/samples/charts/data-chart/callout-layer-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/callout-layer-styling/src/index.css
+++ b/samples/charts/data-chart/callout-layer-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/callout-layer-styling/src/index.ts b/samples/charts/data-chart/callout-layer-styling/src/index.ts
index bebfb31b19..2d8bb800c4 100644
--- a/samples/charts/data-chart/callout-layer-styling/src/index.ts
+++ b/samples/charts/data-chart/callout-layer-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcAnnotationLayerProxyModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent, IgcCalloutLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule,
@@ -37,7 +36,6 @@ export class Sample {
             lineSeries1.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/data-chart/callout-layer-styling/tsconfig.json b/samples/charts/data-chart/callout-layer-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/callout-layer-styling/tsconfig.json
+++ b/samples/charts/data-chart/callout-layer-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/callout-layer-styling/webpack.config.js b/samples/charts/data-chart/callout-layer-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/callout-layer-styling/webpack.config.js
+++ b/samples/charts/data-chart/callout-layer-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/package.json b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/sandbox.config.json b/samples/charts/data-chart/chart-highlight-filter-datasource/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/sandbox.config.json
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/src/index.css b/samples/charts/data-chart/chart-highlight-filter-datasource/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/src/index.css
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/src/index.ts b/samples/charts/data-chart/chart-highlight-filter-datasource/src/index.ts
index dd266ebb70..5e5fb3e3ab 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/src/index.ts
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/src/index.ts
@@ -5,10 +5,10 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
 import { OnlineTrafficHighlightTotalsItem, OnlineTrafficHighlightTotals } from './OnlineTrafficHighlightTotals';
 import { OnlineTrafficHighlightDesktopOnlyItem, OnlineTrafficHighlightDesktopOnly } from './OnlineTrafficHighlightDesktopOnly';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -48,7 +48,6 @@ export class Sample {
             columnSeries1.highlightedDataSource = this.onlineTrafficHighlightDesktopOnly;
         }
         this._bind();
-
     }
 
     private _onlineTrafficHighlightTotals: OnlineTrafficHighlightTotals = null;
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/tsconfig.json b/samples/charts/data-chart/chart-highlight-filter-datasource/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/tsconfig.json
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/webpack.config.js b/samples/charts/data-chart/chart-highlight-filter-datasource/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/webpack.config.js
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json b/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/sandbox.config.json b/samples/charts/data-chart/chart-highlight-filter-multiple-series/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/sandbox.config.json
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/src/index.css b/samples/charts/data-chart/chart-highlight-filter-multiple-series/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/src/index.css
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/src/index.ts b/samples/charts/data-chart/chart-highlight-filter-multiple-series/src/index.ts
index 2bc49cce33..eb3763dff7 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/src/index.ts
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/src/index.ts
@@ -5,10 +5,10 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
 import { CountryRenewableElectricityFilteredItem, CountryRenewableElectricityFiltered } from './CountryRenewableElectricityFiltered';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -60,7 +60,6 @@ export class Sample {
             columnSeries3.highlightedDataSource = this.countryRenewableElectricityFiltered;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/tsconfig.json b/samples/charts/data-chart/chart-highlight-filter-multiple-series/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/tsconfig.json
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/webpack.config.js b/samples/charts/data-chart/chart-highlight-filter-multiple-series/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/webpack.config.js
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/chart-highlight-filter/package.json b/samples/charts/data-chart/chart-highlight-filter/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-chart/chart-highlight-filter/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/chart-highlight-filter/sandbox.config.json b/samples/charts/data-chart/chart-highlight-filter/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/chart-highlight-filter/sandbox.config.json
+++ b/samples/charts/data-chart/chart-highlight-filter/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/chart-highlight-filter/src/index.css b/samples/charts/data-chart/chart-highlight-filter/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/chart-highlight-filter/src/index.css
+++ b/samples/charts/data-chart/chart-highlight-filter/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/chart-highlight-filter/src/index.ts b/samples/charts/data-chart/chart-highlight-filter/src/index.ts
index 30a6c4747d..5b38ba49f9 100644
--- a/samples/charts/data-chart/chart-highlight-filter/src/index.ts
+++ b/samples/charts/data-chart/chart-highlight-filter/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
 import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -46,7 +46,6 @@ export class Sample {
             columnSeries1.dataSource = this.olympicMedalsTopCountriesWithTotals;
         }
         this._bind();
-
     }
 
     private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
diff --git a/samples/charts/data-chart/chart-highlight-filter/tsconfig.json b/samples/charts/data-chart/chart-highlight-filter/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/chart-highlight-filter/tsconfig.json
+++ b/samples/charts/data-chart/chart-highlight-filter/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/chart-highlight-filter/webpack.config.js b/samples/charts/data-chart/chart-highlight-filter/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/chart-highlight-filter/webpack.config.js
+++ b/samples/charts/data-chart/chart-highlight-filter/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/chart-navigation/package.json b/samples/charts/data-chart/chart-navigation/package.json
index 1b8365059c..1488cbc0f6 100644
--- a/samples/charts/data-chart/chart-navigation/package.json
+++ b/samples/charts/data-chart/chart-navigation/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/chart-overview/package.json b/samples/charts/data-chart/chart-overview/package.json
index cb25ff8645..29258060e5 100644
--- a/samples/charts/data-chart/chart-overview/package.json
+++ b/samples/charts/data-chart/chart-overview/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/chart-performance/package.json b/samples/charts/data-chart/chart-performance/package.json
index 3ce8dfde46..1bdfca3aff 100644
--- a/samples/charts/data-chart/chart-performance/package.json
+++ b/samples/charts/data-chart/chart-performance/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/chart-synchronization/package.json b/samples/charts/data-chart/chart-synchronization/package.json
index e994fc5aff..21eb4d2e86 100644
--- a/samples/charts/data-chart/chart-synchronization/package.json
+++ b/samples/charts/data-chart/chart-synchronization/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/chart-titles/package.json b/samples/charts/data-chart/chart-titles/package.json
index 68094b19f5..00023cfd69 100644
--- a/samples/charts/data-chart/chart-titles/package.json
+++ b/samples/charts/data-chart/chart-titles/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/composite-chart/package.json b/samples/charts/data-chart/composite-chart/package.json
index cb25ff8645..29258060e5 100644
--- a/samples/charts/data-chart/composite-chart/package.json
+++ b/samples/charts/data-chart/composite-chart/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/composite-chart/src/index.ts b/samples/charts/data-chart/composite-chart/src/index.ts
index d59fae60a2..b93b210980 100644
--- a/samples/charts/data-chart/composite-chart/src/index.ts
+++ b/samples/charts/data-chart/composite-chart/src/index.ts
@@ -35,7 +35,7 @@ export class DataChartCompositeChart {
         var ret = num;
         if (num >= 1000000) return (num / 1000000.0).toFixed(1) + "M";
         if (num >= 1000) return (num / 1000.0).toFixed(1) + "K";
-    
+
         return ret.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       }
 
@@ -54,17 +54,17 @@ export class DataChartCompositeChart {
 
         for (let i = 0; i < this.data.length; i++) {
             const item = this.data[i];
-      
+
             item.Revenue = item.Revenue * 1000;
             item.Expenses = item.Expenses * 1000;
-      
+
             item.Income = item.Revenue - item.Expenses;
             item.IncomePerRevenue = (item.Income / item.Revenue) * 100;
-      
+
             // calculating x-offset for callouts
             item.RevenueX = i;
             item.ExpensesX = i + 0.5;
-      
+
             // formatting values for callouts
             item.FormattedRevenue = "$" + this.formatNumber(item.Revenue);
             item.FormattedIncome = "$" + this.formatNumber(item.Income);
diff --git a/samples/charts/data-chart/crosshair-layer-styling/package.json b/samples/charts/data-chart/crosshair-layer-styling/package.json
index a931b5dccc..16f0b98d9b 100644
--- a/samples/charts/data-chart/crosshair-layer-styling/package.json
+++ b/samples/charts/data-chart/crosshair-layer-styling/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/crosshair-layer-styling/src/index.ts b/samples/charts/data-chart/crosshair-layer-styling/src/index.ts
index 8e74b81acc..c7dd71c94b 100644
--- a/samples/charts/data-chart/crosshair-layer-styling/src/index.ts
+++ b/samples/charts/data-chart/crosshair-layer-styling/src/index.ts
@@ -23,7 +23,6 @@ export class DataChartCrosshairLayerStyling {
 
         this.chart = document.getElementById('chart') as IgcDataChartComponent;
         this.chart.dataSource = SampleCategoryData.create();
-
     }
 
 }
diff --git a/samples/charts/data-chart/custom-drawing-annotations/package.json b/samples/charts/data-chart/custom-drawing-annotations/package.json
index a273195873..5f8a203532 100644
--- a/samples/charts/data-chart/custom-drawing-annotations/package.json
+++ b/samples/charts/data-chart/custom-drawing-annotations/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/custom-drawing-annotations/sandbox.config.json b/samples/charts/data-chart/custom-drawing-annotations/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/custom-drawing-annotations/sandbox.config.json
+++ b/samples/charts/data-chart/custom-drawing-annotations/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/index.css b/samples/charts/data-chart/custom-drawing-annotations/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/custom-drawing-annotations/src/index.css
+++ b/samples/charts/data-chart/custom-drawing-annotations/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/index.ts b/samples/charts/data-chart/custom-drawing-annotations/src/index.ts
index bfde18910c..cf1241fcce 100644
--- a/samples/charts/data-chart/custom-drawing-annotations/src/index.ts
+++ b/samples/charts/data-chart/custom-drawing-annotations/src/index.ts
@@ -2,9 +2,9 @@ import { IgcDataChartCoreModule, IgcCategoryXAxisComponent, IgcDataChartCategory
 import { IgcToolActionLabelComponent, IgcToolCommandEventArgs, IgcToolbarComponent, IgcToolbarModule } from 'igniteui-webcomponents-layouts';
 import { StockItem, StocksHistory } from './StocksHistory';
 import { IgPoint, ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcToolbarModule,
     IgcLegendModule,
@@ -19,9 +19,9 @@ ModuleManager.register(
     IgcDataChartAnnotationModule
 );
 
-export class Sample {    
+export class Sample {
 
-    private data: any[];    
+    private data: any[];
     private chart: IgcDataChartComponent;
     private xAxis: IgcCategoryXAxisComponent;
     private yAxis: IgcNumericYAxisComponent;
@@ -42,40 +42,40 @@ export class Sample {
     private isAxisRangeInitialized: boolean;
     private isDrawingHorizontalLine: boolean;
     private isDrawingRangeArea: boolean;
-    private isDrawingSlopeLine: boolean;    
+    private isDrawingSlopeLine: boolean;
 
     private horizontalLine: IgcLineSeriesComponent;
     private rangeArea: IgcRangeAreaSeriesComponent;
     private slopeLine: IgcLineSeriesComponent;
-    
-    constructor() {        
+
+    constructor() {
 
         const legend = document.getElementById("legend") as IgcLegendComponent;
         this.chart = document.getElementById("chart") as IgcDataChartComponent;
-        
-        this.toolbar = document.getElementById("toolbar") as IgcToolbarComponent;        
+
+        this.toolbar = document.getElementById("toolbar") as IgcToolbarComponent;
         this.toolbar.target = this.chart;
-       
+
         this.drawHorizontalLineToolAction = document.getElementById("drawHorizontalLineToolAction") as IgcToolActionLabelComponent;
         this.drawSlopeLineToolAction = document.getElementById("drawSlopeLineToolAction") as IgcToolActionLabelComponent;
         this.drawRangeAreaToolAction = document.getElementById("drawRangeAreaToolAction") as IgcToolActionLabelComponent;
 
         this.xAxis = document.getElementById("xAxis") as IgcCategoryXAxisComponent;
-        this.xAxis.formatLabel = this.onFormatXAxisLabel.bind(this);   
+        this.xAxis.formatLabel = this.onFormatXAxisLabel.bind(this);
 
         this.yAxis = document.getElementById("yAxis") as IgcNumericYAxisComponent;
 
         let financialSeries = document.getElementById("financialSeries") as IgcFinancialPriceSeriesComponent;
-                
+
         this.horizontalLine = document.getElementById("horizontalLine") as IgcLineSeriesComponent;
         this.rangeArea = document.getElementById("rangeAreaSeries") as IgcRangeAreaSeriesComponent;
         this.slopeLine = document.getElementById("slopeLine") as IgcLineSeriesComponent;
-        
+
         StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
             this.data = stocks;
             this.xAxis.dataSource = this.data;
-            financialSeries.dataSource = this.data; 
-            
+            financialSeries.dataSource = this.data;
+
             this.plotHorizontalLine(38, true);
             this.plotRangeArea(50, 60, true);
             this.plotSlopeLine({x: 0, y:45}, {x: this.data.length - 1, y: 80}, true);
@@ -93,49 +93,49 @@ export class Sample {
 
     public onChartMouseLeftButtonDown(s: IgcSeriesViewerComponent, e: IgcPlotAreaMouseButtonEventArgs){
         this.initializeAxisRange();
-        if (!this.isAxisRangeInitialized) return;    
+        if (!this.isAxisRangeInitialized) return;
 
-        if (this.drawMode == "DrawHorizontalLine") this.isDrawingHorizontalLine = true; 
-        if (this.drawMode == "DrawSlopeLine") this.isDrawingSlopeLine = true; 
-        if (this.drawMode == "DrawRangeArea") this.isDrawingRangeArea = true; 
+        if (this.drawMode == "DrawHorizontalLine") this.isDrawingHorizontalLine = true;
+        if (this.drawMode == "DrawSlopeLine") this.isDrawingSlopeLine = true;
+        if (this.drawMode == "DrawRangeArea") this.isDrawingRangeArea = true;
 
-        this.chartMouseDownLocation = this.getDataLocation(e.plotAreaPosition); 
-        this.chartMouseMoveLocation = this.getDataLocation(e.plotAreaPosition); 
+        this.chartMouseDownLocation = this.getDataLocation(e.plotAreaPosition);
+        this.chartMouseMoveLocation = this.getDataLocation(e.plotAreaPosition);
 
-        this.plotRangeArea(this.chartMouseDownLocation.y, this.chartMouseMoveLocation.y, false); 
-        this.plotSlopeLine(this.chartMouseDownLocation, this.chartMouseMoveLocation, false); 
-        this.plotHorizontalLine(this.chartMouseMoveLocation.y, false); 
+        this.plotRangeArea(this.chartMouseDownLocation.y, this.chartMouseMoveLocation.y, false);
+        this.plotSlopeLine(this.chartMouseDownLocation, this.chartMouseMoveLocation, false);
+        this.plotHorizontalLine(this.chartMouseMoveLocation.y, false);
     }
 
     public onChartMouseOver(s: IgcSeriesViewerComponent, e: IgcPlotAreaMouseEventArgs){
-        if (!this.isAxisRangeInitialized) return; 
+        if (!this.isAxisRangeInitialized) return;
 
-        this.chartMouseMoveLocation = this.getDataLocation(e.plotAreaPosition);        
+        this.chartMouseMoveLocation = this.getDataLocation(e.plotAreaPosition);
 
-        this.plotRangeArea(this.chartMouseDownLocation.y, this.chartMouseMoveLocation.y, false); 
-        this.plotSlopeLine(this.chartMouseDownLocation, this.chartMouseMoveLocation, false); 
-        this.plotHorizontalLine(this.chartMouseMoveLocation.y, false);         
+        this.plotRangeArea(this.chartMouseDownLocation.y, this.chartMouseMoveLocation.y, false);
+        this.plotSlopeLine(this.chartMouseDownLocation, this.chartMouseMoveLocation, false);
+        this.plotHorizontalLine(this.chartMouseMoveLocation.y, false);
     }
 
     public onChartMouseLeftButtonUp(s: IgcSeriesViewerComponent, e: IgcPlotAreaMouseButtonEventArgs){
         this.isDrawingSlopeLine = false;
         this.isDrawingRangeArea = false;
-        this.isDrawingHorizontalLine = false;   
+        this.isDrawingHorizontalLine = false;
     }
 
     public initializeAxisRange(){
         if (this.isAxisRangeInitialized) return;
-        this.isAxisRangeInitialized = true;        
+        this.isAxisRangeInitialized = true;
 
         this.axisMaxValue = this.yAxis.actualMaximumValue;
-        this.axisMinValue = this.yAxis.actualMinimumValue;        
+        this.axisMinValue = this.yAxis.actualMinimumValue;
 
         this.yAxis.maximumValue = this.axisMaxValue;
         this.yAxis.minimumValue = this.axisMinValue;
     }
 
     public getDataLocation(chartPixel: IgPoint): IgPoint
-    {    
+    {
         var x = this.xAxis.unscaleValue(chartPixel.x);
         var y = this.yAxis.unscaleValue(chartPixel.y);
 
@@ -152,7 +152,7 @@ export class Sample {
 
         for(let i=0; i<this.data.length; i++){
             let point: IgPoint = { x: i, y: value};
-            dataPoints.push(point);            
+            dataPoints.push(point);
         }
 
         this.horizontalLine.dataSource = dataPoints;
@@ -195,18 +195,18 @@ export class Sample {
         let dataPoints: any[] = [];
 
         for(let i=0; i<this.data.length; i++){
-            let point: any = {low: low, high: high};            
+            let point: any = {low: low, high: high};
             dataPoints.push(point);
         }
 
         this.rangeArea.dataSource = dataPoints;
-    }         
+    }
 
     public onFormatXAxisLabel(item: any): string{
-        
+
         let year = item.date.getFullYear();
         let monthString: string = "";
-        let dayString: string = "";        
+        let dayString: string = "";
 
         if((item.date.getMonth() + 1) < 10){
             monthString = "0" + (item.date.getMonth() + 1);
@@ -249,10 +249,10 @@ export class Sample {
                 this.drawMode = "DrawHorizontalLine";
                 this.drawHorizontalLineToolAction.textStyle = "800 13px Verdana";
                 this.drawSlopeLineToolAction.textStyle = "13px Verdana";
-                this.drawRangeAreaToolAction.textStyle = "13px Verdana";                
+                this.drawRangeAreaToolAction.textStyle = "13px Verdana";
                 break;
         }
-    }    
+    }
 }
 
 new Sample();
diff --git a/samples/charts/data-chart/custom-drawing-annotations/tsconfig.json b/samples/charts/data-chart/custom-drawing-annotations/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/custom-drawing-annotations/tsconfig.json
+++ b/samples/charts/data-chart/custom-drawing-annotations/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/custom-editing-data/package.json b/samples/charts/data-chart/custom-editing-data/package.json
index 04eba8b615..533ca70f4a 100644
--- a/samples/charts/data-chart/custom-editing-data/package.json
+++ b/samples/charts/data-chart/custom-editing-data/package.json
@@ -26,8 +26,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/custom-editing-data/sandbox.config.json b/samples/charts/data-chart/custom-editing-data/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/custom-editing-data/sandbox.config.json
+++ b/samples/charts/data-chart/custom-editing-data/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/custom-editing-data/src/index.css b/samples/charts/data-chart/custom-editing-data/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/custom-editing-data/src/index.css
+++ b/samples/charts/data-chart/custom-editing-data/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/custom-editing-data/src/index.ts b/samples/charts/data-chart/custom-editing-data/src/index.ts
index e9009c8828..f385ae5f76 100644
--- a/samples/charts/data-chart/custom-editing-data/src/index.ts
+++ b/samples/charts/data-chart/custom-editing-data/src/index.ts
@@ -2,9 +2,9 @@ import { EditableDataSource } from './EditableDataSource';
 import { IgcDataChartCoreModule, IgcDataChartScatterModule, IgcCategoryXAxisComponent, IgcLineSeriesComponent, IgcDataChartCategoryModule, IgcSeriesViewerComponent, IgcDataChartMouseButtonEventArgs, IgcChartMouseEventArgs, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcPlotAreaMouseButtonEventArgs, IgcPlotAreaMouseEventArgs, IgcLegendModule, IgcAnnotationLayerProxyModule, IgcDataChartScatterCoreModule, IgcNumberAbbreviatorModule, IgcScatterSeriesComponent, IgcPointSeriesComponent } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -17,7 +17,7 @@ ModuleManager.register(
     IgcNumberAbbreviatorModule
 );
 
-export class Sample {    
+export class Sample {
 
     private lineData: any[];
     private scatterData: any[];
@@ -35,8 +35,8 @@ export class Sample {
 
     private scatterLineEditingActive = false;
     private scatterLineEditingIndex = -1;
-    
-    constructor() {        
+
+    constructor() {
         this.lineData = EditableDataSource.getLineData();
         this.scatterData = EditableDataSource.getScatterData();
 
@@ -49,7 +49,7 @@ export class Sample {
         this.scatterXAxis = document.getElementById('ScatterXAxis') as IgcNumericXAxisComponent;
         this.scatterYAxis = document.getElementById('ScatterYAxis') as IgcNumericYAxisComponent;
 
-        var lineDataSeries = document.getElementById("lineDataSeries") as IgcLineSeriesComponent;    
+        var lineDataSeries = document.getElementById("lineDataSeries") as IgcLineSeriesComponent;
         var lineEditSeries = document.getElementById("lineEditSeries") as IgcPointSeriesComponent;
 
         var scatterDataSeries = document.getElementById("scatterDataSeries") as IgcScatterLineSeriesComponent;
@@ -58,12 +58,12 @@ export class Sample {
         this.lineXAxis.dataSource = this.lineData;
         lineDataSeries.dataSource = this.lineData;
         lineEditSeries.dataSource = this.lineData;
-        
+
         scatterDataSeries.dataSource = this.scatterData;
         scatterEditSeries.dataSource = this.scatterData;
 
         this.lineChart.seriesMouseLeftButtonDown = this.onLineChartMouseDown.bind(this);
-        this.lineChart.plotAreaMouseOver = this.onLineChartMouseMove.bind(this);        
+        this.lineChart.plotAreaMouseOver = this.onLineChartMouseMove.bind(this);
         this.lineChart.plotAreaMouseLeftButtonUp = this.onLineChartMouseUp.bind(this);
 
         this.scatterChart.seriesMouseLeftButtonDown = this.onScatterChartMouseDown.bind(this);
@@ -71,18 +71,16 @@ export class Sample {
         this.scatterChart.plotAreaMouseLeftButtonUp = this.onScatterChartMouseUp.bind(this);
     }
 
-
-
     public onLineChartMouseDown(s: IgcSeriesViewerComponent, e: IgcDataChartMouseButtonEventArgs){
         this.lineSeriesEditingActive = true;
         this.lineSeriesEditingIndex = -1;
 
         var itemData = e.item;
-        
+
         for(var i=0; i<this.lineData.length; i++){
-            
-            var lineDataItem = this.lineData[i];            
-            var newItemData = { Category: lineDataItem.Category, DataValue: lineDataItem.DataValue, EditingValue: lineDataItem.EditingValue };   
+
+            var lineDataItem = this.lineData[i];
+            var newItemData = { Category: lineDataItem.Category, DataValue: lineDataItem.DataValue, EditingValue: lineDataItem.EditingValue };
 
             newItemData.EditingValue = null;
 
@@ -128,11 +126,11 @@ export class Sample {
         this.scatterLineEditingIndex = -1;
 
         var itemData = e.item;
-        
+
         for(var i=0; i<this.scatterData.length; i++){
-            
-            var scatterDataItem = this.scatterData[i];            
-            var newItemData = { X: scatterDataItem.X, Y: scatterDataItem.Y, EditingX: scatterDataItem.EditingX, EditingY: scatterDataItem.EditingY };   
+
+            var scatterDataItem = this.scatterData[i];
+            var newItemData = { X: scatterDataItem.X, Y: scatterDataItem.Y, EditingX: scatterDataItem.EditingX, EditingY: scatterDataItem.EditingY };
 
             newItemData.EditingX = null;
             newItemData.EditingY = null;
diff --git a/samples/charts/data-chart/custom-editing-data/tsconfig.json b/samples/charts/data-chart/custom-editing-data/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/custom-editing-data/tsconfig.json
+++ b/samples/charts/data-chart/custom-editing-data/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/dash-array-axes/package.json b/samples/charts/data-chart/dash-array-axes/package.json
index 04eba8b615..533ca70f4a 100644
--- a/samples/charts/data-chart/dash-array-axes/package.json
+++ b/samples/charts/data-chart/dash-array-axes/package.json
@@ -26,8 +26,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/dash-array-axes/sandbox.config.json b/samples/charts/data-chart/dash-array-axes/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/dash-array-axes/sandbox.config.json
+++ b/samples/charts/data-chart/dash-array-axes/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/dash-array-axes/src/index.css b/samples/charts/data-chart/dash-array-axes/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/dash-array-axes/src/index.css
+++ b/samples/charts/data-chart/dash-array-axes/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/dash-array-axes/src/index.ts b/samples/charts/data-chart/dash-array-axes/src/index.ts
index 0053ddce34..3ed4043e67 100644
--- a/samples/charts/data-chart/dash-array-axes/src/index.ts
+++ b/samples/charts/data-chart/dash-array-axes/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCategoryModule,
@@ -46,7 +45,6 @@ export class Sample {
             lineSeries3.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/data-chart/dash-array-axes/tsconfig.json b/samples/charts/data-chart/dash-array-axes/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/dash-array-axes/tsconfig.json
+++ b/samples/charts/data-chart/dash-array-axes/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/dash-array-series/package.json b/samples/charts/data-chart/dash-array-series/package.json
index 04eba8b615..533ca70f4a 100644
--- a/samples/charts/data-chart/dash-array-series/package.json
+++ b/samples/charts/data-chart/dash-array-series/package.json
@@ -26,8 +26,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/dash-array-series/sandbox.config.json b/samples/charts/data-chart/dash-array-series/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/dash-array-series/sandbox.config.json
+++ b/samples/charts/data-chart/dash-array-series/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/dash-array-series/src/index.css b/samples/charts/data-chart/dash-array-series/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/dash-array-series/src/index.css
+++ b/samples/charts/data-chart/dash-array-series/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/dash-array-series/src/index.ts b/samples/charts/data-chart/dash-array-series/src/index.ts
index 0053ddce34..3ed4043e67 100644
--- a/samples/charts/data-chart/dash-array-series/src/index.ts
+++ b/samples/charts/data-chart/dash-array-series/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCategoryModule,
@@ -46,7 +45,6 @@ export class Sample {
             lineSeries3.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/data-chart/dash-array-series/tsconfig.json b/samples/charts/data-chart/dash-array-series/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/dash-array-series/tsconfig.json
+++ b/samples/charts/data-chart/dash-array-series/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/dash-array-tickmarks/package.json b/samples/charts/data-chart/dash-array-tickmarks/package.json
index 04eba8b615..533ca70f4a 100644
--- a/samples/charts/data-chart/dash-array-tickmarks/package.json
+++ b/samples/charts/data-chart/dash-array-tickmarks/package.json
@@ -26,8 +26,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/dash-array-tickmarks/sandbox.config.json b/samples/charts/data-chart/dash-array-tickmarks/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/dash-array-tickmarks/sandbox.config.json
+++ b/samples/charts/data-chart/dash-array-tickmarks/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/dash-array-tickmarks/src/index.css b/samples/charts/data-chart/dash-array-tickmarks/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/dash-array-tickmarks/src/index.css
+++ b/samples/charts/data-chart/dash-array-tickmarks/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/dash-array-tickmarks/src/index.ts b/samples/charts/data-chart/dash-array-tickmarks/src/index.ts
index e1b7d03756..ab990b2c81 100644
--- a/samples/charts/data-chart/dash-array-tickmarks/src/index.ts
+++ b/samples/charts/data-chart/dash-array-tickmarks/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCategoryModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCategoryModule,
     IgcDataChartInteractivityModule
@@ -32,7 +31,6 @@ export class Sample {
             columnSeries1.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/data-chart/dash-array-tickmarks/tsconfig.json b/samples/charts/data-chart/dash-array-tickmarks/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/dash-array-tickmarks/tsconfig.json
+++ b/samples/charts/data-chart/dash-array-tickmarks/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/dash-array-trendline/package.json b/samples/charts/data-chart/dash-array-trendline/package.json
index 04eba8b615..533ca70f4a 100644
--- a/samples/charts/data-chart/dash-array-trendline/package.json
+++ b/samples/charts/data-chart/dash-array-trendline/package.json
@@ -26,8 +26,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/dash-array-trendline/sandbox.config.json b/samples/charts/data-chart/dash-array-trendline/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/dash-array-trendline/sandbox.config.json
+++ b/samples/charts/data-chart/dash-array-trendline/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/dash-array-trendline/src/index.css b/samples/charts/data-chart/dash-array-trendline/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/dash-array-trendline/src/index.css
+++ b/samples/charts/data-chart/dash-array-trendline/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/dash-array-trendline/src/index.ts b/samples/charts/data-chart/dash-array-trendline/src/index.ts
index 32e0631b0d..27bdddd242 100644
--- a/samples/charts/data-chart/dash-array-trendline/src/index.ts
+++ b/samples/charts/data-chart/dash-array-trendline/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryTrendLineModule, IgcDataChartFinancialCoreModule, IgcDataChartFinancialModule, IgcDataChartFinancialOverlaysModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
 import { Stock2YearsItem, Stock2Years } from './Stock2Years';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule,
@@ -39,7 +38,6 @@ export class Sample {
             series1.dataSource = this.stock2Years;
         }
         this._bind();
-
     }
 
     private _stock2Years: Stock2Years = null;
diff --git a/samples/charts/data-chart/dash-array-trendline/tsconfig.json b/samples/charts/data-chart/dash-array-trendline/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/dash-array-trendline/tsconfig.json
+++ b/samples/charts/data-chart/dash-array-trendline/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/sandbox.config.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/sandbox.config.json
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.css b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.css
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.ts
index d7992b3fd0..fb07a32c60 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.ts
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcDataLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
 import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -51,7 +50,6 @@ export class Sample {
             columnSeries3.dataSource = this.olympicMedalsTopCountriesWithTotals;
         }
         this._bind();
-
     }
 
     private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/webpack.config.js b/samples/charts/data-chart/data-legend-grouping-and-highlighting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/webpack.config.js
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/data-legend-grouping/package.json b/samples/charts/data-chart/data-legend-grouping/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/data-legend-grouping/package.json
+++ b/samples/charts/data-chart/data-legend-grouping/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/data-legend-grouping/sandbox.config.json b/samples/charts/data-chart/data-legend-grouping/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/data-legend-grouping/sandbox.config.json
+++ b/samples/charts/data-chart/data-legend-grouping/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping/src/index.css b/samples/charts/data-chart/data-legend-grouping/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/data-legend-grouping/src/index.css
+++ b/samples/charts/data-chart/data-legend-grouping/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping/src/index.ts b/samples/charts/data-chart/data-legend-grouping/src/index.ts
index d7992b3fd0..fb07a32c60 100644
--- a/samples/charts/data-chart/data-legend-grouping/src/index.ts
+++ b/samples/charts/data-chart/data-legend-grouping/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcDataLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
 import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -51,7 +50,6 @@ export class Sample {
             columnSeries3.dataSource = this.olympicMedalsTopCountriesWithTotals;
         }
         this._bind();
-
     }
 
     private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
diff --git a/samples/charts/data-chart/data-legend-grouping/tsconfig.json b/samples/charts/data-chart/data-legend-grouping/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/data-legend-grouping/tsconfig.json
+++ b/samples/charts/data-chart/data-legend-grouping/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-legend-grouping/webpack.config.js b/samples/charts/data-chart/data-legend-grouping/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/data-legend-grouping/webpack.config.js
+++ b/samples/charts/data-chart/data-legend-grouping/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/data-legend-styling/package.json b/samples/charts/data-chart/data-legend-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/data-legend-styling/package.json
+++ b/samples/charts/data-chart/data-legend-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/data-legend-styling/sandbox.config.json b/samples/charts/data-chart/data-legend-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/data-legend-styling/sandbox.config.json
+++ b/samples/charts/data-chart/data-legend-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-styling/src/index.css b/samples/charts/data-chart/data-legend-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/data-legend-styling/src/index.css
+++ b/samples/charts/data-chart/data-legend-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-styling/src/index.ts b/samples/charts/data-chart/data-legend-styling/src/index.ts
index 87c696b8e5..391f31345b 100644
--- a/samples/charts/data-chart/data-legend-styling/src/index.ts
+++ b/samples/charts/data-chart/data-legend-styling/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcDataLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -43,7 +42,6 @@ export class Sample {
             columnSeries1.dataSource = this.olympicMedalsTopCountriesWithTotals;
         }
         this._bind();
-
     }
 
     private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
diff --git a/samples/charts/data-chart/data-legend-styling/tsconfig.json b/samples/charts/data-chart/data-legend-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/data-legend-styling/tsconfig.json
+++ b/samples/charts/data-chart/data-legend-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-legend-styling/webpack.config.js b/samples/charts/data-chart/data-legend-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/data-legend-styling/webpack.config.js
+++ b/samples/charts/data-chart/data-legend-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/data-legend/package.json b/samples/charts/data-chart/data-legend/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/data-legend/package.json
+++ b/samples/charts/data-chart/data-legend/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/data-legend/sandbox.config.json b/samples/charts/data-chart/data-legend/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/data-legend/sandbox.config.json
+++ b/samples/charts/data-chart/data-legend/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend/src/index.css b/samples/charts/data-chart/data-legend/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/data-legend/src/index.css
+++ b/samples/charts/data-chart/data-legend/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend/src/index.ts b/samples/charts/data-chart/data-legend/src/index.ts
index c4b9f61fd0..0b514575a7 100644
--- a/samples/charts/data-chart/data-legend/src/index.ts
+++ b/samples/charts/data-chart/data-legend/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { IgcDataLegendComponent, IgcDataChartComponent, IgcNumericYAxisComponent, IgcNumericXAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcCrosshairLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
 import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -38,6 +37,7 @@ export class Sample {
         }
         return this._sizeScale1;
     }
+
     private bubbleSeries2: IgcBubbleSeriesComponent
     private _sizeScale2: IgcSizeScaleComponent | null = null;
     public get sizeScale2(): IgcSizeScaleComponent {
@@ -52,6 +52,7 @@ export class Sample {
         }
         return this._sizeScale2;
     }
+
     private crosshairLayer: IgcCrosshairLayerComponent
     private _bind: () => void;
 
@@ -76,7 +77,6 @@ export class Sample {
             bubbleSeries2.radiusScale = this.sizeScale2;
         }
         this._bind();
-
     }
 
     private _countryDemographicAfrican: CountryDemographicAfrican = null;
diff --git a/samples/charts/data-chart/data-legend/tsconfig.json b/samples/charts/data-chart/data-legend/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/data-legend/tsconfig.json
+++ b/samples/charts/data-chart/data-legend/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-legend/webpack.config.js b/samples/charts/data-chart/data-legend/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/data-legend/webpack.config.js
+++ b/samples/charts/data-chart/data-legend/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/sandbox.config.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/sandbox.config.json
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.css b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.css
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.ts
index 71f134cc7e..e958d22d14 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.ts
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.ts
@@ -3,11 +3,10 @@ import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartInterac
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule,
     IgcDataChartCoreModule,
@@ -49,7 +48,6 @@ export class Sample {
             columnSeries3.dataSource = this.olympicMedalsTopCountriesWithTotals;
         }
         this._bind();
-
     }
 
     private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/webpack.config.js b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/webpack.config.js
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/data-tooltip-grouping/package.json b/samples/charts/data-chart/data-tooltip-grouping/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/package.json
+++ b/samples/charts/data-chart/data-tooltip-grouping/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/data-tooltip-grouping/sandbox.config.json b/samples/charts/data-chart/data-tooltip-grouping/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/sandbox.config.json
+++ b/samples/charts/data-chart/data-tooltip-grouping/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/index.css b/samples/charts/data-chart/data-tooltip-grouping/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/src/index.css
+++ b/samples/charts/data-chart/data-tooltip-grouping/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/index.ts b/samples/charts/data-chart/data-tooltip-grouping/src/index.ts
index 71f134cc7e..e958d22d14 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/src/index.ts
+++ b/samples/charts/data-chart/data-tooltip-grouping/src/index.ts
@@ -3,11 +3,10 @@ import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartInterac
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule,
     IgcDataChartCoreModule,
@@ -49,7 +48,6 @@ export class Sample {
             columnSeries3.dataSource = this.olympicMedalsTopCountriesWithTotals;
         }
         this._bind();
-
     }
 
     private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
diff --git a/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json b/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json
+++ b/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-tooltip-grouping/webpack.config.js b/samples/charts/data-chart/data-tooltip-grouping/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/webpack.config.js
+++ b/samples/charts/data-chart/data-tooltip-grouping/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/data-tooltip-styling/package.json b/samples/charts/data-chart/data-tooltip-styling/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/data-chart/data-tooltip-styling/package.json
+++ b/samples/charts/data-chart/data-tooltip-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/data-tooltip-styling/sandbox.config.json b/samples/charts/data-chart/data-tooltip-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/data-tooltip-styling/sandbox.config.json
+++ b/samples/charts/data-chart/data-tooltip-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-styling/src/index.css b/samples/charts/data-chart/data-tooltip-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/data-tooltip-styling/src/index.css
+++ b/samples/charts/data-chart/data-tooltip-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-styling/src/index.ts b/samples/charts/data-chart/data-tooltip-styling/src/index.ts
index c2eafd9172..4d2a5a706f 100644
--- a/samples/charts/data-chart/data-tooltip-styling/src/index.ts
+++ b/samples/charts/data-chart/data-tooltip-styling/src/index.ts
@@ -3,11 +3,10 @@ import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartInterac
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule,
     IgcDataChartCoreModule,
@@ -39,7 +38,6 @@ export class Sample {
             columnSeries1.dataSource = this.olympicMedalsTopCountriesWithTotals;
         }
         this._bind();
-
     }
 
     private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
diff --git a/samples/charts/data-chart/data-tooltip-styling/tsconfig.json b/samples/charts/data-chart/data-tooltip-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/data-tooltip-styling/tsconfig.json
+++ b/samples/charts/data-chart/data-tooltip-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-tooltip-styling/webpack.config.js b/samples/charts/data-chart/data-tooltip-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/data-tooltip-styling/webpack.config.js
+++ b/samples/charts/data-chart/data-tooltip-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/data-tooltip/package.json b/samples/charts/data-chart/data-tooltip/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/data-tooltip/package.json
+++ b/samples/charts/data-chart/data-tooltip/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/data-tooltip/sandbox.config.json b/samples/charts/data-chart/data-tooltip/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/data-tooltip/sandbox.config.json
+++ b/samples/charts/data-chart/data-tooltip/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip/src/index.css b/samples/charts/data-chart/data-tooltip/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/data-tooltip/src/index.css
+++ b/samples/charts/data-chart/data-tooltip/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip/src/index.ts b/samples/charts/data-chart/data-tooltip/src/index.ts
index 8d34a0bbc1..a8abc30b6d 100644
--- a/samples/charts/data-chart/data-tooltip/src/index.ts
+++ b/samples/charts/data-chart/data-tooltip/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
 import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -36,6 +35,7 @@ export class Sample {
         }
         return this._sizeScale1;
     }
+
     private bubbleSeries2: IgcBubbleSeriesComponent
     private _sizeScale2: IgcSizeScaleComponent | null = null;
     public get sizeScale2(): IgcSizeScaleComponent {
@@ -50,6 +50,7 @@ export class Sample {
         }
         return this._sizeScale2;
     }
+
     private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
@@ -72,7 +73,6 @@ export class Sample {
             bubbleSeries2.radiusScale = this.sizeScale2;
         }
         this._bind();
-
     }
 
     private _countryDemographicAfrican: CountryDemographicAfrican = null;
diff --git a/samples/charts/data-chart/data-tooltip/tsconfig.json b/samples/charts/data-chart/data-tooltip/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/data-tooltip/tsconfig.json
+++ b/samples/charts/data-chart/data-tooltip/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/data-tooltip/webpack.config.js b/samples/charts/data-chart/data-tooltip/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/data-tooltip/webpack.config.js
+++ b/samples/charts/data-chart/data-tooltip/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/final-value-layer-styling/package.json b/samples/charts/data-chart/final-value-layer-styling/package.json
index 7e4ac8a4b5..85c4e6a6a1 100644
--- a/samples/charts/data-chart/final-value-layer-styling/package.json
+++ b/samples/charts/data-chart/final-value-layer-styling/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/final-value-layer-styling/src/index.ts b/samples/charts/data-chart/final-value-layer-styling/src/index.ts
index 438444de86..f6f6a00331 100644
--- a/samples/charts/data-chart/final-value-layer-styling/src/index.ts
+++ b/samples/charts/data-chart/final-value-layer-styling/src/index.ts
@@ -25,7 +25,6 @@ export class DataChartFinalValueLayerStyling {
 
         this.chart = document.getElementById('chart') as IgcDataChartComponent;
         this.chart.dataSource = SampleCategoryData.create();
-
     }
 
 }
diff --git a/samples/charts/data-chart/financial-price-series/package.json b/samples/charts/data-chart/financial-price-series/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/financial-price-series/package.json
+++ b/samples/charts/data-chart/financial-price-series/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/financial-price-series/sandbox.config.json b/samples/charts/data-chart/financial-price-series/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/financial-price-series/sandbox.config.json
+++ b/samples/charts/data-chart/financial-price-series/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/financial-price-series/src/index.css b/samples/charts/data-chart/financial-price-series/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/financial-price-series/src/index.css
+++ b/samples/charts/data-chart/financial-price-series/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/financial-price-series/src/index.ts b/samples/charts/data-chart/financial-price-series/src/index.ts
index b95565cb49..dd7949c595 100644
--- a/samples/charts/data-chart/financial-price-series/src/index.ts
+++ b/samples/charts/data-chart/financial-price-series/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartFinancialCoreModule, IgcDataChartFinancialModule, IgcDataChartFinancialOverlaysModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcFinancialPriceSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { Stock2YearsItem, Stock2Years } from './Stock2Years';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule,
@@ -40,7 +39,6 @@ export class Sample {
             series1.dataSource = this.stock2Years;
         }
         this._bind();
-
     }
 
     private _stock2Years: Stock2Years = null;
diff --git a/samples/charts/data-chart/financial-price-series/tsconfig.json b/samples/charts/data-chart/financial-price-series/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/financial-price-series/tsconfig.json
+++ b/samples/charts/data-chart/financial-price-series/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/financial-price-series/webpack.config.js b/samples/charts/data-chart/financial-price-series/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/financial-price-series/webpack.config.js
+++ b/samples/charts/data-chart/financial-price-series/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/format-specifiers/package.json b/samples/charts/data-chart/format-specifiers/package.json
index 04eba8b615..533ca70f4a 100644
--- a/samples/charts/data-chart/format-specifiers/package.json
+++ b/samples/charts/data-chart/format-specifiers/package.json
@@ -26,8 +26,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/format-specifiers/sandbox.config.json b/samples/charts/data-chart/format-specifiers/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/format-specifiers/sandbox.config.json
+++ b/samples/charts/data-chart/format-specifiers/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/format-specifiers/src/index.css b/samples/charts/data-chart/format-specifiers/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/format-specifiers/src/index.css
+++ b/samples/charts/data-chart/format-specifiers/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/format-specifiers/src/index.ts b/samples/charts/data-chart/format-specifiers/src/index.ts
index 10facdd47c..c8674cfd15 100644
--- a/samples/charts/data-chart/format-specifiers/src/index.ts
+++ b/samples/charts/data-chart/format-specifiers/src/index.ts
@@ -2,11 +2,10 @@ import { IgcDataLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryCoreMo
 import { IgcDataLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { IgcNumberFormatSpecifier } from 'igniteui-webcomponents-core';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataLegendModule,
     IgcDataChartCoreModule,
@@ -37,6 +36,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier1;
     }
+
     private chart: IgcDataChartComponent
     private yAxis: IgcCategoryYAxisComponent
     private xAxis: IgcNumericXAxisComponent
@@ -56,6 +56,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier3;
     }
+
     private barSeries1: IgcBarSeriesComponent
     private barSeries2: IgcBarSeriesComponent
     private tooltips: IgcDataToolTipLayerComponent
@@ -76,6 +77,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier5;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -101,7 +103,6 @@ export class Sample {
             tooltips.valueFormatSpecifiers = this.numberFormatSpecifier5;
         }
         this._bind();
-
     }
 
     private _highestGrossingMovies: HighestGrossingMovies = null;
diff --git a/samples/charts/data-chart/format-specifiers/tsconfig.json b/samples/charts/data-chart/format-specifiers/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/format-specifiers/tsconfig.json
+++ b/samples/charts/data-chart/format-specifiers/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/legends/package.json b/samples/charts/data-chart/legends/package.json
index 0740c88fe2..8f13f531fe 100644
--- a/samples/charts/data-chart/legends/package.json
+++ b/samples/charts/data-chart/legends/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/polar-area-chart-styling/package.json b/samples/charts/data-chart/polar-area-chart-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/package.json
+++ b/samples/charts/data-chart/polar-area-chart-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/polar-area-chart-styling/sandbox.config.json b/samples/charts/data-chart/polar-area-chart-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/sandbox.config.json
+++ b/samples/charts/data-chart/polar-area-chart-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-area-chart-styling/src/index.css b/samples/charts/data-chart/polar-area-chart-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/src/index.css
+++ b/samples/charts/data-chart/polar-area-chart-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-area-chart-styling/src/index.ts b/samples/charts/data-chart/polar-area-chart-styling/src/index.ts
index ed30a4bf3d..f42289a76d 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/src/index.ts
+++ b/samples/charts/data-chart/polar-area-chart-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarAreaSeriesComponent } from 'igniteui-webcomponents-charts';
 import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartPolarModule,
@@ -43,7 +42,6 @@ export class Sample {
             polarAreaSeries2.radiusAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _boatSailingData: BoatSailingData = null;
diff --git a/samples/charts/data-chart/polar-area-chart-styling/tsconfig.json b/samples/charts/data-chart/polar-area-chart-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/tsconfig.json
+++ b/samples/charts/data-chart/polar-area-chart-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/polar-area-chart-styling/webpack.config.js b/samples/charts/data-chart/polar-area-chart-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/webpack.config.js
+++ b/samples/charts/data-chart/polar-area-chart-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/polar-area-chart/package.json b/samples/charts/data-chart/polar-area-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/polar-area-chart/package.json
+++ b/samples/charts/data-chart/polar-area-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/polar-area-chart/sandbox.config.json b/samples/charts/data-chart/polar-area-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/polar-area-chart/sandbox.config.json
+++ b/samples/charts/data-chart/polar-area-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-area-chart/src/index.css b/samples/charts/data-chart/polar-area-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/polar-area-chart/src/index.css
+++ b/samples/charts/data-chart/polar-area-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-area-chart/src/index.ts b/samples/charts/data-chart/polar-area-chart/src/index.ts
index 0206c04abb..bdc63e9d42 100644
--- a/samples/charts/data-chart/polar-area-chart/src/index.ts
+++ b/samples/charts/data-chart/polar-area-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -45,7 +44,6 @@ export class Sample {
             polarAreaSeries2.radiusAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _boatSailingData: BoatSailingData = null;
diff --git a/samples/charts/data-chart/polar-area-chart/tsconfig.json b/samples/charts/data-chart/polar-area-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/polar-area-chart/tsconfig.json
+++ b/samples/charts/data-chart/polar-area-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/polar-area-chart/webpack.config.js b/samples/charts/data-chart/polar-area-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/polar-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-area-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/polar-chart-types/package.json b/samples/charts/data-chart/polar-chart-types/package.json
index 4856057f53..0b64dd620b 100644
--- a/samples/charts/data-chart/polar-chart-types/package.json
+++ b/samples/charts/data-chart/polar-chart-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/polar-line-chart/package.json b/samples/charts/data-chart/polar-line-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/polar-line-chart/package.json
+++ b/samples/charts/data-chart/polar-line-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/polar-line-chart/sandbox.config.json b/samples/charts/data-chart/polar-line-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/polar-line-chart/sandbox.config.json
+++ b/samples/charts/data-chart/polar-line-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-line-chart/src/index.css b/samples/charts/data-chart/polar-line-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/polar-line-chart/src/index.css
+++ b/samples/charts/data-chart/polar-line-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-line-chart/src/index.ts b/samples/charts/data-chart/polar-line-chart/src/index.ts
index b6d8de8f4d..7000256b3d 100644
--- a/samples/charts/data-chart/polar-line-chart/src/index.ts
+++ b/samples/charts/data-chart/polar-line-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -45,7 +44,6 @@ export class Sample {
             polarLineSeries2.radiusAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _boatSailingData: BoatSailingData = null;
diff --git a/samples/charts/data-chart/polar-line-chart/tsconfig.json b/samples/charts/data-chart/polar-line-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/polar-line-chart/tsconfig.json
+++ b/samples/charts/data-chart/polar-line-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/polar-line-chart/webpack.config.js b/samples/charts/data-chart/polar-line-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/polar-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-line-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/polar-scatter-chart/package.json b/samples/charts/data-chart/polar-scatter-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/polar-scatter-chart/package.json
+++ b/samples/charts/data-chart/polar-scatter-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/polar-scatter-chart/sandbox.config.json b/samples/charts/data-chart/polar-scatter-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/polar-scatter-chart/sandbox.config.json
+++ b/samples/charts/data-chart/polar-scatter-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-scatter-chart/src/index.css b/samples/charts/data-chart/polar-scatter-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/polar-scatter-chart/src/index.css
+++ b/samples/charts/data-chart/polar-scatter-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-scatter-chart/src/index.ts b/samples/charts/data-chart/polar-scatter-chart/src/index.ts
index 29e5b32650..443f9d729f 100644
--- a/samples/charts/data-chart/polar-scatter-chart/src/index.ts
+++ b/samples/charts/data-chart/polar-scatter-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarScatterSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartPolarModule,
@@ -41,7 +40,6 @@ export class Sample {
             polarScatterSeries2.radiusAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _boatSailingData: BoatSailingData = null;
diff --git a/samples/charts/data-chart/polar-scatter-chart/tsconfig.json b/samples/charts/data-chart/polar-scatter-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/polar-scatter-chart/tsconfig.json
+++ b/samples/charts/data-chart/polar-scatter-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/polar-scatter-chart/webpack.config.js b/samples/charts/data-chart/polar-scatter-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/polar-scatter-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-scatter-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/polar-spline-area-chart/package.json b/samples/charts/data-chart/polar-spline-area-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/package.json
+++ b/samples/charts/data-chart/polar-spline-area-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/polar-spline-area-chart/sandbox.config.json b/samples/charts/data-chart/polar-spline-area-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/sandbox.config.json
+++ b/samples/charts/data-chart/polar-spline-area-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-spline-area-chart/src/index.css b/samples/charts/data-chart/polar-spline-area-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/src/index.css
+++ b/samples/charts/data-chart/polar-spline-area-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-spline-area-chart/src/index.ts b/samples/charts/data-chart/polar-spline-area-chart/src/index.ts
index 53862805fe..0755b1f2a6 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/src/index.ts
+++ b/samples/charts/data-chart/polar-spline-area-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarSplineAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartPolarModule,
@@ -41,7 +40,6 @@ export class Sample {
             polarSplineAreaSeries2.radiusAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _boatSailingData: BoatSailingData = null;
diff --git a/samples/charts/data-chart/polar-spline-area-chart/tsconfig.json b/samples/charts/data-chart/polar-spline-area-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/tsconfig.json
+++ b/samples/charts/data-chart/polar-spline-area-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/polar-spline-area-chart/webpack.config.js b/samples/charts/data-chart/polar-spline-area-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-spline-area-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/polar-spline-chart/package.json b/samples/charts/data-chart/polar-spline-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/polar-spline-chart/package.json
+++ b/samples/charts/data-chart/polar-spline-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/polar-spline-chart/sandbox.config.json b/samples/charts/data-chart/polar-spline-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/polar-spline-chart/sandbox.config.json
+++ b/samples/charts/data-chart/polar-spline-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-spline-chart/src/index.css b/samples/charts/data-chart/polar-spline-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/polar-spline-chart/src/index.css
+++ b/samples/charts/data-chart/polar-spline-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/polar-spline-chart/src/index.ts b/samples/charts/data-chart/polar-spline-chart/src/index.ts
index b07965779f..9c728ea475 100644
--- a/samples/charts/data-chart/polar-spline-chart/src/index.ts
+++ b/samples/charts/data-chart/polar-spline-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarSplineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartPolarModule,
@@ -41,7 +40,6 @@ export class Sample {
             polarSplineSeries2.radiusAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _boatSailingData: BoatSailingData = null;
diff --git a/samples/charts/data-chart/polar-spline-chart/tsconfig.json b/samples/charts/data-chart/polar-spline-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/polar-spline-chart/tsconfig.json
+++ b/samples/charts/data-chart/polar-spline-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/polar-spline-chart/webpack.config.js b/samples/charts/data-chart/polar-spline-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/polar-spline-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-spline-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-area-chart-styling/package.json b/samples/charts/data-chart/radial-area-chart-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/package.json
+++ b/samples/charts/data-chart/radial-area-chart-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-area-chart-styling/sandbox.config.json b/samples/charts/data-chart/radial-area-chart-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/sandbox.config.json
+++ b/samples/charts/data-chart/radial-area-chart-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-area-chart-styling/src/index.css b/samples/charts/data-chart/radial-area-chart-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/src/index.css
+++ b/samples/charts/data-chart/radial-area-chart-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-area-chart-styling/src/index.ts b/samples/charts/data-chart/radial-area-chart-styling/src/index.ts
index a9a21c1dd7..8156162d87 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/src/index.ts
+++ b/samples/charts/data-chart/radial-area-chart-styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialAreaSeriesComponent } from 'igniteui-webcomponents-charts';
 import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -44,7 +43,6 @@ export class Sample {
             radialAreaSeries2.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _footballPlayerStats: FootballPlayerStats = null;
diff --git a/samples/charts/data-chart/radial-area-chart-styling/tsconfig.json b/samples/charts/data-chart/radial-area-chart-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/tsconfig.json
+++ b/samples/charts/data-chart/radial-area-chart-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-area-chart-styling/webpack.config.js b/samples/charts/data-chart/radial-area-chart-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/webpack.config.js
+++ b/samples/charts/data-chart/radial-area-chart-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-area-chart/package.json b/samples/charts/data-chart/radial-area-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/radial-area-chart/package.json
+++ b/samples/charts/data-chart/radial-area-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-area-chart/sandbox.config.json b/samples/charts/data-chart/radial-area-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-area-chart/sandbox.config.json
+++ b/samples/charts/data-chart/radial-area-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-area-chart/src/index.css b/samples/charts/data-chart/radial-area-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-area-chart/src/index.css
+++ b/samples/charts/data-chart/radial-area-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-area-chart/src/index.ts b/samples/charts/data-chart/radial-area-chart/src/index.ts
index 82d99f53dd..c191c219b9 100644
--- a/samples/charts/data-chart/radial-area-chart/src/index.ts
+++ b/samples/charts/data-chart/radial-area-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -46,7 +45,6 @@ export class Sample {
             radialAreaSeries2.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _footballPlayerStats: FootballPlayerStats = null;
diff --git a/samples/charts/data-chart/radial-area-chart/tsconfig.json b/samples/charts/data-chart/radial-area-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-area-chart/tsconfig.json
+++ b/samples/charts/data-chart/radial-area-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-area-chart/webpack.config.js b/samples/charts/data-chart/radial-area-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/radial-area-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-chart-types/package.json b/samples/charts/data-chart/radial-chart-types/package.json
index 21bea624d8..9a373de55a 100644
--- a/samples/charts/data-chart/radial-chart-types/package.json
+++ b/samples/charts/data-chart/radial-chart-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-chart-types/src/index.ts b/samples/charts/data-chart/radial-chart-types/src/index.ts
index 93de6b5834..2f3b3959d7 100644
--- a/samples/charts/data-chart/radial-chart-types/src/index.ts
+++ b/samples/charts/data-chart/radial-chart-types/src/index.ts
@@ -85,7 +85,6 @@ export class DataChartTypeRadialSeries {
             this.chart.series.clear();
             this.chart.series.add(series1);
             this.chart.series.add(series2);
-
         } else if (seriesType === 'Radial Line Chart') {
             // creating a series with mapping to data columns of financial data
             const series1 = new IgcRadialLineSeriesComponent();
@@ -102,7 +101,6 @@ export class DataChartTypeRadialSeries {
             this.chart.series.clear();
             this.chart.series.add(series1);
             this.chart.series.add(series2);
-
         } else if (seriesType === 'Radial Column Chart') {
             // creating a series with mapping to data columns of financial data
             const series1 = new IgcRadialColumnSeriesComponent();
diff --git a/samples/charts/data-chart/radial-column-chart-selection/package.json b/samples/charts/data-chart/radial-column-chart-selection/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/package.json
+++ b/samples/charts/data-chart/radial-column-chart-selection/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-column-chart-selection/sandbox.config.json b/samples/charts/data-chart/radial-column-chart-selection/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/sandbox.config.json
+++ b/samples/charts/data-chart/radial-column-chart-selection/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-column-chart-selection/src/index.css b/samples/charts/data-chart/radial-column-chart-selection/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/src/index.css
+++ b/samples/charts/data-chart/radial-column-chart-selection/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-column-chart-selection/src/index.ts b/samples/charts/data-chart/radial-column-chart-selection/src/index.ts
index 33657d0a6c..106d07a7e3 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/src/index.ts
+++ b/samples/charts/data-chart/radial-column-chart-selection/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialColumnSeriesComponent } from 'igniteui-webcomponents-charts';
 import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartRadialModule,
@@ -44,7 +43,6 @@ export class Sample {
             radialColumnSeries2.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _footballPlayerStats: FootballPlayerStats = null;
diff --git a/samples/charts/data-chart/radial-column-chart-selection/tsconfig.json b/samples/charts/data-chart/radial-column-chart-selection/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/tsconfig.json
+++ b/samples/charts/data-chart/radial-column-chart-selection/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-column-chart-selection/webpack.config.js b/samples/charts/data-chart/radial-column-chart-selection/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/webpack.config.js
+++ b/samples/charts/data-chart/radial-column-chart-selection/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-column-chart/package.json b/samples/charts/data-chart/radial-column-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/radial-column-chart/package.json
+++ b/samples/charts/data-chart/radial-column-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-column-chart/sandbox.config.json b/samples/charts/data-chart/radial-column-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-column-chart/sandbox.config.json
+++ b/samples/charts/data-chart/radial-column-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-column-chart/src/index.css b/samples/charts/data-chart/radial-column-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-column-chart/src/index.css
+++ b/samples/charts/data-chart/radial-column-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-column-chart/src/index.ts b/samples/charts/data-chart/radial-column-chart/src/index.ts
index 17ec6deb19..516847f2e6 100644
--- a/samples/charts/data-chart/radial-column-chart/src/index.ts
+++ b/samples/charts/data-chart/radial-column-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartRadialModule,
@@ -46,7 +45,6 @@ export class Sample {
             radialColumnSeries2.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _footballPlayerStats: FootballPlayerStats = null;
diff --git a/samples/charts/data-chart/radial-column-chart/tsconfig.json b/samples/charts/data-chart/radial-column-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-column-chart/tsconfig.json
+++ b/samples/charts/data-chart/radial-column-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-column-chart/webpack.config.js b/samples/charts/data-chart/radial-column-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-column-chart/webpack.config.js
+++ b/samples/charts/data-chart/radial-column-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-label-mode/package.json b/samples/charts/data-chart/radial-label-mode/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-chart/radial-label-mode/package.json
+++ b/samples/charts/data-chart/radial-label-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-label-mode/sandbox.config.json b/samples/charts/data-chart/radial-label-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-label-mode/sandbox.config.json
+++ b/samples/charts/data-chart/radial-label-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-label-mode/src/index.css b/samples/charts/data-chart/radial-label-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-label-mode/src/index.css
+++ b/samples/charts/data-chart/radial-label-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-label-mode/src/index.ts b/samples/charts/data-chart/radial-label-mode/src/index.ts
index 9fa6b16a70..9cdc0c198f 100644
--- a/samples/charts/data-chart/radial-label-mode/src/index.ts
+++ b/samples/charts/data-chart/radial-label-mode/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreD
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -61,7 +61,6 @@ export class Sample {
             radialColumnSeries2.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _footballPlayerStats: FootballPlayerStats = null;
diff --git a/samples/charts/data-chart/radial-label-mode/tsconfig.json b/samples/charts/data-chart/radial-label-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-label-mode/tsconfig.json
+++ b/samples/charts/data-chart/radial-label-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-label-mode/webpack.config.js b/samples/charts/data-chart/radial-label-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-label-mode/webpack.config.js
+++ b/samples/charts/data-chart/radial-label-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-line-chart/package.json b/samples/charts/data-chart/radial-line-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/radial-line-chart/package.json
+++ b/samples/charts/data-chart/radial-line-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-line-chart/sandbox.config.json b/samples/charts/data-chart/radial-line-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-line-chart/sandbox.config.json
+++ b/samples/charts/data-chart/radial-line-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-line-chart/src/index.css b/samples/charts/data-chart/radial-line-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-line-chart/src/index.css
+++ b/samples/charts/data-chart/radial-line-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-line-chart/src/index.ts b/samples/charts/data-chart/radial-line-chart/src/index.ts
index 9e43782cc1..076e5d2bc7 100644
--- a/samples/charts/data-chart/radial-line-chart/src/index.ts
+++ b/samples/charts/data-chart/radial-line-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -46,7 +45,6 @@ export class Sample {
             radialLineSeries2.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _footballPlayerStats: FootballPlayerStats = null;
diff --git a/samples/charts/data-chart/radial-line-chart/tsconfig.json b/samples/charts/data-chart/radial-line-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-line-chart/tsconfig.json
+++ b/samples/charts/data-chart/radial-line-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-line-chart/webpack.config.js b/samples/charts/data-chart/radial-line-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/radial-line-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-pie-chart/package.json b/samples/charts/data-chart/radial-pie-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/radial-pie-chart/package.json
+++ b/samples/charts/data-chart/radial-pie-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-pie-chart/sandbox.config.json b/samples/charts/data-chart/radial-pie-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-pie-chart/sandbox.config.json
+++ b/samples/charts/data-chart/radial-pie-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-pie-chart/src/index.css b/samples/charts/data-chart/radial-pie-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-pie-chart/src/index.css
+++ b/samples/charts/data-chart/radial-pie-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-pie-chart/src/index.ts b/samples/charts/data-chart/radial-pie-chart/src/index.ts
index 9ddf3f32ef..0bb247d84f 100644
--- a/samples/charts/data-chart/radial-pie-chart/src/index.ts
+++ b/samples/charts/data-chart/radial-pie-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialPieSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -46,7 +45,6 @@ export class Sample {
             radialPieSeries2.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _footballPlayerStats: FootballPlayerStats = null;
diff --git a/samples/charts/data-chart/radial-pie-chart/tsconfig.json b/samples/charts/data-chart/radial-pie-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-pie-chart/tsconfig.json
+++ b/samples/charts/data-chart/radial-pie-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-pie-chart/webpack.config.js b/samples/charts/data-chart/radial-pie-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-pie-chart/webpack.config.js
+++ b/samples/charts/data-chart/radial-pie-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/sandbox.config.json b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/sandbox.config.json
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/src/index.css b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/src/index.css
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/src/index.ts b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/src/index.ts
index 87b1b5a8fd..172eee7ab6 100644
--- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/src/index.ts
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataPieChartCoreModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcProportionalCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialPieSeriesComponent } from 'igniteui-webcomponents-charts';
 import { RadialProportionalDataItem, RadialProportionalData } from './RadialProportionalData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataPieChartCoreModule,
     IgcDataChartCoreModule,
@@ -36,7 +35,6 @@ export class Sample {
             radialPieSeries1.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _radialProportionalData: RadialProportionalData = null;
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/tsconfig.json b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/tsconfig.json
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/webpack.config.js b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/webpack.config.js
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json b/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/sandbox.config.json b/samples/charts/data-chart/radial-proportional-radial-angle-axis/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/sandbox.config.json
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/src/index.css b/samples/charts/data-chart/radial-proportional-radial-angle-axis/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/src/index.css
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/src/index.ts b/samples/charts/data-chart/radial-proportional-radial-angle-axis/src/index.ts
index 756461fe98..47445935d9 100644
--- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/src/index.ts
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataPieChartModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcProportionalCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialPieSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataPieChartModule,
@@ -42,7 +41,6 @@ export class Sample {
             radialPieSeries1.valueAxis = this.radiusAxis;
         }
         this._bind();
-
     }
 
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/tsconfig.json b/samples/charts/data-chart/radial-proportional-radial-angle-axis/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/tsconfig.json
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/webpack.config.js b/samples/charts/data-chart/radial-proportional-radial-angle-axis/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/webpack.config.js
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/range-area-chart/package.json b/samples/charts/data-chart/range-area-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/range-area-chart/package.json
+++ b/samples/charts/data-chart/range-area-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/range-area-chart/sandbox.config.json b/samples/charts/data-chart/range-area-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/range-area-chart/sandbox.config.json
+++ b/samples/charts/data-chart/range-area-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/range-area-chart/src/index.css b/samples/charts/data-chart/range-area-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/range-area-chart/src/index.css
+++ b/samples/charts/data-chart/range-area-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/range-area-chart/src/index.ts b/samples/charts/data-chart/range-area-chart/src/index.ts
index 55f1df94bf..f870045e20 100644
--- a/samples/charts/data-chart/range-area-chart/src/index.ts
+++ b/samples/charts/data-chart/range-area-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcRangeAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule,
@@ -45,7 +44,6 @@ export class Sample {
             rangeAreaSeries2.dataSource = this.temperatureRangeData;
         }
         this._bind();
-
     }
 
     private _temperatureRangeData: TemperatureRangeData = null;
diff --git a/samples/charts/data-chart/range-area-chart/tsconfig.json b/samples/charts/data-chart/range-area-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/range-area-chart/tsconfig.json
+++ b/samples/charts/data-chart/range-area-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/range-area-chart/webpack.config.js b/samples/charts/data-chart/range-area-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/range-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/range-area-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/range-column-chart/package.json b/samples/charts/data-chart/range-column-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/range-column-chart/package.json
+++ b/samples/charts/data-chart/range-column-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/range-column-chart/sandbox.config.json b/samples/charts/data-chart/range-column-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/range-column-chart/sandbox.config.json
+++ b/samples/charts/data-chart/range-column-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/range-column-chart/src/index.css b/samples/charts/data-chart/range-column-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/range-column-chart/src/index.css
+++ b/samples/charts/data-chart/range-column-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/range-column-chart/src/index.ts b/samples/charts/data-chart/range-column-chart/src/index.ts
index 536ed88675..0edfa175b7 100644
--- a/samples/charts/data-chart/range-column-chart/src/index.ts
+++ b/samples/charts/data-chart/range-column-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcRangeColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule,
@@ -45,7 +44,6 @@ export class Sample {
             rangeColumnSeries2.dataSource = this.temperatureRangeData;
         }
         this._bind();
-
     }
 
     private _temperatureRangeData: TemperatureRangeData = null;
diff --git a/samples/charts/data-chart/range-column-chart/tsconfig.json b/samples/charts/data-chart/range-column-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/range-column-chart/tsconfig.json
+++ b/samples/charts/data-chart/range-column-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/range-column-chart/webpack.config.js b/samples/charts/data-chart/range-column-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/range-column-chart/webpack.config.js
+++ b/samples/charts/data-chart/range-column-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/sandbox.config.json b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/sandbox.config.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.css b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.css
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.ts b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.ts
index 78606afebc..c7b2100098 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.ts
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.ts
@@ -2,11 +2,10 @@ import { IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatter
 import { ComponentRenderer, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartScatterDescriptionModule, DataChartScatterCoreDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
 import { WorldStatsItem, WorldStats } from './WorldStats';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcNumberAbbreviatorModule,
     IgcDataChartCoreModule,
@@ -35,6 +34,7 @@ export class Sample {
         }
         return this._sizeScale1;
     }
+
     private _valueBrushScale1: IgcValueBrushScaleComponent | null = null;
     public get valueBrushScale1(): IgcValueBrushScaleComponent {
         if (this._valueBrushScale1 == null)
@@ -49,6 +49,7 @@ export class Sample {
         }
         return this._valueBrushScale1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -65,7 +66,6 @@ export class Sample {
             bubbleSeries1.fillScale = this.valueBrushScale1;
         }
         this._bind();
-
     }
 
     private _worldStats: WorldStats = null;
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/tsconfig.json b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/tsconfig.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/webpack.config.js b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/webpack.config.js
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/sandbox.config.json b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/sandbox.config.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.css b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.css
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.ts b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.ts
index 4640b54a4c..4c3efc3087 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.ts
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent } from 'igniteui-webcomponents-charts';
 import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
 import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -36,6 +35,7 @@ export class Sample {
         }
         return this._sizeScale1;
     }
+
     private bubbleSeries2: IgcBubbleSeriesComponent
     private _sizeScale2: IgcSizeScaleComponent | null = null;
     public get sizeScale2(): IgcSizeScaleComponent {
@@ -50,6 +50,7 @@ export class Sample {
         }
         return this._sizeScale2;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -72,7 +73,6 @@ export class Sample {
             bubbleSeries2.radiusScale = this.sizeScale2;
         }
         this._bind();
-
     }
 
     private _countryStatsAfrica: CountryStatsAfrica = null;
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/tsconfig.json b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/tsconfig.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/webpack.config.js b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json b/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/sandbox.config.json b/samples/charts/data-chart/scatter-bubble-chart-single-source/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/sandbox.config.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.css b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.css
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.ts b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.ts
index f253007057..7018409b55 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.ts
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { WorldStatsItem, WorldStats } from './WorldStats';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcNumberAbbreviatorModule,
     IgcDataChartCoreModule,
@@ -34,6 +33,7 @@ export class Sample {
         }
         return this._sizeScale1;
     }
+
     private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
@@ -51,7 +51,6 @@ export class Sample {
             bubbleSeries1.dataSource = this.worldStats;
         }
         this._bind();
-
     }
 
     private _worldStats: WorldStats = null;
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/tsconfig.json b/samples/charts/data-chart/scatter-bubble-chart-single-source/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/tsconfig.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/webpack.config.js b/samples/charts/data-chart/scatter-bubble-chart-single-source/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/webpack.config.js
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/package.json b/samples/charts/data-chart/scatter-bubble-chart-styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/sandbox.config.json b/samples/charts/data-chart/scatter-bubble-chart-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/sandbox.config.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/src/index.css b/samples/charts/data-chart/scatter-bubble-chart-styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/src/index.css
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/src/index.ts b/samples/charts/data-chart/scatter-bubble-chart-styling/src/index.ts
index 3985fa6fab..4c8c4d74b1 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/src/index.ts
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
 import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -37,6 +36,7 @@ export class Sample {
         }
         return this._sizeScale1;
     }
+
     private bubbleSeries2: IgcBubbleSeriesComponent
     private _sizeScale2: IgcSizeScaleComponent | null = null;
     public get sizeScale2(): IgcSizeScaleComponent {
@@ -51,6 +51,7 @@ export class Sample {
         }
         return this._sizeScale2;
     }
+
     private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
@@ -75,7 +76,6 @@ export class Sample {
             bubbleSeries2.radiusScale = this.sizeScale2;
         }
         this._bind();
-
     }
 
     private _countryStatsAfrica: CountryStatsAfrica = null;
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/tsconfig.json b/samples/charts/data-chart/scatter-bubble-chart-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/tsconfig.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/webpack.config.js b/samples/charts/data-chart/scatter-bubble-chart-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/webpack.config.js
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/scatter-line-chart/package.json b/samples/charts/data-chart/scatter-line-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/scatter-line-chart/package.json
+++ b/samples/charts/data-chart/scatter-line-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/scatter-line-chart/sandbox.config.json b/samples/charts/data-chart/scatter-line-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/scatter-line-chart/sandbox.config.json
+++ b/samples/charts/data-chart/scatter-line-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-line-chart/src/index.css b/samples/charts/data-chart/scatter-line-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/scatter-line-chart/src/index.css
+++ b/samples/charts/data-chart/scatter-line-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-line-chart/src/index.ts b/samples/charts/data-chart/scatter-line-chart/src/index.ts
index 11e56dfbe3..4ed372ce07 100644
--- a/samples/charts/data-chart/scatter-line-chart/src/index.ts
+++ b/samples/charts/data-chart/scatter-line-chart/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
 import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -47,7 +46,6 @@ export class Sample {
             scatterLineSeries2.dataSource = this.healthDataForFrance;
         }
         this._bind();
-
     }
 
     private _healthDataForGermany: HealthDataForGermany = null;
diff --git a/samples/charts/data-chart/scatter-line-chart/tsconfig.json b/samples/charts/data-chart/scatter-line-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/scatter-line-chart/tsconfig.json
+++ b/samples/charts/data-chart/scatter-line-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/scatter-line-chart/webpack.config.js b/samples/charts/data-chart/scatter-line-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/scatter-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/scatter-line-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/scatter-point-chart/package.json b/samples/charts/data-chart/scatter-point-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/scatter-point-chart/package.json
+++ b/samples/charts/data-chart/scatter-point-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/scatter-point-chart/sandbox.config.json b/samples/charts/data-chart/scatter-point-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/scatter-point-chart/sandbox.config.json
+++ b/samples/charts/data-chart/scatter-point-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-point-chart/src/index.css b/samples/charts/data-chart/scatter-point-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/scatter-point-chart/src/index.css
+++ b/samples/charts/data-chart/scatter-point-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-point-chart/src/index.ts b/samples/charts/data-chart/scatter-point-chart/src/index.ts
index b174881275..8fa1350327 100644
--- a/samples/charts/data-chart/scatter-point-chart/src/index.ts
+++ b/samples/charts/data-chart/scatter-point-chart/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartScatterModule, Igc
 import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
 import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -44,7 +43,6 @@ export class Sample {
             scatterSeries2.dataSource = this.countryDemographicAfrican;
         }
         this._bind();
-
     }
 
     private _countryDemographicEurope: CountryDemographicEurope = null;
diff --git a/samples/charts/data-chart/scatter-point-chart/tsconfig.json b/samples/charts/data-chart/scatter-point-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/scatter-point-chart/tsconfig.json
+++ b/samples/charts/data-chart/scatter-point-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/scatter-point-chart/webpack.config.js b/samples/charts/data-chart/scatter-point-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/scatter-point-chart/webpack.config.js
+++ b/samples/charts/data-chart/scatter-point-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/scatter-spline-chart/package.json b/samples/charts/data-chart/scatter-spline-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/scatter-spline-chart/package.json
+++ b/samples/charts/data-chart/scatter-spline-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/scatter-spline-chart/sandbox.config.json b/samples/charts/data-chart/scatter-spline-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/scatter-spline-chart/sandbox.config.json
+++ b/samples/charts/data-chart/scatter-spline-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-spline-chart/src/index.css b/samples/charts/data-chart/scatter-spline-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/scatter-spline-chart/src/index.css
+++ b/samples/charts/data-chart/scatter-spline-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/scatter-spline-chart/src/index.ts b/samples/charts/data-chart/scatter-spline-chart/src/index.ts
index e5cb0367cb..176a468c44 100644
--- a/samples/charts/data-chart/scatter-spline-chart/src/index.ts
+++ b/samples/charts/data-chart/scatter-spline-chart/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, Ig
 import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSplineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
 import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcNumberAbbreviatorModule,
@@ -47,7 +46,6 @@ export class Sample {
             scatterSplineSeries2.dataSource = this.healthDataForFrance;
         }
         this._bind();
-
     }
 
     private _healthDataForGermany: HealthDataForGermany = null;
diff --git a/samples/charts/data-chart/scatter-spline-chart/tsconfig.json b/samples/charts/data-chart/scatter-spline-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/scatter-spline-chart/tsconfig.json
+++ b/samples/charts/data-chart/scatter-spline-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/scatter-spline-chart/webpack.config.js b/samples/charts/data-chart/scatter-spline-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/scatter-spline-chart/webpack.config.js
+++ b/samples/charts/data-chart/scatter-spline-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/series-animations/package.json b/samples/charts/data-chart/series-animations/package.json
index 20fe9acd3e..c95e05b036 100644
--- a/samples/charts/data-chart/series-animations/package.json
+++ b/samples/charts/data-chart/series-animations/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/series-annotations/package.json b/samples/charts/data-chart/series-annotations/package.json
index d75cfb9590..c5e0367d08 100644
--- a/samples/charts/data-chart/series-annotations/package.json
+++ b/samples/charts/data-chart/series-annotations/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/series-error-bars/package.json b/samples/charts/data-chart/series-error-bars/package.json
index b93c50cbae..86140ed61c 100644
--- a/samples/charts/data-chart/series-error-bars/package.json
+++ b/samples/charts/data-chart/series-error-bars/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/series-highlighting/package.json b/samples/charts/data-chart/series-highlighting/package.json
index 5e55c6ceca..e1fc66c7bd 100644
--- a/samples/charts/data-chart/series-highlighting/package.json
+++ b/samples/charts/data-chart/series-highlighting/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/series-marker-template/package.json b/samples/charts/data-chart/series-marker-template/package.json
index 5563c17835..ba482377c5 100644
--- a/samples/charts/data-chart/series-marker-template/package.json
+++ b/samples/charts/data-chart/series-marker-template/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/series-markers/package.json b/samples/charts/data-chart/series-markers/package.json
index b7d3033d2b..9ffdfd3907 100644
--- a/samples/charts/data-chart/series-markers/package.json
+++ b/samples/charts/data-chart/series-markers/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/series-tooltips/package.json b/samples/charts/data-chart/series-tooltips/package.json
index 4be2d8ec68..d1bae5a019 100644
--- a/samples/charts/data-chart/series-tooltips/package.json
+++ b/samples/charts/data-chart/series-tooltips/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/series-trendlines/package.json b/samples/charts/data-chart/series-trendlines/package.json
index 43ceb6862e..65ef1a443a 100644
--- a/samples/charts/data-chart/series-trendlines/package.json
+++ b/samples/charts/data-chart/series-trendlines/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/series-value-overlay/package.json b/samples/charts/data-chart/series-value-overlay/package.json
index 61a403d111..3bd20ca9f4 100644
--- a/samples/charts/data-chart/series-value-overlay/package.json
+++ b/samples/charts/data-chart/series-value-overlay/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-100-area-chart/package.json b/samples/charts/data-chart/stacked-100-area-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-area-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-100-area-chart/sandbox.config.json b/samples/charts/data-chart/stacked-100-area-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-100-area-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-area-chart/src/index.css b/samples/charts/data-chart/stacked-100-area-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-100-area-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-area-chart/src/index.ts b/samples/charts/data-chart/stacked-100-area-chart/src/index.ts
index 4a858e4fd5..7090ff3b5a 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-100-area-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100AreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stacked100AreaSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-100-area-chart/tsconfig.json b/samples/charts/data-chart/stacked-100-area-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-100-area-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-100-area-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-area-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-area-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/package.json b/samples/charts/data-chart/stacked-100-bar-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-bar-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/sandbox.config.json b/samples/charts/data-chart/stacked-100-bar-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-100-bar-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/src/index.css b/samples/charts/data-chart/stacked-100-bar-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-100-bar-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/src/index.ts b/samples/charts/data-chart/stacked-100-bar-chart/src/index.ts
index 6714475a2f..2bbff7f479 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-100-bar-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcStacked100BarSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -51,7 +50,6 @@ export class Sample {
             stacked100BarSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/tsconfig.json b/samples/charts/data-chart/stacked-100-bar-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-100-bar-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-bar-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-bar-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-100-column-chart/package.json b/samples/charts/data-chart/stacked-100-column-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-column-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-100-column-chart/sandbox.config.json b/samples/charts/data-chart/stacked-100-column-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-100-column-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-column-chart/src/index.css b/samples/charts/data-chart/stacked-100-column-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-100-column-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-column-chart/src/index.ts b/samples/charts/data-chart/stacked-100-column-chart/src/index.ts
index abfabc5042..307eda79a7 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-100-column-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100ColumnSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { OnlineTrafficByDeviceItem, OnlineTrafficByDevice } from './OnlineTrafficByDevice';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -49,7 +48,6 @@ export class Sample {
             stacked100ColumnSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _onlineTrafficByDevice: OnlineTrafficByDevice = null;
diff --git a/samples/charts/data-chart/stacked-100-column-chart/tsconfig.json b/samples/charts/data-chart/stacked-100-column-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-100-column-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-100-column-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-column-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-column-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-100-line-chart/package.json b/samples/charts/data-chart/stacked-100-line-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-line-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-100-line-chart/sandbox.config.json b/samples/charts/data-chart/stacked-100-line-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-100-line-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-line-chart/src/index.css b/samples/charts/data-chart/stacked-100-line-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-100-line-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-line-chart/src/index.ts b/samples/charts/data-chart/stacked-100-line-chart/src/index.ts
index 2d8fb47799..ed2a5258dd 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-100-line-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100LineSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stacked100LineSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-100-line-chart/tsconfig.json b/samples/charts/data-chart/stacked-100-line-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-100-line-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-100-line-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-line-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-line-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/package.json b/samples/charts/data-chart/stacked-100-spline-area-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/sandbox.config.json b/samples/charts/data-chart/stacked-100-spline-area-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/src/index.css b/samples/charts/data-chart/stacked-100-spline-area-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/src/index.ts b/samples/charts/data-chart/stacked-100-spline-area-chart/src/index.ts
index 11724d9453..0ff0854d08 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100SplineAreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stacked100SplineAreaSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/tsconfig.json b/samples/charts/data-chart/stacked-100-spline-area-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-spline-area-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/package.json b/samples/charts/data-chart/stacked-100-spline-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-spline-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/sandbox.config.json b/samples/charts/data-chart/stacked-100-spline-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-100-spline-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/src/index.css b/samples/charts/data-chart/stacked-100-spline-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-100-spline-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/src/index.ts b/samples/charts/data-chart/stacked-100-spline-chart/src/index.ts
index f862806b36..98d9f3c1c4 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-100-spline-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100SplineSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stacked100SplineSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/tsconfig.json b/samples/charts/data-chart/stacked-100-spline-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-100-spline-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-spline-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-spline-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-area-chart/package.json b/samples/charts/data-chart/stacked-area-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-area-chart/package.json
+++ b/samples/charts/data-chart/stacked-area-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-area-chart/sandbox.config.json b/samples/charts/data-chart/stacked-area-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-area-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-area-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-area-chart/src/index.css b/samples/charts/data-chart/stacked-area-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-area-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-area-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-area-chart/src/index.ts b/samples/charts/data-chart/stacked-area-chart/src/index.ts
index 809b318cf2..3c1f7848cf 100644
--- a/samples/charts/data-chart/stacked-area-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-area-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedAreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stackedAreaSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-area-chart/tsconfig.json b/samples/charts/data-chart/stacked-area-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-area-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-area-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-area-chart/webpack.config.js b/samples/charts/data-chart/stacked-area-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-area-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-bar-chart/package.json b/samples/charts/data-chart/stacked-bar-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-bar-chart/package.json
+++ b/samples/charts/data-chart/stacked-bar-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-bar-chart/sandbox.config.json b/samples/charts/data-chart/stacked-bar-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-bar-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-bar-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-bar-chart/src/index.css b/samples/charts/data-chart/stacked-bar-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-bar-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-bar-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-bar-chart/src/index.ts b/samples/charts/data-chart/stacked-bar-chart/src/index.ts
index d831a79b86..27b260dff3 100644
--- a/samples/charts/data-chart/stacked-bar-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-bar-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule, IgcCalloutLayerModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcStackedBarSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -52,7 +51,6 @@ export class Sample {
             stackedBarSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
diff --git a/samples/charts/data-chart/stacked-bar-chart/tsconfig.json b/samples/charts/data-chart/stacked-bar-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-bar-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-bar-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-bar-chart/webpack.config.js b/samples/charts/data-chart/stacked-bar-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-bar-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-bar-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-chart-types/package.json b/samples/charts/data-chart/stacked-chart-types/package.json
index 3fe1d05925..e715f207d3 100644
--- a/samples/charts/data-chart/stacked-chart-types/package.json
+++ b/samples/charts/data-chart/stacked-chart-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-column-chart/package.json b/samples/charts/data-chart/stacked-column-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-column-chart/package.json
+++ b/samples/charts/data-chart/stacked-column-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-column-chart/sandbox.config.json b/samples/charts/data-chart/stacked-column-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-column-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-column-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-column-chart/src/index.css b/samples/charts/data-chart/stacked-column-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-column-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-column-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-column-chart/src/index.ts b/samples/charts/data-chart/stacked-column-chart/src/index.ts
index 8e7616554d..b101e36d88 100644
--- a/samples/charts/data-chart/stacked-column-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-column-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedColumnSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stackedColumnSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-column-chart/tsconfig.json b/samples/charts/data-chart/stacked-column-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-column-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-column-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-column-chart/webpack.config.js b/samples/charts/data-chart/stacked-column-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-column-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-column-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-line-chart/package.json b/samples/charts/data-chart/stacked-line-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-line-chart/package.json
+++ b/samples/charts/data-chart/stacked-line-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-line-chart/sandbox.config.json b/samples/charts/data-chart/stacked-line-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-line-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-line-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-line-chart/src/index.css b/samples/charts/data-chart/stacked-line-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-line-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-line-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-line-chart/src/index.ts b/samples/charts/data-chart/stacked-line-chart/src/index.ts
index 4b84312945..f7e5a2d369 100644
--- a/samples/charts/data-chart/stacked-line-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-line-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedLineSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stackedLineSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-line-chart/tsconfig.json b/samples/charts/data-chart/stacked-line-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-line-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-line-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-line-chart/webpack.config.js b/samples/charts/data-chart/stacked-line-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-line-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/package.json b/samples/charts/data-chart/stacked-spline-area-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/package.json
+++ b/samples/charts/data-chart/stacked-spline-area-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/sandbox.config.json b/samples/charts/data-chart/stacked-spline-area-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-spline-area-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/src/index.css b/samples/charts/data-chart/stacked-spline-area-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-spline-area-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/src/index.ts b/samples/charts/data-chart/stacked-spline-area-chart/src/index.ts
index 063f5c24eb..26ce8aee66 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-spline-area-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedSplineAreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stackedSplineAreaSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/tsconfig.json b/samples/charts/data-chart/stacked-spline-area-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-spline-area-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/webpack.config.js b/samples/charts/data-chart/stacked-spline-area-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-spline-area-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/stacked-spline-chart/package.json b/samples/charts/data-chart/stacked-spline-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/stacked-spline-chart/package.json
+++ b/samples/charts/data-chart/stacked-spline-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/stacked-spline-chart/sandbox.config.json b/samples/charts/data-chart/stacked-spline-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/stacked-spline-chart/sandbox.config.json
+++ b/samples/charts/data-chart/stacked-spline-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-spline-chart/src/index.css b/samples/charts/data-chart/stacked-spline-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/stacked-spline-chart/src/index.css
+++ b/samples/charts/data-chart/stacked-spline-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/stacked-spline-chart/src/index.ts b/samples/charts/data-chart/stacked-spline-chart/src/index.ts
index e75eb0d7bf..6fa5b606bf 100644
--- a/samples/charts/data-chart/stacked-spline-chart/src/index.ts
+++ b/samples/charts/data-chart/stacked-spline-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
 import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedSplineSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDataChartCoreModule,
@@ -53,7 +52,6 @@ export class Sample {
             stackedSplineSeries.yAxis = this.yAxis;
         }
         this._bind();
-
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
diff --git a/samples/charts/data-chart/stacked-spline-chart/tsconfig.json b/samples/charts/data-chart/stacked-spline-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/stacked-spline-chart/tsconfig.json
+++ b/samples/charts/data-chart/stacked-spline-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/stacked-spline-chart/webpack.config.js b/samples/charts/data-chart/stacked-spline-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/stacked-spline-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-spline-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/tooltip-template/package.json b/samples/charts/data-chart/tooltip-template/package.json
index 61134315cc..00fb70f677 100644
--- a/samples/charts/data-chart/tooltip-template/package.json
+++ b/samples/charts/data-chart/tooltip-template/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/transition-event/package.json b/samples/charts/data-chart/transition-event/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-chart/transition-event/package.json
+++ b/samples/charts/data-chart/transition-event/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/transition-event/sandbox.config.json b/samples/charts/data-chart/transition-event/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/transition-event/sandbox.config.json
+++ b/samples/charts/data-chart/transition-event/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/transition-event/src/index.css b/samples/charts/data-chart/transition-event/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/transition-event/src/index.css
+++ b/samples/charts/data-chart/transition-event/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/transition-event/src/index.ts b/samples/charts/data-chart/transition-event/src/index.ts
index 2c0e43521b..a203edb83e 100644
--- a/samples/charts/data-chart/transition-event/src/index.ts
+++ b/samples/charts/data-chart/transition-event/src/index.ts
@@ -5,10 +5,10 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcWaterfallSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CompanyIncomeDataItem, CompanyIncomeData } from './CompanyIncomeData';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -53,7 +53,6 @@ export class Sample {
             waterfallSeries2.dataSource = this.companyIncomeData;
         }
         this._bind();
-
     }
 
     private _companyIncomeData: CompanyIncomeData = null;
diff --git a/samples/charts/data-chart/transition-event/tsconfig.json b/samples/charts/data-chart/transition-event/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/transition-event/tsconfig.json
+++ b/samples/charts/data-chart/transition-event/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/transition-event/webpack.config.js b/samples/charts/data-chart/transition-event/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/transition-event/webpack.config.js
+++ b/samples/charts/data-chart/transition-event/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-chart/type-financial-candlestick-series/package.json b/samples/charts/data-chart/type-financial-candlestick-series/package.json
index 3953da9ead..a37d508c2b 100644
--- a/samples/charts/data-chart/type-financial-candlestick-series/package.json
+++ b/samples/charts/data-chart/type-financial-candlestick-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-financial-indicator-column/package.json b/samples/charts/data-chart/type-financial-indicator-column/package.json
index 3f311683b1..608766e8a8 100644
--- a/samples/charts/data-chart/type-financial-indicator-column/package.json
+++ b/samples/charts/data-chart/type-financial-indicator-column/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-financial-indicator-line/package.json b/samples/charts/data-chart/type-financial-indicator-line/package.json
index 034f31b57a..3dab375306 100644
--- a/samples/charts/data-chart/type-financial-indicator-line/package.json
+++ b/samples/charts/data-chart/type-financial-indicator-line/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-financial-ohlc-series/package.json b/samples/charts/data-chart/type-financial-ohlc-series/package.json
index 0f45508e9b..8d2a5f7b91 100644
--- a/samples/charts/data-chart/type-financial-ohlc-series/package.json
+++ b/samples/charts/data-chart/type-financial-ohlc-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-financial-overlays/package.json b/samples/charts/data-chart/type-financial-overlays/package.json
index 95678a5906..22794e4ac2 100644
--- a/samples/charts/data-chart/type-financial-overlays/package.json
+++ b/samples/charts/data-chart/type-financial-overlays/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-financial-series/package.json b/samples/charts/data-chart/type-financial-series/package.json
index 43564b6228..7f4c0853e8 100644
--- a/samples/charts/data-chart/type-financial-series/package.json
+++ b/samples/charts/data-chart/type-financial-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-range-area-series/package.json b/samples/charts/data-chart/type-range-area-series/package.json
index be5706caea..cc6a8fab30 100644
--- a/samples/charts/data-chart/type-range-area-series/package.json
+++ b/samples/charts/data-chart/type-range-area-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-range-column-series/package.json b/samples/charts/data-chart/type-range-column-series/package.json
index ded806da83..f7ac528fef 100644
--- a/samples/charts/data-chart/type-range-column-series/package.json
+++ b/samples/charts/data-chart/type-range-column-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-range-series/package.json b/samples/charts/data-chart/type-range-series/package.json
index 8e885549ba..faf2f31835 100644
--- a/samples/charts/data-chart/type-range-series/package.json
+++ b/samples/charts/data-chart/type-range-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-scatter-area-series/package.json b/samples/charts/data-chart/type-scatter-area-series/package.json
index dbb118a53f..ebb9754f31 100644
--- a/samples/charts/data-chart/type-scatter-area-series/package.json
+++ b/samples/charts/data-chart/type-scatter-area-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-scatter-bubble-series/package.json b/samples/charts/data-chart/type-scatter-bubble-series/package.json
index a8e534923d..9fecda8c0d 100644
--- a/samples/charts/data-chart/type-scatter-bubble-series/package.json
+++ b/samples/charts/data-chart/type-scatter-bubble-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-scatter-contour-series/package.json b/samples/charts/data-chart/type-scatter-contour-series/package.json
index c8e4b51222..3a591cbfe0 100644
--- a/samples/charts/data-chart/type-scatter-contour-series/package.json
+++ b/samples/charts/data-chart/type-scatter-contour-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-scatter-hd-series/package.json b/samples/charts/data-chart/type-scatter-hd-series/package.json
index 071000e0a1..521cae936d 100644
--- a/samples/charts/data-chart/type-scatter-hd-series/package.json
+++ b/samples/charts/data-chart/type-scatter-hd-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-scatter-polygon-series/package.json b/samples/charts/data-chart/type-scatter-polygon-series/package.json
index 3f3cb1a822..9a0385351d 100644
--- a/samples/charts/data-chart/type-scatter-polygon-series/package.json
+++ b/samples/charts/data-chart/type-scatter-polygon-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-scatter-polyline-series/package.json b/samples/charts/data-chart/type-scatter-polyline-series/package.json
index f4982ad971..57b59f26ee 100644
--- a/samples/charts/data-chart/type-scatter-polyline-series/package.json
+++ b/samples/charts/data-chart/type-scatter-polyline-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-scatter-series/package.json b/samples/charts/data-chart/type-scatter-series/package.json
index 023348173f..5e751d6692 100644
--- a/samples/charts/data-chart/type-scatter-series/package.json
+++ b/samples/charts/data-chart/type-scatter-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/type-scatter-series/src/index.ts b/samples/charts/data-chart/type-scatter-series/src/index.ts
index 27d1b71d84..9979e4691e 100644
--- a/samples/charts/data-chart/type-scatter-series/src/index.ts
+++ b/samples/charts/data-chart/type-scatter-series/src/index.ts
@@ -69,7 +69,7 @@ export class DataChartTypeScatterSeries {
             series1.xMemberPath = "Population";
             series1.yMemberPath = "GdpTotal";
             series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
-            
+
             const series2 = new IgcScatterSeriesComponent();
             series2.markerType = MarkerType.Circle;
             series2.showDefaultTooltip = true;
@@ -79,7 +79,7 @@ export class DataChartTypeScatterSeries {
             series2.xMemberPath = "Population";
             series2.yMemberPath = "GdpTotal";
             series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
-            
+
             this.chart.series.clear();
             this.chart.series.add(series1);
             this.chart.series.add(series2);
@@ -103,7 +103,7 @@ export class DataChartTypeScatterSeries {
             series2.xMemberPath = "Population";
             series2.yMemberPath = "GdpTotal";
             series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
-            
+
             this.chart.series.clear();
             this.chart.series.add(series1);
             this.chart.series.add(series2);
@@ -117,7 +117,7 @@ export class DataChartTypeScatterSeries {
             series1.xMemberPath = "Population";
             series1.yMemberPath = "GdpTotal";
             series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
-            
+
             const series2 = new IgcScatterSplineSeriesComponent();
             series2.markerType = MarkerType.Circle;
             series2.showDefaultTooltip = true;
@@ -127,7 +127,7 @@ export class DataChartTypeScatterSeries {
             series2.xMemberPath = "Population";
             series2.yMemberPath = "GdpTotal";
             series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
-            
+
             this.chart.series.clear();
             this.chart.series.add(series1);
             this.chart.series.add(series2);
diff --git a/samples/charts/data-chart/type-shape-series/package.json b/samples/charts/data-chart/type-shape-series/package.json
index 7f0034d8db..c9a12ea94a 100644
--- a/samples/charts/data-chart/type-shape-series/package.json
+++ b/samples/charts/data-chart/type-shape-series/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/waterfall-chart/package.json b/samples/charts/data-chart/waterfall-chart/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-chart/waterfall-chart/package.json
+++ b/samples/charts/data-chart/waterfall-chart/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-chart/waterfall-chart/sandbox.config.json b/samples/charts/data-chart/waterfall-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-chart/waterfall-chart/sandbox.config.json
+++ b/samples/charts/data-chart/waterfall-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-chart/waterfall-chart/src/index.css b/samples/charts/data-chart/waterfall-chart/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-chart/waterfall-chart/src/index.css
+++ b/samples/charts/data-chart/waterfall-chart/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-chart/waterfall-chart/src/index.ts b/samples/charts/data-chart/waterfall-chart/src/index.ts
index c40ffc1c5c..33a114da78 100644
--- a/samples/charts/data-chart/waterfall-chart/src/index.ts
+++ b/samples/charts/data-chart/waterfall-chart/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataChartCoreModule, IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcWaterfallSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CompanyIncomeDataItem, CompanyIncomeData } from './CompanyIncomeData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataChartCoreModule,
     IgcDataChartCategoryModule
@@ -37,7 +36,6 @@ export class Sample {
             waterfallSeries2.dataSource = this.companyIncomeData;
         }
         this._bind();
-
     }
 
     private _companyIncomeData: CompanyIncomeData = null;
diff --git a/samples/charts/data-chart/waterfall-chart/tsconfig.json b/samples/charts/data-chart/waterfall-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-chart/waterfall-chart/tsconfig.json
+++ b/samples/charts/data-chart/waterfall-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-chart/waterfall-chart/webpack.config.js b/samples/charts/data-chart/waterfall-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-chart/waterfall-chart/webpack.config.js
+++ b/samples/charts/data-chart/waterfall-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-pie-chart/animation/package.json b/samples/charts/data-pie-chart/animation/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-pie-chart/animation/package.json
+++ b/samples/charts/data-pie-chart/animation/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-pie-chart/animation/sandbox.config.json b/samples/charts/data-pie-chart/animation/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-pie-chart/animation/sandbox.config.json
+++ b/samples/charts/data-pie-chart/animation/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/animation/src/index.css b/samples/charts/data-pie-chart/animation/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-pie-chart/animation/src/index.css
+++ b/samples/charts/data-pie-chart/animation/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/animation/src/index.ts b/samples/charts/data-pie-chart/animation/src/index.ts
index 617c10eb3d..41e8506e5c 100644
--- a/samples/charts/data-pie-chart/animation/src/index.ts
+++ b/samples/charts/data-pie-chart/animation/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDe
 import { IgcPropertyEditorPanelComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -34,7 +34,6 @@ export class Sample {
             chart.dataSource = this.energyGlobalDemand;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/data-pie-chart/animation/tsconfig.json b/samples/charts/data-pie-chart/animation/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-pie-chart/animation/tsconfig.json
+++ b/samples/charts/data-pie-chart/animation/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-pie-chart/animation/webpack.config.js b/samples/charts/data-pie-chart/animation/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-pie-chart/animation/webpack.config.js
+++ b/samples/charts/data-pie-chart/animation/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-pie-chart/highlight-filter/package.json b/samples/charts/data-pie-chart/highlight-filter/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-pie-chart/highlight-filter/package.json
+++ b/samples/charts/data-pie-chart/highlight-filter/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-pie-chart/highlight-filter/sandbox.config.json b/samples/charts/data-pie-chart/highlight-filter/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-pie-chart/highlight-filter/sandbox.config.json
+++ b/samples/charts/data-pie-chart/highlight-filter/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/highlight-filter/src/index.css b/samples/charts/data-pie-chart/highlight-filter/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-pie-chart/highlight-filter/src/index.css
+++ b/samples/charts/data-pie-chart/highlight-filter/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/highlight-filter/src/index.ts b/samples/charts/data-pie-chart/highlight-filter/src/index.ts
index c019c51f05..6d817dc715 100644
--- a/samples/charts/data-pie-chart/highlight-filter/src/index.ts
+++ b/samples/charts/data-pie-chart/highlight-filter/src/index.ts
@@ -3,11 +3,10 @@ import { ComponentRenderer, DataPieChartDescriptionModule } from 'igniteui-webco
 import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
 import { OnlineTrafficHighlightTotalsItem, OnlineTrafficHighlightTotals } from './OnlineTrafficHighlightTotals';
 import { OnlineTrafficHighlightDesktopOnlyItem, OnlineTrafficHighlightDesktopOnly } from './OnlineTrafficHighlightDesktopOnly';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataPieChartModule
 );
@@ -25,7 +24,6 @@ export class Sample {
             chart.highlightedDataSource = this.onlineTrafficHighlightDesktopOnly;
         }
         this._bind();
-
     }
 
     private _onlineTrafficHighlightTotals: OnlineTrafficHighlightTotals = null;
diff --git a/samples/charts/data-pie-chart/highlight-filter/tsconfig.json b/samples/charts/data-pie-chart/highlight-filter/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-pie-chart/highlight-filter/tsconfig.json
+++ b/samples/charts/data-pie-chart/highlight-filter/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-pie-chart/highlight-filter/webpack.config.js b/samples/charts/data-pie-chart/highlight-filter/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-pie-chart/highlight-filter/webpack.config.js
+++ b/samples/charts/data-pie-chart/highlight-filter/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-pie-chart/highlighting/package.json b/samples/charts/data-pie-chart/highlighting/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-pie-chart/highlighting/package.json
+++ b/samples/charts/data-pie-chart/highlighting/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-pie-chart/highlighting/sandbox.config.json b/samples/charts/data-pie-chart/highlighting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-pie-chart/highlighting/sandbox.config.json
+++ b/samples/charts/data-pie-chart/highlighting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/highlighting/src/index.css b/samples/charts/data-pie-chart/highlighting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-pie-chart/highlighting/src/index.css
+++ b/samples/charts/data-pie-chart/highlighting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/highlighting/src/index.ts b/samples/charts/data-pie-chart/highlighting/src/index.ts
index 617c10eb3d..41e8506e5c 100644
--- a/samples/charts/data-pie-chart/highlighting/src/index.ts
+++ b/samples/charts/data-pie-chart/highlighting/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDe
 import { IgcPropertyEditorPanelComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -34,7 +34,6 @@ export class Sample {
             chart.dataSource = this.energyGlobalDemand;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/data-pie-chart/highlighting/tsconfig.json b/samples/charts/data-pie-chart/highlighting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-pie-chart/highlighting/tsconfig.json
+++ b/samples/charts/data-pie-chart/highlighting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-pie-chart/highlighting/webpack.config.js b/samples/charts/data-pie-chart/highlighting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-pie-chart/highlighting/webpack.config.js
+++ b/samples/charts/data-pie-chart/highlighting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-pie-chart/legend/package.json b/samples/charts/data-pie-chart/legend/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/data-pie-chart/legend/package.json
+++ b/samples/charts/data-pie-chart/legend/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-pie-chart/legend/sandbox.config.json b/samples/charts/data-pie-chart/legend/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-pie-chart/legend/sandbox.config.json
+++ b/samples/charts/data-pie-chart/legend/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/legend/src/index.css b/samples/charts/data-pie-chart/legend/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-pie-chart/legend/src/index.css
+++ b/samples/charts/data-pie-chart/legend/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/legend/src/index.ts b/samples/charts/data-pie-chart/legend/src/index.ts
index 856fa8af94..cc8daa8d04 100644
--- a/samples/charts/data-pie-chart/legend/src/index.ts
+++ b/samples/charts/data-pie-chart/legend/src/index.ts
@@ -3,11 +3,10 @@ import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponen
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcItemLegendComponent, IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule,
     IgcDataPieChartModule,
@@ -29,7 +28,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/data-pie-chart/legend/tsconfig.json b/samples/charts/data-pie-chart/legend/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-pie-chart/legend/tsconfig.json
+++ b/samples/charts/data-pie-chart/legend/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-pie-chart/legend/webpack.config.js b/samples/charts/data-pie-chart/legend/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-pie-chart/legend/webpack.config.js
+++ b/samples/charts/data-pie-chart/legend/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-pie-chart/others/package.json b/samples/charts/data-pie-chart/others/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-pie-chart/others/package.json
+++ b/samples/charts/data-pie-chart/others/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-pie-chart/others/sandbox.config.json b/samples/charts/data-pie-chart/others/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-pie-chart/others/sandbox.config.json
+++ b/samples/charts/data-pie-chart/others/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/others/src/index.css b/samples/charts/data-pie-chart/others/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-pie-chart/others/src/index.css
+++ b/samples/charts/data-pie-chart/others/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/others/src/index.ts b/samples/charts/data-pie-chart/others/src/index.ts
index 617c10eb3d..41e8506e5c 100644
--- a/samples/charts/data-pie-chart/others/src/index.ts
+++ b/samples/charts/data-pie-chart/others/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDe
 import { IgcPropertyEditorPanelComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -34,7 +34,6 @@ export class Sample {
             chart.dataSource = this.energyGlobalDemand;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/data-pie-chart/others/tsconfig.json b/samples/charts/data-pie-chart/others/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-pie-chart/others/tsconfig.json
+++ b/samples/charts/data-pie-chart/others/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-pie-chart/others/webpack.config.js b/samples/charts/data-pie-chart/others/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-pie-chart/others/webpack.config.js
+++ b/samples/charts/data-pie-chart/others/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-pie-chart/overview/package.json b/samples/charts/data-pie-chart/overview/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/data-pie-chart/overview/package.json
+++ b/samples/charts/data-pie-chart/overview/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-pie-chart/overview/sandbox.config.json b/samples/charts/data-pie-chart/overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-pie-chart/overview/sandbox.config.json
+++ b/samples/charts/data-pie-chart/overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/overview/src/index.css b/samples/charts/data-pie-chart/overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-pie-chart/overview/src/index.css
+++ b/samples/charts/data-pie-chart/overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/overview/src/index.ts b/samples/charts/data-pie-chart/overview/src/index.ts
index 1487c57533..f8106e4b05 100644
--- a/samples/charts/data-pie-chart/overview/src/index.ts
+++ b/samples/charts/data-pie-chart/overview/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcDataPieChartModule,
     IgcItemLegendModule
@@ -23,7 +22,6 @@ export class Sample {
             chart.dataSource = this.energyGlobalDemand;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/data-pie-chart/overview/tsconfig.json b/samples/charts/data-pie-chart/overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-pie-chart/overview/tsconfig.json
+++ b/samples/charts/data-pie-chart/overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-pie-chart/overview/webpack.config.js b/samples/charts/data-pie-chart/overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-pie-chart/overview/webpack.config.js
+++ b/samples/charts/data-pie-chart/overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/data-pie-chart/selection/package.json b/samples/charts/data-pie-chart/selection/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/data-pie-chart/selection/package.json
+++ b/samples/charts/data-pie-chart/selection/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/data-pie-chart/selection/sandbox.config.json b/samples/charts/data-pie-chart/selection/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/data-pie-chart/selection/sandbox.config.json
+++ b/samples/charts/data-pie-chart/selection/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/selection/src/index.css b/samples/charts/data-pie-chart/selection/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/data-pie-chart/selection/src/index.css
+++ b/samples/charts/data-pie-chart/selection/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/selection/src/index.ts b/samples/charts/data-pie-chart/selection/src/index.ts
index 617c10eb3d..41e8506e5c 100644
--- a/samples/charts/data-pie-chart/selection/src/index.ts
+++ b/samples/charts/data-pie-chart/selection/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDe
 import { IgcPropertyEditorPanelComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -34,7 +34,6 @@ export class Sample {
             chart.dataSource = this.energyGlobalDemand;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/data-pie-chart/selection/tsconfig.json b/samples/charts/data-pie-chart/selection/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/data-pie-chart/selection/tsconfig.json
+++ b/samples/charts/data-pie-chart/selection/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/data-pie-chart/selection/webpack.config.js b/samples/charts/data-pie-chart/selection/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/data-pie-chart/selection/webpack.config.js
+++ b/samples/charts/data-pie-chart/selection/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/doughnut-chart/animation/package.json b/samples/charts/doughnut-chart/animation/package.json
index 15be6f2453..ca76cd84cb 100644
--- a/samples/charts/doughnut-chart/animation/package.json
+++ b/samples/charts/doughnut-chart/animation/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/doughnut-chart/explosion/package.json b/samples/charts/doughnut-chart/explosion/package.json
index de630dd826..4851983f43 100644
--- a/samples/charts/doughnut-chart/explosion/package.json
+++ b/samples/charts/doughnut-chart/explosion/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/doughnut-chart/legend/package.json b/samples/charts/doughnut-chart/legend/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/doughnut-chart/legend/package.json
+++ b/samples/charts/doughnut-chart/legend/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/doughnut-chart/legend/sandbox.config.json b/samples/charts/doughnut-chart/legend/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/doughnut-chart/legend/sandbox.config.json
+++ b/samples/charts/doughnut-chart/legend/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/doughnut-chart/legend/src/index.css b/samples/charts/doughnut-chart/legend/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/doughnut-chart/legend/src/index.css
+++ b/samples/charts/doughnut-chart/legend/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/doughnut-chart/legend/src/index.ts b/samples/charts/doughnut-chart/legend/src/index.ts
index 3712184ee2..5fcf272c23 100644
--- a/samples/charts/doughnut-chart/legend/src/index.ts
+++ b/samples/charts/doughnut-chart/legend/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcItemLegendModule, IgcDoughnutChartModule } from 'igniteui-webcomponents-charts';
 import { IgcItemLegendComponent, IgcDoughnutChartComponent, IgcRingSeriesComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcItemLegendModule,
     IgcDoughnutChartModule
@@ -28,7 +27,6 @@ export class Sample {
             series.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/doughnut-chart/legend/tsconfig.json b/samples/charts/doughnut-chart/legend/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/doughnut-chart/legend/tsconfig.json
+++ b/samples/charts/doughnut-chart/legend/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/doughnut-chart/legend/webpack.config.js b/samples/charts/doughnut-chart/legend/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/doughnut-chart/legend/webpack.config.js
+++ b/samples/charts/doughnut-chart/legend/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/doughnut-chart/overview/package.json b/samples/charts/doughnut-chart/overview/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/doughnut-chart/overview/package.json
+++ b/samples/charts/doughnut-chart/overview/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/doughnut-chart/overview/sandbox.config.json b/samples/charts/doughnut-chart/overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/doughnut-chart/overview/sandbox.config.json
+++ b/samples/charts/doughnut-chart/overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/doughnut-chart/overview/src/index.css b/samples/charts/doughnut-chart/overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/doughnut-chart/overview/src/index.css
+++ b/samples/charts/doughnut-chart/overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/doughnut-chart/overview/src/index.ts b/samples/charts/doughnut-chart/overview/src/index.ts
index 9f01e5d811..62498f0423 100644
--- a/samples/charts/doughnut-chart/overview/src/index.ts
+++ b/samples/charts/doughnut-chart/overview/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcLegendModule, IgcDoughnutChartModule } from 'igniteui-webcomponents-charts';
 import { IgcDoughnutChartComponent, IgcRingSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CompanyMarketSharesItem, CompanyMarketShares } from './CompanyMarketShares';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDoughnutChartModule
@@ -25,7 +24,6 @@ export class Sample {
             series.dataSource = this.companyMarketShares;
         }
         this._bind();
-
     }
 
     private _companyMarketShares: CompanyMarketShares = null;
diff --git a/samples/charts/doughnut-chart/overview/tsconfig.json b/samples/charts/doughnut-chart/overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/doughnut-chart/overview/tsconfig.json
+++ b/samples/charts/doughnut-chart/overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/doughnut-chart/overview/webpack.config.js b/samples/charts/doughnut-chart/overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/doughnut-chart/overview/webpack.config.js
+++ b/samples/charts/doughnut-chart/overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/doughnut-chart/rings/package.json b/samples/charts/doughnut-chart/rings/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/doughnut-chart/rings/package.json
+++ b/samples/charts/doughnut-chart/rings/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/doughnut-chart/rings/sandbox.config.json b/samples/charts/doughnut-chart/rings/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/doughnut-chart/rings/sandbox.config.json
+++ b/samples/charts/doughnut-chart/rings/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/doughnut-chart/rings/src/index.css b/samples/charts/doughnut-chart/rings/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/doughnut-chart/rings/src/index.css
+++ b/samples/charts/doughnut-chart/rings/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/doughnut-chart/rings/src/index.ts b/samples/charts/doughnut-chart/rings/src/index.ts
index d19dab9e2f..dbc5355489 100644
--- a/samples/charts/doughnut-chart/rings/src/index.ts
+++ b/samples/charts/doughnut-chart/rings/src/index.ts
@@ -2,11 +2,10 @@ import { IgcLegendModule, IgcDoughnutChartModule } from 'igniteui-webcomponents-
 import { IgcDoughnutChartComponent, IgcRingSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CalendarSeasonsItem, CalendarSeasons } from './CalendarSeasons';
 import { CalendarMonthsItem, CalendarMonths } from './CalendarMonths';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcDoughnutChartModule
@@ -29,7 +28,6 @@ export class Sample {
             series2.dataSource = this.calendarMonths;
         }
         this._bind();
-
     }
 
     private _calendarSeasons: CalendarSeasons = null;
diff --git a/samples/charts/doughnut-chart/rings/tsconfig.json b/samples/charts/doughnut-chart/rings/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/doughnut-chart/rings/tsconfig.json
+++ b/samples/charts/doughnut-chart/rings/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/doughnut-chart/rings/webpack.config.js b/samples/charts/doughnut-chart/rings/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/doughnut-chart/rings/webpack.config.js
+++ b/samples/charts/doughnut-chart/rings/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/doughnut-chart/selection/package.json b/samples/charts/doughnut-chart/selection/package.json
index 52b8a35939..072a0ac6ba 100644
--- a/samples/charts/doughnut-chart/selection/package.json
+++ b/samples/charts/doughnut-chart/selection/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/annotations/package.json b/samples/charts/financial-chart/annotations/package.json
index ff4ff27c20..536d69e4fb 100644
--- a/samples/charts/financial-chart/annotations/package.json
+++ b/samples/charts/financial-chart/annotations/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/axis-types/package.json b/samples/charts/financial-chart/axis-types/package.json
index db97378c75..76b52fa3cb 100644
--- a/samples/charts/financial-chart/axis-types/package.json
+++ b/samples/charts/financial-chart/axis-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/package.json b/samples/charts/financial-chart/data-legend-formatting-currency/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/package.json
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/sandbox.config.json b/samples/charts/financial-chart/data-legend-formatting-currency/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/sandbox.config.json
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/src/index.css b/samples/charts/financial-chart/data-legend-formatting-currency/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/src/index.css
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/src/index.ts b/samples/charts/financial-chart/data-legend-formatting-currency/src/index.ts
index c939de576a..03bb8e28e7 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/src/index.ts
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcDataLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcDataLegendComponent, IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
 import { MultipleStocks } from './MultipleStocks';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcFinancialChartModule,
     IgcDataChartInteractivityModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.dataSource = this.multipleStocks;
         }
         this._bind();
-
     }
 
     private _multipleStocks: MultipleStocks = null;
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/tsconfig.json b/samples/charts/financial-chart/data-legend-formatting-currency/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/tsconfig.json
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/webpack.config.js b/samples/charts/financial-chart/data-legend-formatting-currency/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/webpack.config.js
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/financial-chart/data-legend-styling-props/package.json b/samples/charts/financial-chart/data-legend-styling-props/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/package.json
+++ b/samples/charts/financial-chart/data-legend-styling-props/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/data-legend-styling-props/sandbox.config.json b/samples/charts/financial-chart/data-legend-styling-props/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/sandbox.config.json
+++ b/samples/charts/financial-chart/data-legend-styling-props/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-legend-styling-props/src/index.css b/samples/charts/financial-chart/data-legend-styling-props/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/src/index.css
+++ b/samples/charts/financial-chart/data-legend-styling-props/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-legend-styling-props/src/index.ts b/samples/charts/financial-chart/data-legend-styling-props/src/index.ts
index 920e2b95fd..ec110c6917 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/src/index.ts
+++ b/samples/charts/financial-chart/data-legend-styling-props/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcDataLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcDataLegendComponent, IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
 import { StockGoogleItem, StockGoogle } from './StockGoogle';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcFinancialChartModule,
     IgcDataChartInteractivityModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.dataSource = this.stockGoogle;
         }
         this._bind();
-
     }
 
     private _stockGoogle: StockGoogle = null;
diff --git a/samples/charts/financial-chart/data-legend-styling-props/tsconfig.json b/samples/charts/financial-chart/data-legend-styling-props/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/tsconfig.json
+++ b/samples/charts/financial-chart/data-legend-styling-props/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/financial-chart/data-legend-styling-props/webpack.config.js b/samples/charts/financial-chart/data-legend-styling-props/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/webpack.config.js
+++ b/samples/charts/financial-chart/data-legend-styling-props/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/financial-chart/data-legend/package.json b/samples/charts/financial-chart/data-legend/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/financial-chart/data-legend/package.json
+++ b/samples/charts/financial-chart/data-legend/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/data-legend/sandbox.config.json b/samples/charts/financial-chart/data-legend/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/financial-chart/data-legend/sandbox.config.json
+++ b/samples/charts/financial-chart/data-legend/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-legend/src/index.css b/samples/charts/financial-chart/data-legend/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/financial-chart/data-legend/src/index.css
+++ b/samples/charts/financial-chart/data-legend/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-legend/src/index.ts b/samples/charts/financial-chart/data-legend/src/index.ts
index c939de576a..03bb8e28e7 100644
--- a/samples/charts/financial-chart/data-legend/src/index.ts
+++ b/samples/charts/financial-chart/data-legend/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcDataLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcDataLegendComponent, IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
 import { MultipleStocks } from './MultipleStocks';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcFinancialChartModule,
     IgcDataChartInteractivityModule,
@@ -27,7 +26,6 @@ export class Sample {
             chart.dataSource = this.multipleStocks;
         }
         this._bind();
-
     }
 
     private _multipleStocks: MultipleStocks = null;
diff --git a/samples/charts/financial-chart/data-legend/tsconfig.json b/samples/charts/financial-chart/data-legend/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/financial-chart/data-legend/tsconfig.json
+++ b/samples/charts/financial-chart/data-legend/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/financial-chart/data-legend/webpack.config.js b/samples/charts/financial-chart/data-legend/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/financial-chart/data-legend/webpack.config.js
+++ b/samples/charts/financial-chart/data-legend/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json b/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/sandbox.config.json b/samples/charts/financial-chart/data-tooltip-formatting-currency/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/sandbox.config.json
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/src/index.css b/samples/charts/financial-chart/data-tooltip-formatting-currency/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/src/index.css
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/src/index.ts b/samples/charts/financial-chart/data-tooltip-formatting-currency/src/index.ts
index 5bd5ec0302..ac6956c487 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/src/index.ts
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
 import { MultipleStocks } from './MultipleStocks';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcFinancialChartModule,
     IgcDataChartInteractivityModule,
@@ -24,7 +23,6 @@ export class Sample {
             chart.dataSource = this.multipleStocks;
         }
         this._bind();
-
     }
 
     private _multipleStocks: MultipleStocks = null;
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/tsconfig.json b/samples/charts/financial-chart/data-tooltip-formatting-currency/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/tsconfig.json
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/webpack.config.js b/samples/charts/financial-chart/data-tooltip-formatting-currency/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/webpack.config.js
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/package.json b/samples/charts/financial-chart/data-tooltip-styling-props/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/package.json
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/sandbox.config.json b/samples/charts/financial-chart/data-tooltip-styling-props/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/sandbox.config.json
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/src/index.css b/samples/charts/financial-chart/data-tooltip-styling-props/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/src/index.css
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/src/index.ts b/samples/charts/financial-chart/data-tooltip-styling-props/src/index.ts
index 869daf4f7d..f36deb72d2 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/src/index.ts
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcDataLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
 import { StockGoogleItem, StockGoogle } from './StockGoogle';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcFinancialChartModule,
     IgcDataChartInteractivityModule,
@@ -24,7 +23,6 @@ export class Sample {
             chart.dataSource = this.stockGoogle;
         }
         this._bind();
-
     }
 
     private _stockGoogle: StockGoogle = null;
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/tsconfig.json b/samples/charts/financial-chart/data-tooltip-styling-props/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/tsconfig.json
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/webpack.config.js b/samples/charts/financial-chart/data-tooltip-styling-props/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/webpack.config.js
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/financial-chart/data-tooltip/package.json b/samples/charts/financial-chart/data-tooltip/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/financial-chart/data-tooltip/package.json
+++ b/samples/charts/financial-chart/data-tooltip/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/data-tooltip/sandbox.config.json b/samples/charts/financial-chart/data-tooltip/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/financial-chart/data-tooltip/sandbox.config.json
+++ b/samples/charts/financial-chart/data-tooltip/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-tooltip/src/index.css b/samples/charts/financial-chart/data-tooltip/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/financial-chart/data-tooltip/src/index.css
+++ b/samples/charts/financial-chart/data-tooltip/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/financial-chart/data-tooltip/src/index.ts b/samples/charts/financial-chart/data-tooltip/src/index.ts
index d4cfc299a2..976f69753e 100644
--- a/samples/charts/financial-chart/data-tooltip/src/index.ts
+++ b/samples/charts/financial-chart/data-tooltip/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcDataLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
 import { MultipleStocks } from './MultipleStocks';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcFinancialChartModule,
     IgcDataChartInteractivityModule,
@@ -24,7 +23,6 @@ export class Sample {
             chart.dataSource = this.multipleStocks;
         }
         this._bind();
-
     }
 
     private _multipleStocks: MultipleStocks = null;
diff --git a/samples/charts/financial-chart/data-tooltip/tsconfig.json b/samples/charts/financial-chart/data-tooltip/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/financial-chart/data-tooltip/tsconfig.json
+++ b/samples/charts/financial-chart/data-tooltip/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/financial-chart/data-tooltip/webpack.config.js b/samples/charts/financial-chart/data-tooltip/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/financial-chart/data-tooltip/webpack.config.js
+++ b/samples/charts/financial-chart/data-tooltip/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/financial-chart/format-specifiers/package.json b/samples/charts/financial-chart/format-specifiers/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/financial-chart/format-specifiers/package.json
+++ b/samples/charts/financial-chart/format-specifiers/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/format-specifiers/sandbox.config.json b/samples/charts/financial-chart/format-specifiers/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/financial-chart/format-specifiers/sandbox.config.json
+++ b/samples/charts/financial-chart/format-specifiers/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/financial-chart/format-specifiers/src/index.css b/samples/charts/financial-chart/format-specifiers/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/financial-chart/format-specifiers/src/index.css
+++ b/samples/charts/financial-chart/format-specifiers/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/financial-chart/format-specifiers/src/index.ts b/samples/charts/financial-chart/format-specifiers/src/index.ts
index 5c33a53fdf..6ec5fa8f59 100644
--- a/samples/charts/financial-chart/format-specifiers/src/index.ts
+++ b/samples/charts/financial-chart/format-specifiers/src/index.ts
@@ -3,11 +3,10 @@ import { IgcNumberFormatSpecifierModule, IgcDateTimeFormatSpecifierModule } from
 import { IgcDataLegendComponent, IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcNumberFormatSpecifier, IgcDateTimeFormatSpecifier } from 'igniteui-webcomponents-core';
 import { MultipleStocks } from './MultipleStocks';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcFinancialChartModule,
     IgcDataChartInteractivityModule,
@@ -36,6 +35,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier1;
     }
+
     private chart: IgcFinancialChartComponent
     private _numberFormatSpecifier3: IgcNumberFormatSpecifier[] | null = null;
     public get numberFormatSpecifier3(): IgcNumberFormatSpecifier[] {
@@ -54,6 +54,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier3;
     }
+
     private _numberFormatSpecifier5: IgcNumberFormatSpecifier[] | null = null;
     public get numberFormatSpecifier5(): IgcNumberFormatSpecifier[] {
         if (this._numberFormatSpecifier5 == null)
@@ -70,6 +71,7 @@ export class Sample {
         }
         return this._numberFormatSpecifier5;
     }
+
     private _dateTimeFormatSpecifier1: IgcDateTimeFormatSpecifier[] | null = null;
     public get dateTimeFormatSpecifier1(): IgcDateTimeFormatSpecifier[] {
         if (this._dateTimeFormatSpecifier1 == null)
@@ -84,6 +86,7 @@ export class Sample {
         }
         return this._dateTimeFormatSpecifier1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -99,7 +102,6 @@ export class Sample {
             chart.xAxisLabelFormatSpecifiers = this.dateTimeFormatSpecifier1;
         }
         this._bind();
-
     }
 
     private _multipleStocks: MultipleStocks = null;
diff --git a/samples/charts/financial-chart/format-specifiers/tsconfig.json b/samples/charts/financial-chart/format-specifiers/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/financial-chart/format-specifiers/tsconfig.json
+++ b/samples/charts/financial-chart/format-specifiers/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/financial-chart/format-specifiers/webpack.config.js b/samples/charts/financial-chart/format-specifiers/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/financial-chart/format-specifiers/webpack.config.js
+++ b/samples/charts/financial-chart/format-specifiers/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/financial-chart/high-frequency/package.json b/samples/charts/financial-chart/high-frequency/package.json
index 0eaf7fa536..6d6dba8f71 100644
--- a/samples/charts/financial-chart/high-frequency/package.json
+++ b/samples/charts/financial-chart/high-frequency/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/high-volume/package.json b/samples/charts/financial-chart/high-volume/package.json
index b65d79a6c7..bb34226de2 100644
--- a/samples/charts/financial-chart/high-volume/package.json
+++ b/samples/charts/financial-chart/high-volume/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/indicator-customization/package.json b/samples/charts/financial-chart/indicator-customization/package.json
index 252110bd49..12d1f82bb3 100644
--- a/samples/charts/financial-chart/indicator-customization/package.json
+++ b/samples/charts/financial-chart/indicator-customization/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/indicator-types/package.json b/samples/charts/financial-chart/indicator-types/package.json
index 7a492096a4..df02449496 100644
--- a/samples/charts/financial-chart/indicator-types/package.json
+++ b/samples/charts/financial-chart/indicator-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/multiple-data/package.json b/samples/charts/financial-chart/multiple-data/package.json
index 95c10777f6..c5d798f83b 100644
--- a/samples/charts/financial-chart/multiple-data/package.json
+++ b/samples/charts/financial-chart/multiple-data/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/overview/package.json b/samples/charts/financial-chart/overview/package.json
index f09ce308c5..872454dccf 100644
--- a/samples/charts/financial-chart/overview/package.json
+++ b/samples/charts/financial-chart/overview/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/panes/package.json b/samples/charts/financial-chart/panes/package.json
index 363d3e8994..29e7f00a1a 100644
--- a/samples/charts/financial-chart/panes/package.json
+++ b/samples/charts/financial-chart/panes/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/panes/src/index.ts b/samples/charts/financial-chart/panes/src/index.ts
index c47149d6dd..4746db8b7e 100644
--- a/samples/charts/financial-chart/panes/src/index.ts
+++ b/samples/charts/financial-chart/panes/src/index.ts
@@ -4,7 +4,6 @@ import { FinancialChartVolumeType } from "igniteui-webcomponents-charts";
 import { FinancialChartType } from "igniteui-webcomponents-charts";
 import { FinancialChartZoomSliderType } from "igniteui-webcomponents-charts";
 import { FinancialIndicatorType } from "igniteui-webcomponents-charts";
-
 import { ModuleManager } from "igniteui-webcomponents-core";
 import { StocksUtility } from "./StocksUtility";
 
diff --git a/samples/charts/financial-chart/performance/package.json b/samples/charts/financial-chart/performance/package.json
index c63ad2b06e..95d2434c69 100644
--- a/samples/charts/financial-chart/performance/package.json
+++ b/samples/charts/financial-chart/performance/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/scrollbars/package.json b/samples/charts/financial-chart/scrollbars/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/financial-chart/scrollbars/package.json
+++ b/samples/charts/financial-chart/scrollbars/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/scrollbars/sandbox.config.json b/samples/charts/financial-chart/scrollbars/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/financial-chart/scrollbars/sandbox.config.json
+++ b/samples/charts/financial-chart/scrollbars/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/financial-chart/scrollbars/src/index.css b/samples/charts/financial-chart/scrollbars/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/financial-chart/scrollbars/src/index.css
+++ b/samples/charts/financial-chart/scrollbars/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/financial-chart/scrollbars/src/index.ts b/samples/charts/financial-chart/scrollbars/src/index.ts
index 5bd5ec0302..ac6956c487 100644
--- a/samples/charts/financial-chart/scrollbars/src/index.ts
+++ b/samples/charts/financial-chart/scrollbars/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
 import { MultipleStocks } from './MultipleStocks';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcFinancialChartModule,
     IgcDataChartInteractivityModule,
@@ -24,7 +23,6 @@ export class Sample {
             chart.dataSource = this.multipleStocks;
         }
         this._bind();
-
     }
 
     private _multipleStocks: MultipleStocks = null;
diff --git a/samples/charts/financial-chart/scrollbars/tsconfig.json b/samples/charts/financial-chart/scrollbars/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/financial-chart/scrollbars/tsconfig.json
+++ b/samples/charts/financial-chart/scrollbars/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/financial-chart/scrollbars/webpack.config.js b/samples/charts/financial-chart/scrollbars/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/financial-chart/scrollbars/webpack.config.js
+++ b/samples/charts/financial-chart/scrollbars/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/financial-chart/stock-index-chart/package.json b/samples/charts/financial-chart/stock-index-chart/package.json
index 41e4d10623..999942c5e6 100644
--- a/samples/charts/financial-chart/stock-index-chart/package.json
+++ b/samples/charts/financial-chart/stock-index-chart/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/styling/package.json b/samples/charts/financial-chart/styling/package.json
index c81f29d85b..2d43725d8a 100644
--- a/samples/charts/financial-chart/styling/package.json
+++ b/samples/charts/financial-chart/styling/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/titles/package.json b/samples/charts/financial-chart/titles/package.json
index 91113c48da..d9aaffc234 100644
--- a/samples/charts/financial-chart/titles/package.json
+++ b/samples/charts/financial-chart/titles/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/titles/src/index.ts b/samples/charts/financial-chart/titles/src/index.ts
index 847bc0fd19..43fab37d2f 100644
--- a/samples/charts/financial-chart/titles/src/index.ts
+++ b/samples/charts/financial-chart/titles/src/index.ts
@@ -12,7 +12,7 @@ export class FinancialChartTitles {
     constructor() {
 
         this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
-    
+
         StocksHistory.getAmazonStock().then((stocks: any[]) => {
             this.chart.dataSource = stocks;
         });
diff --git a/samples/charts/financial-chart/tooltip-types/package.json b/samples/charts/financial-chart/tooltip-types/package.json
index aed3033f14..97b7c88c9c 100644
--- a/samples/charts/financial-chart/tooltip-types/package.json
+++ b/samples/charts/financial-chart/tooltip-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/tooltip-types/src/index.ts b/samples/charts/financial-chart/tooltip-types/src/index.ts
index 3225a2f999..6d6147908f 100644
--- a/samples/charts/financial-chart/tooltip-types/src/index.ts
+++ b/samples/charts/financial-chart/tooltip-types/src/index.ts
@@ -16,7 +16,7 @@ export class FinancialChartTooltipTypes {
         this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
         this.chart.yAxisMode = FinancialChartYAxisMode.PercentChange;
         this.chart.toolTipType = this.toolTipType;
-        
+
         let toolTipSelect = <HTMLSelectElement>document.getElementById('toolTipSelect');
         toolTipSelect!.addEventListener('change', this.onToolTipTypeChanged);
         toolTipSelect!.value = "Item";
diff --git a/samples/charts/financial-chart/trendlines/package.json b/samples/charts/financial-chart/trendlines/package.json
index 5e1d68587e..19911b48c7 100644
--- a/samples/charts/financial-chart/trendlines/package.json
+++ b/samples/charts/financial-chart/trendlines/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/financial-chart/volume-types/package.json b/samples/charts/financial-chart/volume-types/package.json
index 2094244bbb..72cfa8773c 100644
--- a/samples/charts/financial-chart/volume-types/package.json
+++ b/samples/charts/financial-chart/volume-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/pie-chart/animation/package.json b/samples/charts/pie-chart/animation/package.json
index 659ae76a1e..dcf3958fdb 100644
--- a/samples/charts/pie-chart/animation/package.json
+++ b/samples/charts/pie-chart/animation/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/pie-chart/explosion/package.json b/samples/charts/pie-chart/explosion/package.json
index 4438e1c932..e9dedae9d3 100644
--- a/samples/charts/pie-chart/explosion/package.json
+++ b/samples/charts/pie-chart/explosion/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/pie-chart/legend/package.json b/samples/charts/pie-chart/legend/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/pie-chart/legend/package.json
+++ b/samples/charts/pie-chart/legend/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/pie-chart/legend/sandbox.config.json b/samples/charts/pie-chart/legend/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/pie-chart/legend/sandbox.config.json
+++ b/samples/charts/pie-chart/legend/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/pie-chart/legend/src/index.css b/samples/charts/pie-chart/legend/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/pie-chart/legend/src/index.css
+++ b/samples/charts/pie-chart/legend/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/pie-chart/legend/src/index.ts b/samples/charts/pie-chart/legend/src/index.ts
index 542c0a0e66..d567740d14 100644
--- a/samples/charts/pie-chart/legend/src/index.ts
+++ b/samples/charts/pie-chart/legend/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcItemLegendModule, IgcPieChartModule } from 'igniteui-webcomponents-charts';
 import { IgcItemLegendComponent, IgcPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcItemLegendModule,
     IgcPieChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/pie-chart/legend/tsconfig.json b/samples/charts/pie-chart/legend/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/pie-chart/legend/tsconfig.json
+++ b/samples/charts/pie-chart/legend/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/pie-chart/legend/webpack.config.js b/samples/charts/pie-chart/legend/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/pie-chart/legend/webpack.config.js
+++ b/samples/charts/pie-chart/legend/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/pie-chart/others/package.json b/samples/charts/pie-chart/others/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/pie-chart/others/package.json
+++ b/samples/charts/pie-chart/others/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/pie-chart/others/sandbox.config.json b/samples/charts/pie-chart/others/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/pie-chart/others/sandbox.config.json
+++ b/samples/charts/pie-chart/others/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/pie-chart/others/src/index.css b/samples/charts/pie-chart/others/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/pie-chart/others/src/index.css
+++ b/samples/charts/pie-chart/others/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/pie-chart/others/src/index.ts b/samples/charts/pie-chart/others/src/index.ts
index 542c0a0e66..d567740d14 100644
--- a/samples/charts/pie-chart/others/src/index.ts
+++ b/samples/charts/pie-chart/others/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcItemLegendModule, IgcPieChartModule } from 'igniteui-webcomponents-charts';
 import { IgcItemLegendComponent, IgcPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcItemLegendModule,
     IgcPieChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/pie-chart/others/tsconfig.json b/samples/charts/pie-chart/others/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/pie-chart/others/tsconfig.json
+++ b/samples/charts/pie-chart/others/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/pie-chart/others/webpack.config.js b/samples/charts/pie-chart/others/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/pie-chart/others/webpack.config.js
+++ b/samples/charts/pie-chart/others/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/pie-chart/overview/package.json b/samples/charts/pie-chart/overview/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/pie-chart/overview/package.json
+++ b/samples/charts/pie-chart/overview/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/pie-chart/overview/sandbox.config.json b/samples/charts/pie-chart/overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/pie-chart/overview/sandbox.config.json
+++ b/samples/charts/pie-chart/overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/pie-chart/overview/src/index.css b/samples/charts/pie-chart/overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/pie-chart/overview/src/index.css
+++ b/samples/charts/pie-chart/overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/pie-chart/overview/src/index.ts b/samples/charts/pie-chart/overview/src/index.ts
index 542c0a0e66..d567740d14 100644
--- a/samples/charts/pie-chart/overview/src/index.ts
+++ b/samples/charts/pie-chart/overview/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcItemLegendModule, IgcPieChartModule } from 'igniteui-webcomponents-charts';
 import { IgcItemLegendComponent, IgcPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcItemLegendModule,
     IgcPieChartModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/pie-chart/overview/tsconfig.json b/samples/charts/pie-chart/overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/pie-chart/overview/tsconfig.json
+++ b/samples/charts/pie-chart/overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/pie-chart/overview/webpack.config.js b/samples/charts/pie-chart/overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/pie-chart/overview/webpack.config.js
+++ b/samples/charts/pie-chart/overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/pie-chart/selection/package.json b/samples/charts/pie-chart/selection/package.json
index fe770cdbce..07aa7ee1ff 100644
--- a/samples/charts/pie-chart/selection/package.json
+++ b/samples/charts/pie-chart/selection/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/pie-chart/styling/package.json b/samples/charts/pie-chart/styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/pie-chart/styling/package.json
+++ b/samples/charts/pie-chart/styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/pie-chart/styling/sandbox.config.json b/samples/charts/pie-chart/styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/pie-chart/styling/sandbox.config.json
+++ b/samples/charts/pie-chart/styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/pie-chart/styling/src/index.css b/samples/charts/pie-chart/styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/pie-chart/styling/src/index.css
+++ b/samples/charts/pie-chart/styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/pie-chart/styling/src/index.ts b/samples/charts/pie-chart/styling/src/index.ts
index 07a95b168a..f006471983 100644
--- a/samples/charts/pie-chart/styling/src/index.ts
+++ b/samples/charts/pie-chart/styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcItemLegendComponent, IgcPieChartComponent } from 'igniteui-webcomponents-charts';
 import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcPieChartModule,
     IgcItemLegendModule
@@ -26,7 +25,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _energyGlobalDemand: EnergyGlobalDemand = null;
diff --git a/samples/charts/pie-chart/styling/tsconfig.json b/samples/charts/pie-chart/styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/pie-chart/styling/tsconfig.json
+++ b/samples/charts/pie-chart/styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/pie-chart/styling/webpack.config.js b/samples/charts/pie-chart/styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/pie-chart/styling/webpack.config.js
+++ b/samples/charts/pie-chart/styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/sparkline/display-area/package.json b/samples/charts/sparkline/display-area/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/sparkline/display-area/package.json
+++ b/samples/charts/sparkline/display-area/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/display-area/sandbox.config.json b/samples/charts/sparkline/display-area/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/sparkline/display-area/sandbox.config.json
+++ b/samples/charts/sparkline/display-area/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/sparkline/display-area/src/index.css b/samples/charts/sparkline/display-area/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/sparkline/display-area/src/index.css
+++ b/samples/charts/sparkline/display-area/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/sparkline/display-area/src/index.ts b/samples/charts/sparkline/display-area/src/index.ts
index 9c1fe4cbaf..0e25ce14bd 100644
--- a/samples/charts/sparkline/display-area/src/index.ts
+++ b/samples/charts/sparkline/display-area/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
 import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
 import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcSparklineModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.sparklineMixedData;
         }
         this._bind();
-
     }
 
     private _sparklineMixedData: SparklineMixedData = null;
diff --git a/samples/charts/sparkline/display-area/tsconfig.json b/samples/charts/sparkline/display-area/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/sparkline/display-area/tsconfig.json
+++ b/samples/charts/sparkline/display-area/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/sparkline/display-area/webpack.config.js b/samples/charts/sparkline/display-area/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/sparkline/display-area/webpack.config.js
+++ b/samples/charts/sparkline/display-area/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/sparkline/display-column/package.json b/samples/charts/sparkline/display-column/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/sparkline/display-column/package.json
+++ b/samples/charts/sparkline/display-column/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/display-column/sandbox.config.json b/samples/charts/sparkline/display-column/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/sparkline/display-column/sandbox.config.json
+++ b/samples/charts/sparkline/display-column/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/sparkline/display-column/src/index.css b/samples/charts/sparkline/display-column/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/sparkline/display-column/src/index.css
+++ b/samples/charts/sparkline/display-column/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/sparkline/display-column/src/index.ts b/samples/charts/sparkline/display-column/src/index.ts
index 9c1fe4cbaf..0e25ce14bd 100644
--- a/samples/charts/sparkline/display-column/src/index.ts
+++ b/samples/charts/sparkline/display-column/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
 import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
 import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcSparklineModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.sparklineMixedData;
         }
         this._bind();
-
     }
 
     private _sparklineMixedData: SparklineMixedData = null;
diff --git a/samples/charts/sparkline/display-column/tsconfig.json b/samples/charts/sparkline/display-column/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/sparkline/display-column/tsconfig.json
+++ b/samples/charts/sparkline/display-column/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/sparkline/display-column/webpack.config.js b/samples/charts/sparkline/display-column/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/sparkline/display-column/webpack.config.js
+++ b/samples/charts/sparkline/display-column/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/sparkline/display-lines/package.json b/samples/charts/sparkline/display-lines/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/sparkline/display-lines/package.json
+++ b/samples/charts/sparkline/display-lines/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/display-lines/sandbox.config.json b/samples/charts/sparkline/display-lines/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/sparkline/display-lines/sandbox.config.json
+++ b/samples/charts/sparkline/display-lines/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/sparkline/display-lines/src/index.css b/samples/charts/sparkline/display-lines/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/sparkline/display-lines/src/index.css
+++ b/samples/charts/sparkline/display-lines/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/sparkline/display-lines/src/index.ts b/samples/charts/sparkline/display-lines/src/index.ts
index 94a935f036..b2f8e31a8f 100644
--- a/samples/charts/sparkline/display-lines/src/index.ts
+++ b/samples/charts/sparkline/display-lines/src/index.ts
@@ -3,11 +3,10 @@ import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
 import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule,
     IgcSparklineModule
@@ -25,7 +24,6 @@ export class Sample {
             chart.dataSource = this.sparklineMixedData;
         }
         this._bind();
-
     }
 
     private _sparklineMixedData: SparklineMixedData = null;
diff --git a/samples/charts/sparkline/display-lines/tsconfig.json b/samples/charts/sparkline/display-lines/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/sparkline/display-lines/tsconfig.json
+++ b/samples/charts/sparkline/display-lines/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/sparkline/display-lines/webpack.config.js b/samples/charts/sparkline/display-lines/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/sparkline/display-lines/webpack.config.js
+++ b/samples/charts/sparkline/display-lines/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/sparkline/display-types/package.json b/samples/charts/sparkline/display-types/package.json
index dba387c55d..25cb670c58 100644
--- a/samples/charts/sparkline/display-types/package.json
+++ b/samples/charts/sparkline/display-types/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/display-winloss/package.json b/samples/charts/sparkline/display-winloss/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/sparkline/display-winloss/package.json
+++ b/samples/charts/sparkline/display-winloss/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/display-winloss/sandbox.config.json b/samples/charts/sparkline/display-winloss/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/sparkline/display-winloss/sandbox.config.json
+++ b/samples/charts/sparkline/display-winloss/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/sparkline/display-winloss/src/index.css b/samples/charts/sparkline/display-winloss/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/sparkline/display-winloss/src/index.css
+++ b/samples/charts/sparkline/display-winloss/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/sparkline/display-winloss/src/index.ts b/samples/charts/sparkline/display-winloss/src/index.ts
index 9c1fe4cbaf..0e25ce14bd 100644
--- a/samples/charts/sparkline/display-winloss/src/index.ts
+++ b/samples/charts/sparkline/display-winloss/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
 import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
 import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcSparklineModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             chart.dataSource = this.sparklineMixedData;
         }
         this._bind();
-
     }
 
     private _sparklineMixedData: SparklineMixedData = null;
diff --git a/samples/charts/sparkline/display-winloss/tsconfig.json b/samples/charts/sparkline/display-winloss/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/sparkline/display-winloss/tsconfig.json
+++ b/samples/charts/sparkline/display-winloss/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/sparkline/display-winloss/webpack.config.js b/samples/charts/sparkline/display-winloss/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/sparkline/display-winloss/webpack.config.js
+++ b/samples/charts/sparkline/display-winloss/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/sparkline/grid/package.json b/samples/charts/sparkline/grid/package.json
index 2f71c58d09..a1ee2c4ee8 100644
--- a/samples/charts/sparkline/grid/package.json
+++ b/samples/charts/sparkline/grid/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/grid/src/index.ts b/samples/charts/sparkline/grid/src/index.ts
index e9792fd65e..09270ef9d2 100644
--- a/samples/charts/sparkline/grid/src/index.ts
+++ b/samples/charts/sparkline/grid/src/index.ts
@@ -24,7 +24,7 @@ export class SparklineGrid {
         this.data = Products.getData();
 
         this.onUpdatingHistoryColumn = this.onUpdatingHistoryColumn.bind(this);
-        
+
         this.grid = document.getElementById('grid') as IgcDataGridComponent;
         this.grid.dataSource = this.data;
 
@@ -45,7 +45,7 @@ export class SparklineGrid {
             chart.labelMemberPath = 'Week';
             chart.displayType = SparklineDisplayType.Line;
             chart.brush = 'rgb(21, 190, 6)';
-            
+
             let container = document.createElement("div") as HTMLDivElement;
             container.style.width = "100%";
             container.style.height = "70px";
diff --git a/samples/charts/sparkline/markers/package.json b/samples/charts/sparkline/markers/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/sparkline/markers/package.json
+++ b/samples/charts/sparkline/markers/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/markers/sandbox.config.json b/samples/charts/sparkline/markers/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/sparkline/markers/sandbox.config.json
+++ b/samples/charts/sparkline/markers/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/sparkline/markers/src/index.css b/samples/charts/sparkline/markers/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/sparkline/markers/src/index.css
+++ b/samples/charts/sparkline/markers/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/sparkline/markers/src/index.ts b/samples/charts/sparkline/markers/src/index.ts
index 64fedadef4..14983317ae 100644
--- a/samples/charts/sparkline/markers/src/index.ts
+++ b/samples/charts/sparkline/markers/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescr
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
 import { SparklineProfitDataItem, SparklineProfitData } from './SparklineProfitData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -45,7 +45,6 @@ export class Sample {
             chart.dataSource = this.sparklineProfitData;
         }
         this._bind();
-
     }
 
     private _sparklineProfitData: SparklineProfitData = null;
diff --git a/samples/charts/sparkline/markers/tsconfig.json b/samples/charts/sparkline/markers/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/sparkline/markers/tsconfig.json
+++ b/samples/charts/sparkline/markers/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/sparkline/markers/webpack.config.js b/samples/charts/sparkline/markers/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/sparkline/markers/webpack.config.js
+++ b/samples/charts/sparkline/markers/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/sparkline/normal-range/package.json b/samples/charts/sparkline/normal-range/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/sparkline/normal-range/package.json
+++ b/samples/charts/sparkline/normal-range/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/normal-range/sandbox.config.json b/samples/charts/sparkline/normal-range/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/sparkline/normal-range/sandbox.config.json
+++ b/samples/charts/sparkline/normal-range/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/sparkline/normal-range/src/index.css b/samples/charts/sparkline/normal-range/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/sparkline/normal-range/src/index.css
+++ b/samples/charts/sparkline/normal-range/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/sparkline/normal-range/src/index.ts b/samples/charts/sparkline/normal-range/src/index.ts
index 1fa66fb5c4..80d153c2d6 100644
--- a/samples/charts/sparkline/normal-range/src/index.ts
+++ b/samples/charts/sparkline/normal-range/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescr
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
 import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -39,7 +39,6 @@ export class Sample {
             chart.dataSource = this.sparklineMixedData;
         }
         this._bind();
-
     }
 
     private _sparklineMixedData: SparklineMixedData = null;
diff --git a/samples/charts/sparkline/normal-range/tsconfig.json b/samples/charts/sparkline/normal-range/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/sparkline/normal-range/tsconfig.json
+++ b/samples/charts/sparkline/normal-range/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/sparkline/normal-range/webpack.config.js b/samples/charts/sparkline/normal-range/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/sparkline/normal-range/webpack.config.js
+++ b/samples/charts/sparkline/normal-range/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/sparkline/trendlines/package.json b/samples/charts/sparkline/trendlines/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/sparkline/trendlines/package.json
+++ b/samples/charts/sparkline/trendlines/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/trendlines/sandbox.config.json b/samples/charts/sparkline/trendlines/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/sparkline/trendlines/sandbox.config.json
+++ b/samples/charts/sparkline/trendlines/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/sparkline/trendlines/src/index.css b/samples/charts/sparkline/trendlines/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/sparkline/trendlines/src/index.css
+++ b/samples/charts/sparkline/trendlines/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/sparkline/trendlines/src/index.ts b/samples/charts/sparkline/trendlines/src/index.ts
index 8609202583..f7bfccb913 100644
--- a/samples/charts/sparkline/trendlines/src/index.ts
+++ b/samples/charts/sparkline/trendlines/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescr
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
 import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             chart.dataSource = this.sparklineMixedData;
         }
         this._bind();
-
     }
 
     private _sparklineMixedData: SparklineMixedData = null;
diff --git a/samples/charts/sparkline/trendlines/tsconfig.json b/samples/charts/sparkline/trendlines/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/sparkline/trendlines/tsconfig.json
+++ b/samples/charts/sparkline/trendlines/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/sparkline/trendlines/webpack.config.js b/samples/charts/sparkline/trendlines/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/sparkline/trendlines/webpack.config.js
+++ b/samples/charts/sparkline/trendlines/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/sparkline/unknown-values/package.json b/samples/charts/sparkline/unknown-values/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/sparkline/unknown-values/package.json
+++ b/samples/charts/sparkline/unknown-values/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/sparkline/unknown-values/sandbox.config.json b/samples/charts/sparkline/unknown-values/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/sparkline/unknown-values/sandbox.config.json
+++ b/samples/charts/sparkline/unknown-values/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/sparkline/unknown-values/src/index.css b/samples/charts/sparkline/unknown-values/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/sparkline/unknown-values/src/index.css
+++ b/samples/charts/sparkline/unknown-values/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/sparkline/unknown-values/src/index.ts b/samples/charts/sparkline/unknown-values/src/index.ts
index 18cd52e386..9da3df7ace 100644
--- a/samples/charts/sparkline/unknown-values/src/index.ts
+++ b/samples/charts/sparkline/unknown-values/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescr
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
 import { SparklineUnknownDataItem, SparklineUnknownData } from './SparklineUnknownData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             chart.dataSource = this.sparklineUnknownData;
         }
         this._bind();
-
     }
 
     private _sparklineUnknownData: SparklineUnknownData = null;
diff --git a/samples/charts/sparkline/unknown-values/tsconfig.json b/samples/charts/sparkline/unknown-values/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/sparkline/unknown-values/tsconfig.json
+++ b/samples/charts/sparkline/unknown-values/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/sparkline/unknown-values/webpack.config.js b/samples/charts/sparkline/unknown-values/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/sparkline/unknown-values/webpack.config.js
+++ b/samples/charts/sparkline/unknown-values/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/package.json b/samples/charts/toolbar/actions-built-in-category-chart/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/package.json
+++ b/samples/charts/toolbar/actions-built-in-category-chart/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/sandbox.config.json b/samples/charts/toolbar/actions-built-in-category-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/sandbox.config.json
+++ b/samples/charts/toolbar/actions-built-in-category-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/src/index.css b/samples/charts/toolbar/actions-built-in-category-chart/src/index.css
index d2c1cccd43..0fe9368715 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/src/index.css
+++ b/samples/charts/toolbar/actions-built-in-category-chart/src/index.css
@@ -1,21 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.aboveContentSplit {
-    display: flex;
-    flex-direction: row;
-}
-.aboveContentLeftContainer {
-    margin-left: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-start;
-    align-items: flex-end;
-}
-.aboveContentRightContainer {
-    margin-right: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-end;
-    align-items: flex-end;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/src/index.ts b/samples/charts/toolbar/actions-built-in-category-chart/src/index.ts
index d0f1b6b040..e09601d043 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/src/index.ts
+++ b/samples/charts/toolbar/actions-built-in-category-chart/src/index.ts
@@ -3,11 +3,10 @@ import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
 import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
 import { IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcToolbarModule,
@@ -33,7 +32,6 @@ export class Sample {
             chart.legend = this.legend;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/tsconfig.json b/samples/charts/toolbar/actions-built-in-category-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/tsconfig.json
+++ b/samples/charts/toolbar/actions-built-in-category-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/webpack.config.js b/samples/charts/toolbar/actions-built-in-category-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/webpack.config.js
+++ b/samples/charts/toolbar/actions-built-in-category-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/package.json b/samples/charts/toolbar/actions-built-in-data-chart/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/package.json
+++ b/samples/charts/toolbar/actions-built-in-data-chart/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/sandbox.config.json b/samples/charts/toolbar/actions-built-in-data-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/sandbox.config.json
+++ b/samples/charts/toolbar/actions-built-in-data-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/src/index.css b/samples/charts/toolbar/actions-built-in-data-chart/src/index.css
index d2c1cccd43..0fe9368715 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/src/index.css
+++ b/samples/charts/toolbar/actions-built-in-data-chart/src/index.css
@@ -1,21 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.aboveContentSplit {
-    display: flex;
-    flex-direction: row;
-}
-.aboveContentLeftContainer {
-    margin-left: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-start;
-    align-items: flex-end;
-}
-.aboveContentRightContainer {
-    margin-right: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-end;
-    align-items: flex-end;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/src/index.ts b/samples/charts/toolbar/actions-built-in-data-chart/src/index.ts
index dc77769bcb..d709f2a636 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/src/index.ts
+++ b/samples/charts/toolbar/actions-built-in-data-chart/src/index.ts
@@ -3,11 +3,10 @@ import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategory
 import { IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcToolbarModule,
     IgcDataChartToolbarModule,
@@ -55,7 +54,6 @@ export class Sample {
             lineSeries3.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/tsconfig.json b/samples/charts/toolbar/actions-built-in-data-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/tsconfig.json
+++ b/samples/charts/toolbar/actions-built-in-data-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/webpack.config.js b/samples/charts/toolbar/actions-built-in-data-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/webpack.config.js
+++ b/samples/charts/toolbar/actions-built-in-data-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/toolbar/custom-tool/package.json b/samples/charts/toolbar/custom-tool/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/toolbar/custom-tool/package.json
+++ b/samples/charts/toolbar/custom-tool/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/toolbar/custom-tool/sandbox.config.json b/samples/charts/toolbar/custom-tool/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/toolbar/custom-tool/sandbox.config.json
+++ b/samples/charts/toolbar/custom-tool/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/toolbar/custom-tool/src/index.css b/samples/charts/toolbar/custom-tool/src/index.css
index d2c1cccd43..0fe9368715 100644
--- a/samples/charts/toolbar/custom-tool/src/index.css
+++ b/samples/charts/toolbar/custom-tool/src/index.css
@@ -1,21 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.aboveContentSplit {
-    display: flex;
-    flex-direction: row;
-}
-.aboveContentLeftContainer {
-    margin-left: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-start;
-    align-items: flex-end;
-}
-.aboveContentRightContainer {
-    margin-right: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-end;
-    align-items: flex-end;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/toolbar/custom-tool/src/index.ts b/samples/charts/toolbar/custom-tool/src/index.ts
index 89ac6d283c..59c069cb34 100644
--- a/samples/charts/toolbar/custom-tool/src/index.ts
+++ b/samples/charts/toolbar/custom-tool/src/index.ts
@@ -4,11 +4,10 @@ import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcompo
 import { IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
 import { IgcToolActionLabelComponent, IgcToolActionComponent, IgcToolCommandEventArgs } from 'igniteui-webcomponents-layouts';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcLegendModule,
     IgcToolbarModule,
@@ -47,12 +46,10 @@ export class Sample {
         return this._countryRenewableElectricity;
     }
 
-
     public toolbarCustomIconOnViewInit(): void {
         var toolbar = this.toolbar;
         const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
         toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
-
     }
 
 }
diff --git a/samples/charts/toolbar/custom-tool/tsconfig.json b/samples/charts/toolbar/custom-tool/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/toolbar/custom-tool/tsconfig.json
+++ b/samples/charts/toolbar/custom-tool/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/toolbar/custom-tool/webpack.config.js b/samples/charts/toolbar/custom-tool/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/toolbar/custom-tool/webpack.config.js
+++ b/samples/charts/toolbar/custom-tool/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/package.json b/samples/charts/toolbar/layout-actions-for-data-chart/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/package.json
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/sandbox.config.json b/samples/charts/toolbar/layout-actions-for-data-chart/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/sandbox.config.json
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/src/index.css b/samples/charts/toolbar/layout-actions-for-data-chart/src/index.css
index d2c1cccd43..0fe9368715 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/src/index.css
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/src/index.css
@@ -1,21 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.aboveContentSplit {
-    display: flex;
-    flex-direction: row;
-}
-.aboveContentLeftContainer {
-    margin-left: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-start;
-    align-items: flex-end;
-}
-.aboveContentRightContainer {
-    margin-right: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-end;
-    align-items: flex-end;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/src/index.ts b/samples/charts/toolbar/layout-actions-for-data-chart/src/index.ts
index dd4c785d56..1af0dcb55f 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/src/index.ts
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/src/index.ts
@@ -5,11 +5,10 @@ import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisCompon
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
 import { IgcToolCommandEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcToolbarModule,
     IgcDataChartToolbarModule,
@@ -64,7 +63,6 @@ export class Sample {
             lineSeries3.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
@@ -76,7 +74,6 @@ export class Sample {
         return this._countryRenewableElectricity;
     }
 
-
     public toolbarToggleTooltip(sender: any, args: IgcToolCommandEventArgs): void {
         var target = this.chart;
         switch (args.command.commandId)
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/tsconfig.json b/samples/charts/toolbar/layout-actions-for-data-chart/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/tsconfig.json
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/webpack.config.js b/samples/charts/toolbar/layout-actions-for-data-chart/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/webpack.config.js
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/package.json b/samples/charts/toolbar/layout-in-vertical-orientation/package.json
index 53d7b12959..a0d2a23fa0 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/package.json
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/sandbox.config.json b/samples/charts/toolbar/layout-in-vertical-orientation/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/sandbox.config.json
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/src/index.css b/samples/charts/toolbar/layout-in-vertical-orientation/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/src/index.css
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/src/index.ts b/samples/charts/toolbar/layout-in-vertical-orientation/src/index.ts
index a696c63d90..9451c5b6ca 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/src/index.ts
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/src/index.ts
@@ -3,11 +3,10 @@ import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategory
 import { IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcToolbarModule,
     IgcDataChartToolbarModule,
@@ -43,7 +42,6 @@ export class Sample {
             lineSeries1.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/tsconfig.json b/samples/charts/toolbar/layout-in-vertical-orientation/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/tsconfig.json
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/webpack.config.js b/samples/charts/toolbar/layout-in-vertical-orientation/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/webpack.config.js
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/toolbar/theming/package.json b/samples/charts/toolbar/theming/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/toolbar/theming/package.json
+++ b/samples/charts/toolbar/theming/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/toolbar/theming/sandbox.config.json b/samples/charts/toolbar/theming/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/toolbar/theming/sandbox.config.json
+++ b/samples/charts/toolbar/theming/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/toolbar/theming/src/index.css b/samples/charts/toolbar/theming/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/toolbar/theming/src/index.css
+++ b/samples/charts/toolbar/theming/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/toolbar/theming/src/index.ts b/samples/charts/toolbar/theming/src/index.ts
index 984ef3ecc5..4040359104 100644
--- a/samples/charts/toolbar/theming/src/index.ts
+++ b/samples/charts/toolbar/theming/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, ToolbarDescrip
 import { IgcPropertyEditorPanelComponent, IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
 import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
 import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -52,7 +52,6 @@ export class Sample {
             lineSeries1.dataSource = this.countryRenewableElectricity;
         }
         this._bind();
-
     }
 
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
diff --git a/samples/charts/toolbar/theming/tsconfig.json b/samples/charts/toolbar/theming/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/toolbar/theming/tsconfig.json
+++ b/samples/charts/toolbar/theming/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/toolbar/theming/webpack.config.js b/samples/charts/toolbar/theming/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/toolbar/theming/webpack.config.js
+++ b/samples/charts/toolbar/theming/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/tree-map/events/package.json b/samples/charts/tree-map/events/package.json
index e5487fe274..284e4a8330 100644
--- a/samples/charts/tree-map/events/package.json
+++ b/samples/charts/tree-map/events/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/tree-map/events/src/index.ts b/samples/charts/tree-map/events/src/index.ts
index 603e2cfe6a..0109c4b04e 100644
--- a/samples/charts/tree-map/events/src/index.ts
+++ b/samples/charts/tree-map/events/src/index.ts
@@ -49,11 +49,13 @@ export class TreeMapEvents {
             this.hoveredNodeValue.innerText = population;
         }
     }
+
     private onNodePointerLeave(sender: IgcTreemapComponent, args: IgcTreemapNodePointerEventArgs) {
         this.hoveredNodeParent.innerText = "None";
         this.hoveredNodeName.innerText = "None";
         this.hoveredNodeValue.innerText = "None";
     }
+
     private onNodePointerPressed(sender: IgcTreemapComponent, args: IgcTreemapNodePointerEventArgs) {
         if (!args.item) {
             return;
diff --git a/samples/charts/tree-map/highlighting-percent-based/package.json b/samples/charts/tree-map/highlighting-percent-based/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/tree-map/highlighting-percent-based/package.json
+++ b/samples/charts/tree-map/highlighting-percent-based/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/tree-map/highlighting-percent-based/sandbox.config.json b/samples/charts/tree-map/highlighting-percent-based/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/tree-map/highlighting-percent-based/sandbox.config.json
+++ b/samples/charts/tree-map/highlighting-percent-based/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/tree-map/highlighting-percent-based/src/index.css b/samples/charts/tree-map/highlighting-percent-based/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/tree-map/highlighting-percent-based/src/index.css
+++ b/samples/charts/tree-map/highlighting-percent-based/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/tree-map/highlighting-percent-based/src/index.ts b/samples/charts/tree-map/highlighting-percent-based/src/index.ts
index cda2021509..337cb6cc02 100644
--- a/samples/charts/tree-map/highlighting-percent-based/src/index.ts
+++ b/samples/charts/tree-map/highlighting-percent-based/src/index.ts
@@ -2,11 +2,10 @@ import { IgcTreemapModule } from 'igniteui-webcomponents-charts';
 import { ComponentRenderer, TreemapDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
 import { CountryTopUrbanPopDataItem, CountryTopUrbanPopData } from './CountryTopUrbanPopData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcTreemapModule
 );
@@ -23,7 +22,6 @@ export class Sample {
             treemap.dataSource = this.countryTopUrbanPopData;
         }
         this._bind();
-
     }
 
     private _countryTopUrbanPopData: CountryTopUrbanPopData = null;
diff --git a/samples/charts/tree-map/highlighting-percent-based/tsconfig.json b/samples/charts/tree-map/highlighting-percent-based/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/tree-map/highlighting-percent-based/tsconfig.json
+++ b/samples/charts/tree-map/highlighting-percent-based/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/tree-map/highlighting-percent-based/webpack.config.js b/samples/charts/tree-map/highlighting-percent-based/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/tree-map/highlighting-percent-based/webpack.config.js
+++ b/samples/charts/tree-map/highlighting-percent-based/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/tree-map/highlighting/package.json b/samples/charts/tree-map/highlighting/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/tree-map/highlighting/package.json
+++ b/samples/charts/tree-map/highlighting/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/tree-map/highlighting/sandbox.config.json b/samples/charts/tree-map/highlighting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/tree-map/highlighting/sandbox.config.json
+++ b/samples/charts/tree-map/highlighting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/tree-map/highlighting/src/index.css b/samples/charts/tree-map/highlighting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/tree-map/highlighting/src/index.css
+++ b/samples/charts/tree-map/highlighting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/tree-map/highlighting/src/index.ts b/samples/charts/tree-map/highlighting/src/index.ts
index b98b95e226..92aba1717f 100644
--- a/samples/charts/tree-map/highlighting/src/index.ts
+++ b/samples/charts/tree-map/highlighting/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, TreemapDescrip
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
 import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             treemap.dataSource = this.countyHierarchicalData;
         }
         this._bind();
-
     }
 
     private _countyHierarchicalData: CountyHierarchicalData = null;
diff --git a/samples/charts/tree-map/highlighting/tsconfig.json b/samples/charts/tree-map/highlighting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/tree-map/highlighting/tsconfig.json
+++ b/samples/charts/tree-map/highlighting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/tree-map/highlighting/webpack.config.js b/samples/charts/tree-map/highlighting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/tree-map/highlighting/webpack.config.js
+++ b/samples/charts/tree-map/highlighting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/tree-map/layout/package.json b/samples/charts/tree-map/layout/package.json
index cfe663c26f..5106318777 100644
--- a/samples/charts/tree-map/layout/package.json
+++ b/samples/charts/tree-map/layout/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/tree-map/layout/sandbox.config.json b/samples/charts/tree-map/layout/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/tree-map/layout/sandbox.config.json
+++ b/samples/charts/tree-map/layout/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/tree-map/layout/src/index.css b/samples/charts/tree-map/layout/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/tree-map/layout/src/index.css
+++ b/samples/charts/tree-map/layout/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/tree-map/layout/src/index.ts b/samples/charts/tree-map/layout/src/index.ts
index 6269db32e8..c309cde42d 100644
--- a/samples/charts/tree-map/layout/src/index.ts
+++ b/samples/charts/tree-map/layout/src/index.ts
@@ -4,10 +4,10 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, TreemapDescrip
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
 import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
-
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -41,7 +41,6 @@ export class Sample {
             treemap.dataSource = this.countyHierarchicalData;
         }
         this._bind();
-
     }
 
     private _countyHierarchicalData: CountyHierarchicalData = null;
diff --git a/samples/charts/tree-map/layout/tsconfig.json b/samples/charts/tree-map/layout/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/tree-map/layout/tsconfig.json
+++ b/samples/charts/tree-map/layout/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/tree-map/layout/webpack.config.js b/samples/charts/tree-map/layout/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/tree-map/layout/webpack.config.js
+++ b/samples/charts/tree-map/layout/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/tree-map/overview/package.json b/samples/charts/tree-map/overview/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/tree-map/overview/package.json
+++ b/samples/charts/tree-map/overview/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/tree-map/overview/sandbox.config.json b/samples/charts/tree-map/overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/tree-map/overview/sandbox.config.json
+++ b/samples/charts/tree-map/overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/tree-map/overview/src/index.css b/samples/charts/tree-map/overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/tree-map/overview/src/index.css
+++ b/samples/charts/tree-map/overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/tree-map/overview/src/index.ts b/samples/charts/tree-map/overview/src/index.ts
index 2754280abc..ccf4b75473 100644
--- a/samples/charts/tree-map/overview/src/index.ts
+++ b/samples/charts/tree-map/overview/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcTreemapModule } from 'igniteui-webcomponents-charts';
 import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
 import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcTreemapModule
 );
@@ -22,7 +21,6 @@ export class Sample {
             treemap.dataSource = this.countyHierarchicalData;
         }
         this._bind();
-
     }
 
     private _countyHierarchicalData: CountyHierarchicalData = null;
diff --git a/samples/charts/tree-map/overview/tsconfig.json b/samples/charts/tree-map/overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/tree-map/overview/tsconfig.json
+++ b/samples/charts/tree-map/overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/tree-map/overview/webpack.config.js b/samples/charts/tree-map/overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/tree-map/overview/webpack.config.js
+++ b/samples/charts/tree-map/overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/tree-map/styling/package.json b/samples/charts/tree-map/styling/package.json
index 18acf18b3f..47d9c20efb 100644
--- a/samples/charts/tree-map/styling/package.json
+++ b/samples/charts/tree-map/styling/package.json
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/charts/tree-map/styling/sandbox.config.json b/samples/charts/tree-map/styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/charts/tree-map/styling/sandbox.config.json
+++ b/samples/charts/tree-map/styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/charts/tree-map/styling/src/index.css b/samples/charts/tree-map/styling/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/charts/tree-map/styling/src/index.css
+++ b/samples/charts/tree-map/styling/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/charts/tree-map/styling/src/index.ts b/samples/charts/tree-map/styling/src/index.ts
index 67476c1dba..eda4fe17e0 100644
--- a/samples/charts/tree-map/styling/src/index.ts
+++ b/samples/charts/tree-map/styling/src/index.ts
@@ -1,11 +1,10 @@
 import { IgcTreemapModule } from 'igniteui-webcomponents-charts';
 import { IgcTreemapComponent, IgcTreemapNodeStyleMappingComponent } from 'igniteui-webcomponents-charts';
 import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
-
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
 ModuleManager.register(
     IgcTreemapModule
 );
@@ -38,7 +37,6 @@ export class Sample {
             treemap.dataSource = this.countyHierarchicalData;
         }
         this._bind();
-
     }
 
     private _countyHierarchicalData: CountyHierarchicalData = null;
diff --git a/samples/charts/tree-map/styling/tsconfig.json b/samples/charts/tree-map/styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/charts/tree-map/styling/tsconfig.json
+++ b/samples/charts/tree-map/styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/charts/tree-map/styling/webpack.config.js b/samples/charts/tree-map/styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/charts/tree-map/styling/webpack.config.js
+++ b/samples/charts/tree-map/styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/charts/zoomslider/overview/package.json b/samples/charts/zoomslider/overview/package.json
index 8b8cddee8a..924e00923c 100644
--- a/samples/charts/zoomslider/overview/package.json
+++ b/samples/charts/zoomslider/overview/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/editors/multi-column-combobox/overview/package.json b/samples/editors/multi-column-combobox/overview/package.json
index 7011138e6d..721388f09f 100644
--- a/samples/editors/multi-column-combobox/overview/package.json
+++ b/samples/editors/multi-column-combobox/overview/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/editors/x-date-picker/date-limits/package.json b/samples/editors/x-date-picker/date-limits/package.json
index 20254fff6f..3f3a20af42 100644
--- a/samples/editors/x-date-picker/date-limits/package.json
+++ b/samples/editors/x-date-picker/date-limits/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/editors/x-date-picker/editing/package.json b/samples/editors/x-date-picker/editing/package.json
index e5e4bb504c..a4693bc2ce 100644
--- a/samples/editors/x-date-picker/editing/package.json
+++ b/samples/editors/x-date-picker/editing/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/editors/x-date-picker/format/package.json b/samples/editors/x-date-picker/format/package.json
index 29e325bbb9..5ae66a9ec7 100644
--- a/samples/editors/x-date-picker/format/package.json
+++ b/samples/editors/x-date-picker/format/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/editors/x-date-picker/overview/package.json b/samples/editors/x-date-picker/overview/package.json
index f8e5117f7e..df19ef51a5 100644
--- a/samples/editors/x-date-picker/overview/package.json
+++ b/samples/editors/x-date-picker/overview/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/editors/x-date-picker/range/package.json b/samples/editors/x-date-picker/range/package.json
index bd9f342e06..445f707fe5 100644
--- a/samples/editors/x-date-picker/range/package.json
+++ b/samples/editors/x-date-picker/range/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/excel-library/operations-on-workbooks/package.json b/samples/excel/excel-library/operations-on-workbooks/package.json
index 84ee93e2b8..7e7fe4559b 100644
--- a/samples/excel/excel-library/operations-on-workbooks/package.json
+++ b/samples/excel/excel-library/operations-on-workbooks/package.json
@@ -25,11 +25,11 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/excel-library/operations-on-worksheets/package.json b/samples/excel/excel-library/operations-on-worksheets/package.json
index a4dada8d17..2b5a774b0a 100644
--- a/samples/excel/excel-library/operations-on-worksheets/package.json
+++ b/samples/excel/excel-library/operations-on-worksheets/package.json
@@ -25,8 +25,8 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/excel-library/overview/package.json b/samples/excel/excel-library/overview/package.json
index 74e8a6f8ab..4af4f16234 100644
--- a/samples/excel/excel-library/overview/package.json
+++ b/samples/excel/excel-library/overview/package.json
@@ -25,8 +25,8 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/excel-library/working-with-cells/package.json b/samples/excel/excel-library/working-with-cells/package.json
index 65aaed724c..99c56c58f5 100644
--- a/samples/excel/excel-library/working-with-cells/package.json
+++ b/samples/excel/excel-library/working-with-cells/package.json
@@ -25,8 +25,8 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/excel-library/working-with-charts/package.json b/samples/excel/excel-library/working-with-charts/package.json
index ffa9f2f094..7130b7e2ef 100644
--- a/samples/excel/excel-library/working-with-charts/package.json
+++ b/samples/excel/excel-library/working-with-charts/package.json
@@ -25,12 +25,12 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/excel-library/working-with-sparklines/package.json b/samples/excel/excel-library/working-with-sparklines/package.json
index 3a1774b0b7..389702cbba 100644
--- a/samples/excel/excel-library/working-with-sparklines/package.json
+++ b/samples/excel/excel-library/working-with-sparklines/package.json
@@ -25,12 +25,12 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/excel-library/working-with-sparklines/src/index.ts b/samples/excel/excel-library/working-with-sparklines/src/index.ts
index 8275f0df27..4f44cdbe99 100644
--- a/samples/excel/excel-library/working-with-sparklines/src/index.ts
+++ b/samples/excel/excel-library/working-with-sparklines/src/index.ts
@@ -12,10 +12,10 @@ import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
 import { SparklineDisplayType } from 'igniteui-webcomponents-charts';
 import { ModuleManager } from 'igniteui-webcomponents-core';
 
-ModuleManager.register(    
+ModuleManager.register(
     IgcExcelModule,
     IgcDataGridModule,
-    IgcSparklineModule    
+    IgcSparklineModule
 );
 
 export class ExcelLibrarySparklines {
@@ -38,7 +38,7 @@ export class ExcelLibrarySparklines {
 
     public onOrdersCellUpdating(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) {
         const content = e.content as HTMLDivElement;
-        const info = e.cellInfo as IgcTemplateCellInfo;        
+        const info = e.cellInfo as IgcTemplateCellInfo;
         let sparkline: IgcSparklineComponent | null = null;
 
         if (content.childElementCount === 0) {
@@ -51,13 +51,12 @@ export class ExcelLibrarySparklines {
             sparkline.valueMemberPath = "Freight";
 
             content.appendChild(sparkline);
-
         }
-        else {            
+        else {
             sparkline = content.children[0] as IgcSparklineComponent;
         }
 
-        if (sparkline) {            
+        if (sparkline) {
             sparkline.dataSource = info.rowItem.Orders;
         }
     }
diff --git a/samples/excel/spreadsheet/activation/package.json b/samples/excel/spreadsheet/activation/package.json
index 8d7f5e041b..238df61e43 100644
--- a/samples/excel/spreadsheet/activation/package.json
+++ b/samples/excel/spreadsheet/activation/package.json
@@ -25,9 +25,9 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/adapter-chart/package.json b/samples/excel/spreadsheet/adapter-chart/package.json
index 6b90a4e037..1f8a110e61 100644
--- a/samples/excel/spreadsheet/adapter-chart/package.json
+++ b/samples/excel/spreadsheet/adapter-chart/package.json
@@ -25,11 +25,11 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
-    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/adapter-combo/package.json b/samples/excel/spreadsheet/adapter-combo/package.json
index 345bb7bb66..13b0f806f0 100644
--- a/samples/excel/spreadsheet/adapter-combo/package.json
+++ b/samples/excel/spreadsheet/adapter-combo/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
-    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/clipboard/package.json b/samples/excel/spreadsheet/clipboard/package.json
index 4159d03db2..24cb33710f 100644
--- a/samples/excel/spreadsheet/clipboard/package.json
+++ b/samples/excel/spreadsheet/clipboard/package.json
@@ -25,9 +25,9 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/commands/package.json b/samples/excel/spreadsheet/commands/package.json
index 157dc9d11f..10973fd7be 100644
--- a/samples/excel/spreadsheet/commands/package.json
+++ b/samples/excel/spreadsheet/commands/package.json
@@ -25,9 +25,9 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/conditional-formatting/package.json b/samples/excel/spreadsheet/conditional-formatting/package.json
index 92661bdfec..65f120cba2 100644
--- a/samples/excel/spreadsheet/conditional-formatting/package.json
+++ b/samples/excel/spreadsheet/conditional-formatting/package.json
@@ -25,9 +25,9 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/config-options/package.json b/samples/excel/spreadsheet/config-options/package.json
index 1f77b4c0c3..f1e4259a39 100644
--- a/samples/excel/spreadsheet/config-options/package.json
+++ b/samples/excel/spreadsheet/config-options/package.json
@@ -25,9 +25,9 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/data-validation/package.json b/samples/excel/spreadsheet/data-validation/package.json
index b2f214dd3d..ad9c5dd832 100644
--- a/samples/excel/spreadsheet/data-validation/package.json
+++ b/samples/excel/spreadsheet/data-validation/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/filter-dialog/package.json b/samples/excel/spreadsheet/filter-dialog/package.json
index 18ffcb6902..5c970e989a 100644
--- a/samples/excel/spreadsheet/filter-dialog/package.json
+++ b/samples/excel/spreadsheet/filter-dialog/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/format-dialog/package.json b/samples/excel/spreadsheet/format-dialog/package.json
index 73b6816096..d0f9df9d45 100644
--- a/samples/excel/spreadsheet/format-dialog/package.json
+++ b/samples/excel/spreadsheet/format-dialog/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/hyperlinks/package.json b/samples/excel/spreadsheet/hyperlinks/package.json
index 538f926b6d..b50bc8c0d3 100644
--- a/samples/excel/spreadsheet/hyperlinks/package.json
+++ b/samples/excel/spreadsheet/hyperlinks/package.json
@@ -25,9 +25,9 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/overview/package.json b/samples/excel/spreadsheet/overview/package.json
index da5d219803..925a226197 100644
--- a/samples/excel/spreadsheet/overview/package.json
+++ b/samples/excel/spreadsheet/overview/package.json
@@ -25,9 +25,9 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/excel/spreadsheet/sort-dialog/package.json b/samples/excel/spreadsheet/sort-dialog/package.json
index 76f9bc922b..4caa54cd22 100644
--- a/samples/excel/spreadsheet/sort-dialog/package.json
+++ b/samples/excel/spreadsheet/sort-dialog/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-excel": "5.1.0",
-    "igniteui-webcomponents-spreadsheet": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-excel": "5.1.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/animation/package.json b/samples/gauges/bullet-graph/animation/package.json
index 858df87b20..223f7f54a7 100644
--- a/samples/gauges/bullet-graph/animation/package.json
+++ b/samples/gauges/bullet-graph/animation/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/animation/src/index.ts b/samples/gauges/bullet-graph/animation/src/index.ts
index 88b5309d78..b4d1d68d6d 100644
--- a/samples/gauges/bullet-graph/animation/src/index.ts
+++ b/samples/gauges/bullet-graph/animation/src/index.ts
@@ -7,7 +7,7 @@ ModuleManager.register(IgcBulletGraphModule);
 
 export class BulletGraphAnimation {
 
-    private gauge: IgcBulletGraphComponent;    
+    private gauge: IgcBulletGraphComponent;
 
     constructor() {
 
diff --git a/samples/gauges/bullet-graph/background/package.json b/samples/gauges/bullet-graph/background/package.json
index 6c584a3aae..0ca2d50c5f 100644
--- a/samples/gauges/bullet-graph/background/package.json
+++ b/samples/gauges/bullet-graph/background/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/highlight-needle/package.json b/samples/gauges/bullet-graph/highlight-needle/package.json
index d1f99699b8..462ab9adaf 100644
--- a/samples/gauges/bullet-graph/highlight-needle/package.json
+++ b/samples/gauges/bullet-graph/highlight-needle/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/labels/package.json b/samples/gauges/bullet-graph/labels/package.json
index 820ae1973c..90e3d90cdc 100644
--- a/samples/gauges/bullet-graph/labels/package.json
+++ b/samples/gauges/bullet-graph/labels/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/measures/package.json b/samples/gauges/bullet-graph/measures/package.json
index 6ca291dd64..d95217be92 100644
--- a/samples/gauges/bullet-graph/measures/package.json
+++ b/samples/gauges/bullet-graph/measures/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/ranges/package.json b/samples/gauges/bullet-graph/ranges/package.json
index 82394c7178..275567f6e3 100644
--- a/samples/gauges/bullet-graph/ranges/package.json
+++ b/samples/gauges/bullet-graph/ranges/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/scale/package.json b/samples/gauges/bullet-graph/scale/package.json
index 2405357906..221c8f71c5 100644
--- a/samples/gauges/bullet-graph/scale/package.json
+++ b/samples/gauges/bullet-graph/scale/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/tickmarks/package.json b/samples/gauges/bullet-graph/tickmarks/package.json
index ac7a5818a4..83a7cf2c27 100644
--- a/samples/gauges/bullet-graph/tickmarks/package.json
+++ b/samples/gauges/bullet-graph/tickmarks/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/type-filled/package.json b/samples/gauges/bullet-graph/type-filled/package.json
index b286d26d6b..8a498c152b 100644
--- a/samples/gauges/bullet-graph/type-filled/package.json
+++ b/samples/gauges/bullet-graph/type-filled/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/type-horizontal/package.json b/samples/gauges/bullet-graph/type-horizontal/package.json
index a2bb3e8dbd..0ef3d6ea12 100644
--- a/samples/gauges/bullet-graph/type-horizontal/package.json
+++ b/samples/gauges/bullet-graph/type-horizontal/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/type-reversed/package.json b/samples/gauges/bullet-graph/type-reversed/package.json
index cb11858dcd..97c6851180 100644
--- a/samples/gauges/bullet-graph/type-reversed/package.json
+++ b/samples/gauges/bullet-graph/type-reversed/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/type-segmented/package.json b/samples/gauges/bullet-graph/type-segmented/package.json
index 7078b10714..5f71d44ec7 100644
--- a/samples/gauges/bullet-graph/type-segmented/package.json
+++ b/samples/gauges/bullet-graph/type-segmented/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/bullet-graph/type-vertical/package.json b/samples/gauges/bullet-graph/type-vertical/package.json
index 7fd4c66f20..26d508fd28 100644
--- a/samples/gauges/bullet-graph/type-vertical/package.json
+++ b/samples/gauges/bullet-graph/type-vertical/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/animation/package.json b/samples/gauges/linear-gauge/animation/package.json
index 36dac014bd..71e63ded3e 100644
--- a/samples/gauges/linear-gauge/animation/package.json
+++ b/samples/gauges/linear-gauge/animation/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/backing/package.json b/samples/gauges/linear-gauge/backing/package.json
index 6d1c2040ac..3e6c3aa340 100644
--- a/samples/gauges/linear-gauge/backing/package.json
+++ b/samples/gauges/linear-gauge/backing/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/highlight-needle/package.json b/samples/gauges/linear-gauge/highlight-needle/package.json
index e36768fa9d..a3c9d55d8b 100644
--- a/samples/gauges/linear-gauge/highlight-needle/package.json
+++ b/samples/gauges/linear-gauge/highlight-needle/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/labels/package.json b/samples/gauges/linear-gauge/labels/package.json
index e31af6df17..7ae4b332e8 100644
--- a/samples/gauges/linear-gauge/labels/package.json
+++ b/samples/gauges/linear-gauge/labels/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/needle/package.json b/samples/gauges/linear-gauge/needle/package.json
index 0dd41ae3b5..6add166f57 100644
--- a/samples/gauges/linear-gauge/needle/package.json
+++ b/samples/gauges/linear-gauge/needle/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/ranges/package.json b/samples/gauges/linear-gauge/ranges/package.json
index 098d6cf9ea..038be8aa17 100644
--- a/samples/gauges/linear-gauge/ranges/package.json
+++ b/samples/gauges/linear-gauge/ranges/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/scale/package.json b/samples/gauges/linear-gauge/scale/package.json
index e8969ce86c..6a4f56619f 100644
--- a/samples/gauges/linear-gauge/scale/package.json
+++ b/samples/gauges/linear-gauge/scale/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/tickmarks/package.json b/samples/gauges/linear-gauge/tickmarks/package.json
index 4e75f1196f..39aabe591c 100644
--- a/samples/gauges/linear-gauge/tickmarks/package.json
+++ b/samples/gauges/linear-gauge/tickmarks/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/type-curved/package.json b/samples/gauges/linear-gauge/type-curved/package.json
index 89e70aed6c..8485d7fa08 100644
--- a/samples/gauges/linear-gauge/type-curved/package.json
+++ b/samples/gauges/linear-gauge/type-curved/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/type-filled/package.json b/samples/gauges/linear-gauge/type-filled/package.json
index 4a8716fb75..f49b843f89 100644
--- a/samples/gauges/linear-gauge/type-filled/package.json
+++ b/samples/gauges/linear-gauge/type-filled/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/type-horizontal/package.json b/samples/gauges/linear-gauge/type-horizontal/package.json
index 13c1aea9c9..8a0807af92 100644
--- a/samples/gauges/linear-gauge/type-horizontal/package.json
+++ b/samples/gauges/linear-gauge/type-horizontal/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/type-multi-range/package.json b/samples/gauges/linear-gauge/type-multi-range/package.json
index a1330e0f97..2524d133d5 100644
--- a/samples/gauges/linear-gauge/type-multi-range/package.json
+++ b/samples/gauges/linear-gauge/type-multi-range/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/type-multi-scale/package.json b/samples/gauges/linear-gauge/type-multi-scale/package.json
index af58f3474d..34afa3f4de 100644
--- a/samples/gauges/linear-gauge/type-multi-scale/package.json
+++ b/samples/gauges/linear-gauge/type-multi-scale/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/type-segmented/package.json b/samples/gauges/linear-gauge/type-segmented/package.json
index dc1e8af5be..a3ab366881 100644
--- a/samples/gauges/linear-gauge/type-segmented/package.json
+++ b/samples/gauges/linear-gauge/type-segmented/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/linear-gauge/type-vertical/package.json b/samples/gauges/linear-gauge/type-vertical/package.json
index 86bd12761c..dc51e702d1 100644
--- a/samples/gauges/linear-gauge/type-vertical/package.json
+++ b/samples/gauges/linear-gauge/type-vertical/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/animation/package.json b/samples/gauges/radial-gauge/animation/package.json
index 4120850959..a34be10d39 100644
--- a/samples/gauges/radial-gauge/animation/package.json
+++ b/samples/gauges/radial-gauge/animation/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/animation/src/index.ts b/samples/gauges/radial-gauge/animation/src/index.ts
index 01dd379dfc..c1d9c63bba 100644
--- a/samples/gauges/radial-gauge/animation/src/index.ts
+++ b/samples/gauges/radial-gauge/animation/src/index.ts
@@ -39,7 +39,7 @@ export class RadialGaugeAnimation {
 
         if(this.shouldAnimate){
             this.gauge.transitionDuration = 1000;
-        }        
+        }
 
         this.gauge.minimumValue = 0;
         this.gauge.maximumValue = 50;
@@ -115,7 +115,7 @@ export class RadialGaugeAnimation {
             range.outerStartExtent = 0.57;
             range.outerEndExtent = 0.57;
         }
-        
+
         this.shouldAnimate = true;
     }
 
@@ -124,7 +124,7 @@ export class RadialGaugeAnimation {
 
         if(this.shouldAnimate){
             this.gauge.transitionDuration = 1000;
-        }        
+        }
 
         this.gauge.minimumValue = 0;
         this.gauge.maximumValue = 80;
@@ -183,7 +183,7 @@ export class RadialGaugeAnimation {
 
         if(this.shouldAnimate){
             this.gauge.transitionDuration = 1000;
-        }        
+        }
 
         this.gauge.minimumValue = 100;
         this.gauge.maximumValue = 200;
@@ -248,7 +248,7 @@ export class RadialGaugeAnimation {
 
         if(this.shouldAnimate){
             this.gauge.transitionDuration = 1000;
-        }        
+        }
 
         this.gauge.minimumValue = 0;
         this.gauge.maximumValue = 10;
diff --git a/samples/gauges/radial-gauge/backing/package.json b/samples/gauges/radial-gauge/backing/package.json
index 5759cf877f..c5f53e2957 100644
--- a/samples/gauges/radial-gauge/backing/package.json
+++ b/samples/gauges/radial-gauge/backing/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/highlight-needle/package.json b/samples/gauges/radial-gauge/highlight-needle/package.json
index 27a96ec568..94e2bb33c6 100644
--- a/samples/gauges/radial-gauge/highlight-needle/package.json
+++ b/samples/gauges/radial-gauge/highlight-needle/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/labels/package.json b/samples/gauges/radial-gauge/labels/package.json
index f20b661da7..1fbfa6bad3 100644
--- a/samples/gauges/radial-gauge/labels/package.json
+++ b/samples/gauges/radial-gauge/labels/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/needle/package.json b/samples/gauges/radial-gauge/needle/package.json
index 97a12a6770..473720444c 100644
--- a/samples/gauges/radial-gauge/needle/package.json
+++ b/samples/gauges/radial-gauge/needle/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/optical-scaling/package.json b/samples/gauges/radial-gauge/optical-scaling/package.json
index f20b661da7..1fbfa6bad3 100644
--- a/samples/gauges/radial-gauge/optical-scaling/package.json
+++ b/samples/gauges/radial-gauge/optical-scaling/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/ranges/package.json b/samples/gauges/radial-gauge/ranges/package.json
index 95c4e32de4..23149e6dee 100644
--- a/samples/gauges/radial-gauge/ranges/package.json
+++ b/samples/gauges/radial-gauge/ranges/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/scale/package.json b/samples/gauges/radial-gauge/scale/package.json
index dc006bc153..b482039931 100644
--- a/samples/gauges/radial-gauge/scale/package.json
+++ b/samples/gauges/radial-gauge/scale/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/tickmarks/package.json b/samples/gauges/radial-gauge/tickmarks/package.json
index d21b696bd5..c2038d200c 100644
--- a/samples/gauges/radial-gauge/tickmarks/package.json
+++ b/samples/gauges/radial-gauge/tickmarks/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-column/package.json b/samples/gauges/radial-gauge/type-column/package.json
index 729fb7a2b2..02ec1a81df 100644
--- a/samples/gauges/radial-gauge/type-column/package.json
+++ b/samples/gauges/radial-gauge/type-column/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-curved/package.json b/samples/gauges/radial-gauge/type-curved/package.json
index 792bbb59ce..ef1c7d1062 100644
--- a/samples/gauges/radial-gauge/type-curved/package.json
+++ b/samples/gauges/radial-gauge/type-curved/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-direction/package.json b/samples/gauges/radial-gauge/type-direction/package.json
index 56c4a07166..2a9d54f566 100644
--- a/samples/gauges/radial-gauge/type-direction/package.json
+++ b/samples/gauges/radial-gauge/type-direction/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-full/package.json b/samples/gauges/radial-gauge/type-full/package.json
index 34eca3a4a0..0c94782f5e 100644
--- a/samples/gauges/radial-gauge/type-full/package.json
+++ b/samples/gauges/radial-gauge/type-full/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-half/package.json b/samples/gauges/radial-gauge/type-half/package.json
index ed3b6a8ad3..c1e0c065ac 100644
--- a/samples/gauges/radial-gauge/type-half/package.json
+++ b/samples/gauges/radial-gauge/type-half/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-quatre/package.json b/samples/gauges/radial-gauge/type-quatre/package.json
index 852c17543c..15c0f8c313 100644
--- a/samples/gauges/radial-gauge/type-quatre/package.json
+++ b/samples/gauges/radial-gauge/type-quatre/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-ring/package.json b/samples/gauges/radial-gauge/type-ring/package.json
index d79a853957..8977fe0a86 100644
--- a/samples/gauges/radial-gauge/type-ring/package.json
+++ b/samples/gauges/radial-gauge/type-ring/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-segmented/package.json b/samples/gauges/radial-gauge/type-segmented/package.json
index 3effef16a7..034c356358 100644
--- a/samples/gauges/radial-gauge/type-segmented/package.json
+++ b/samples/gauges/radial-gauge/type-segmented/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/gauges/radial-gauge/type-semi/package.json b/samples/gauges/radial-gauge/type-semi/package.json
index 80c55091f1..028d30c5d2 100644
--- a/samples/gauges/radial-gauge/type-semi/package.json
+++ b/samples/gauges/radial-gauge/type-semi/package.json
@@ -23,8 +23,8 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/accessibility/package.json b/samples/grids/data-grid/accessibility/package.json
index c8124f4f21..cc462a767c 100644
--- a/samples/grids/data-grid/accessibility/package.json
+++ b/samples/grids/data-grid/accessibility/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/binding-data-service/package.json b/samples/grids/data-grid/binding-data-service/package.json
index ddd1bb7941..2bd0e46c84 100644
--- a/samples/grids/data-grid/binding-data-service/package.json
+++ b/samples/grids/data-grid/binding-data-service/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/binding-live-data/package.json b/samples/grids/data-grid/binding-live-data/package.json
index 3cf6485a80..c7a6f83a99 100644
--- a/samples/grids/data-grid/binding-live-data/package.json
+++ b/samples/grids/data-grid/binding-live-data/package.json
@@ -29,11 +29,11 @@
     "@webcomponents/webcomponentsjs": "2.3.0",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/binding-live-data/src/index.ts b/samples/grids/data-grid/binding-live-data/src/index.ts
index 4672596a9f..91ead470b3 100644
--- a/samples/grids/data-grid/binding-live-data/src/index.ts
+++ b/samples/grids/data-grid/binding-live-data/src/index.ts
@@ -1,6 +1,5 @@
 import '@webcomponents/custom-elements/custom-elements.min';
 import '@webcomponents/custom-elements/src/native-shim.js';
-
 import { LiveFinancialData } from './LiveFinancialData';
 import { ListSortDirection } from 'igniteui-webcomponents-core';
 import { DataGridCellLayoutPanel } from 'igniteui-webcomponents-grids';
diff --git a/samples/grids/data-grid/binding-local-data/package.json b/samples/grids/data-grid/binding-local-data/package.json
index fae066fd9f..8c9e95a8cc 100644
--- a/samples/grids/data-grid/binding-local-data/package.json
+++ b/samples/grids/data-grid/binding-local-data/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/binding-remote-data/package.json b/samples/grids/data-grid/binding-remote-data/package.json
index 7600dd7000..eb22a2061e 100644
--- a/samples/grids/data-grid/binding-remote-data/package.json
+++ b/samples/grids/data-grid/binding-remote-data/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-datasources": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-datasources": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/cell-activation/package.json b/samples/grids/data-grid/cell-activation/package.json
index e5937d6f88..70dbac44b2 100644
--- a/samples/grids/data-grid/cell-activation/package.json
+++ b/samples/grids/data-grid/cell-activation/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/cell-activation/src/index.ts b/samples/grids/data-grid/cell-activation/src/index.ts
index 80727db45b..c7ead2f230 100644
--- a/samples/grids/data-grid/cell-activation/src/index.ts
+++ b/samples/grids/data-grid/cell-activation/src/index.ts
@@ -33,7 +33,6 @@ export class DataGridCellActivation {
         if (this.enterKeyAfterEditButton !== null){
             this.enterKeyAfterEditButton.onchange = this.enterAfterChanged;
         }
-
     }
 
     public enterModeChanged = (event: any) => {
@@ -42,7 +41,6 @@ export class DataGridCellActivation {
         if (this.grid.enterBehavior === EnterKeyBehaviors.Edit) {
             this.enterKeyAfterEditButton.disabled = false;
             this.grid.editMode = EditModeType.Cell;
-
         }
         else {
             this.enterKeyAfterEditButton.disabled = true;
diff --git a/samples/grids/data-grid/cell-editing/package.json b/samples/grids/data-grid/cell-editing/package.json
index 2c421476be..927ad07123 100644
--- a/samples/grids/data-grid/cell-editing/package.json
+++ b/samples/grids/data-grid/cell-editing/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/cell-editing/src/index.ts b/samples/grids/data-grid/cell-editing/src/index.ts
index 25c7fe1af5..eaa53fa46e 100644
--- a/samples/grids/data-grid/cell-editing/src/index.ts
+++ b/samples/grids/data-grid/cell-editing/src/index.ts
@@ -116,7 +116,6 @@ export class DataGridCellEditing {
     public editModeClickActionChanged = (event: any) => {
 
         this.grid.editModeClickAction = event.target.value;
-
     }
 
     public onDeleteRowClick = (e: MouseEvent) => {
diff --git a/samples/grids/data-grid/cell-merging/package.json b/samples/grids/data-grid/cell-merging/package.json
index 47179056e3..0e8d70af2a 100644
--- a/samples/grids/data-grid/cell-merging/package.json
+++ b/samples/grids/data-grid/cell-merging/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-datasources": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-datasources": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/cell-merging/src/index.ts b/samples/grids/data-grid/cell-merging/src/index.ts
index 2a98df6e86..b82fd78df3 100644
--- a/samples/grids/data-grid/cell-merging/src/index.ts
+++ b/samples/grids/data-grid/cell-merging/src/index.ts
@@ -23,7 +23,6 @@ export class DataGridCellMerging {
         this.grid = document.getElementById('grid') as IgcDataGridComponent;
         this.dropDownValueChanged = this.dropDownValueChanged.bind(this);
 
-
         const vds = new ODataVirtualDataSource();
         vds.baseUri = 'https://services.odata.org/V4/Northwind/Northwind.svc';
         vds.entitySet = 'Orders';
@@ -61,7 +60,6 @@ export class DataGridCellMerging {
                 break;
             }
         }
-
     }
 
 }
diff --git a/samples/grids/data-grid/cell-selection/package.json b/samples/grids/data-grid/cell-selection/package.json
index e02f40ac29..639f3f3bd6 100644
--- a/samples/grids/data-grid/cell-selection/package.json
+++ b/samples/grids/data-grid/cell-selection/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-animation/package.json b/samples/grids/data-grid/column-animation/package.json
index eeb8db728b..0d1149f11d 100644
--- a/samples/grids/data-grid/column-animation/package.json
+++ b/samples/grids/data-grid/column-animation/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-chooser-picker/package.json b/samples/grids/data-grid/column-chooser-picker/package.json
index 9e61ca7273..e2db78558f 100644
--- a/samples/grids/data-grid/column-chooser-picker/package.json
+++ b/samples/grids/data-grid/column-chooser-picker/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-chooser-toolbar/package.json b/samples/grids/data-grid/column-chooser-toolbar/package.json
index 29c7bcd9d7..a354920be2 100644
--- a/samples/grids/data-grid/column-chooser-toolbar/package.json
+++ b/samples/grids/data-grid/column-chooser-toolbar/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-filter-expressions/package.json b/samples/grids/data-grid/column-filter-expressions/package.json
index 4fad5d388d..8a64fc7288 100644
--- a/samples/grids/data-grid/column-filter-expressions/package.json
+++ b/samples/grids/data-grid/column-filter-expressions/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-filter-operands/package.json b/samples/grids/data-grid/column-filter-operands/package.json
index c06ea38777..a00a8cb80a 100644
--- a/samples/grids/data-grid/column-filter-operands/package.json
+++ b/samples/grids/data-grid/column-filter-operands/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-filtering/package.json b/samples/grids/data-grid/column-filtering/package.json
index 5a8716df2a..d4b62c895b 100644
--- a/samples/grids/data-grid/column-filtering/package.json
+++ b/samples/grids/data-grid/column-filtering/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-moving/package.json b/samples/grids/data-grid/column-moving/package.json
index 9e79e8dffc..77a4e68cc1 100644
--- a/samples/grids/data-grid/column-moving/package.json
+++ b/samples/grids/data-grid/column-moving/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-options/package.json b/samples/grids/data-grid/column-options/package.json
index 5362101555..bd81975c50 100644
--- a/samples/grids/data-grid/column-options/package.json
+++ b/samples/grids/data-grid/column-options/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-pinning-picker/package.json b/samples/grids/data-grid/column-pinning-picker/package.json
index 3a3f901959..e1c76c4cc5 100644
--- a/samples/grids/data-grid/column-pinning-picker/package.json
+++ b/samples/grids/data-grid/column-pinning-picker/package.json
@@ -25,10 +25,10 @@
     "@webcomponents/webcomponentsjs": "2.3.0",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-pinning-toolbar/package.json b/samples/grids/data-grid/column-pinning-toolbar/package.json
index 8d04d8555c..9c193d8b08 100644
--- a/samples/grids/data-grid/column-pinning-toolbar/package.json
+++ b/samples/grids/data-grid/column-pinning-toolbar/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-resizing/package.json b/samples/grids/data-grid/column-resizing/package.json
index 7421209cbe..d085505b3c 100644
--- a/samples/grids/data-grid/column-resizing/package.json
+++ b/samples/grids/data-grid/column-resizing/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-scrolling/package.json b/samples/grids/data-grid/column-scrolling/package.json
index b66ad8a4ce..c61610b84a 100644
--- a/samples/grids/data-grid/column-scrolling/package.json
+++ b/samples/grids/data-grid/column-scrolling/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-sorting/package.json b/samples/grids/data-grid/column-sorting/package.json
index 358eed1b45..65fa928bf6 100644
--- a/samples/grids/data-grid/column-sorting/package.json
+++ b/samples/grids/data-grid/column-sorting/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-summaries/package.json b/samples/grids/data-grid/column-summaries/package.json
index 13767a52d2..333b3e49cd 100644
--- a/samples/grids/data-grid/column-summaries/package.json
+++ b/samples/grids/data-grid/column-summaries/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/column-types/package.json b/samples/grids/data-grid/column-types/package.json
index c7e6116a1d..536029098f 100644
--- a/samples/grids/data-grid/column-types/package.json
+++ b/samples/grids/data-grid/column-types/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/load-save-layout/package.json b/samples/grids/data-grid/load-save-layout/package.json
index 33f9d3093b..ef3e280cfd 100644
--- a/samples/grids/data-grid/load-save-layout/package.json
+++ b/samples/grids/data-grid/load-save-layout/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/load-save-layout/src/index.ts b/samples/grids/data-grid/load-save-layout/src/index.ts
index e5f002bcb5..1da0f607d8 100644
--- a/samples/grids/data-grid/load-save-layout/src/index.ts
+++ b/samples/grids/data-grid/load-save-layout/src/index.ts
@@ -86,14 +86,13 @@ export class DataGridLoadSaveLayout {
                 this.loadButton.disabled = true;
             }
         }
-       
+
         this.saveButton = document.getElementById('saveClick') as HTMLButtonElement;
         if (this.saveButton !== null){
             this.saveButton.onclick = this.onSaveClick;
         }
     }
 
-    
 }
 
 new DataGridLoadSaveLayout();
diff --git a/samples/grids/data-grid/localization/package.json b/samples/grids/data-grid/localization/package.json
index 6fdef739c0..7dc5fc55d5 100644
--- a/samples/grids/data-grid/localization/package.json
+++ b/samples/grids/data-grid/localization/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/localization/src/index.ts b/samples/grids/data-grid/localization/src/index.ts
index 10b5e6aec4..f4e8279229 100644
--- a/samples/grids/data-grid/localization/src/index.ts
+++ b/samples/grids/data-grid/localization/src/index.ts
@@ -30,7 +30,7 @@ export class DataGridLocalization {
         // If your browser language is JA then you should use "ja" after eg."DataGrid-ja" etc.  The grid will automatically look for the correct
         // suffix based on what the browser language is. This means you could force the grid to use the Japanese resources for whatever
         // the browser culture is by registering it for each language.
-        
+
         //Localization.register("DataGrid-ja", new CustomDataGridLocaleJa());
 
         //Register custom strings for column options in the DataGrid
diff --git a/samples/grids/data-grid/overview/package.json b/samples/grids/data-grid/overview/package.json
index 4d750e838b..52a4e7c416 100644
--- a/samples/grids/data-grid/overview/package.json
+++ b/samples/grids/data-grid/overview/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/pager/package.json b/samples/grids/data-grid/pager/package.json
index 44a8d6e052..036c5c839e 100644
--- a/samples/grids/data-grid/pager/package.json
+++ b/samples/grids/data-grid/pager/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/performance/package.json b/samples/grids/data-grid/performance/package.json
index 11c573c5ef..f66d6ff7d9 100644
--- a/samples/grids/data-grid/performance/package.json
+++ b/samples/grids/data-grid/performance/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/performance/src/index.ts b/samples/grids/data-grid/performance/src/index.ts
index 9cdd03e1db..32058b8ac4 100644
--- a/samples/grids/data-grid/performance/src/index.ts
+++ b/samples/grids/data-grid/performance/src/index.ts
@@ -595,6 +595,6 @@ export class SalesPerson {
     PercentChange!: number;
     YearToDateSales!: number;
     DateValue!: Date;
-} 
+}
 
 new DataGridPerformance();
diff --git a/samples/grids/data-grid/row-group-descriptions/package.json b/samples/grids/data-grid/row-group-descriptions/package.json
index 345a9d64dc..c36ecc315e 100644
--- a/samples/grids/data-grid/row-group-descriptions/package.json
+++ b/samples/grids/data-grid/row-group-descriptions/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/row-grouping/package.json b/samples/grids/data-grid/row-grouping/package.json
index 345a9d64dc..c36ecc315e 100644
--- a/samples/grids/data-grid/row-grouping/package.json
+++ b/samples/grids/data-grid/row-grouping/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/row-highlighting/package.json b/samples/grids/data-grid/row-highlighting/package.json
index 56a6abd31d..88bc2d2119 100644
--- a/samples/grids/data-grid/row-highlighting/package.json
+++ b/samples/grids/data-grid/row-highlighting/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/row-paging/package.json b/samples/grids/data-grid/row-paging/package.json
index 9bb24b277c..1c44004c73 100644
--- a/samples/grids/data-grid/row-paging/package.json
+++ b/samples/grids/data-grid/row-paging/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/row-pinning/package.json b/samples/grids/data-grid/row-pinning/package.json
index 82792bf945..5967e36ee9 100644
--- a/samples/grids/data-grid/row-pinning/package.json
+++ b/samples/grids/data-grid/row-pinning/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/row-selection/package.json b/samples/grids/data-grid/row-selection/package.json
index e02f40ac29..639f3f3bd6 100644
--- a/samples/grids/data-grid/row-selection/package.json
+++ b/samples/grids/data-grid/row-selection/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/type-comparison-table/package.json b/samples/grids/data-grid/type-comparison-table/package.json
index 98b18f3c88..ceecb75ca7 100644
--- a/samples/grids/data-grid/type-comparison-table/package.json
+++ b/samples/grids/data-grid/type-comparison-table/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-datasources": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-datasources": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/type-heatmap-table/package.json b/samples/grids/data-grid/type-heatmap-table/package.json
index b6f7774f7a..076e4fb615 100644
--- a/samples/grids/data-grid/type-heatmap-table/package.json
+++ b/samples/grids/data-grid/type-heatmap-table/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/type-marketing-table/package.json b/samples/grids/data-grid/type-marketing-table/package.json
index b6913ebcda..aeb511d892 100644
--- a/samples/grids/data-grid/type-marketing-table/package.json
+++ b/samples/grids/data-grid/type-marketing-table/package.json
@@ -23,11 +23,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/type-matrix-table/package.json b/samples/grids/data-grid/type-matrix-table/package.json
index 695db7f222..e6b25503ad 100644
--- a/samples/grids/data-grid/type-matrix-table/package.json
+++ b/samples/grids/data-grid/type-matrix-table/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/type-periodic-table/package.json b/samples/grids/data-grid/type-periodic-table/package.json
index f4fb8ecf79..f0eea9273d 100644
--- a/samples/grids/data-grid/type-periodic-table/package.json
+++ b/samples/grids/data-grid/type-periodic-table/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/data-grid/type-table/package.json b/samples/grids/data-grid/type-table/package.json
index 54c25cb9c2..43fa948b64 100644
--- a/samples/grids/data-grid/type-table/package.json
+++ b/samples/grids/data-grid/type-table/package.json
@@ -23,10 +23,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/action-strip/package.json b/samples/grids/grid/action-strip/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/action-strip/package.json
+++ b/samples/grids/grid/action-strip/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/action-strip/sandbox.config.json b/samples/grids/grid/action-strip/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/action-strip/sandbox.config.json
+++ b/samples/grids/grid/action-strip/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/action-strip/src/index.css b/samples/grids/grid/action-strip/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/action-strip/src/index.css
+++ b/samples/grids/grid/action-strip/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/action-strip/src/index.ts b/samples/grids/grid/action-strip/src/index.ts
index 46b8ac990d..d5e80e3cff 100644
--- a/samples/grids/grid/action-strip/src/index.ts
+++ b/samples/grids/grid/action-strip/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -27,6 +27,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private actionStrip: IgcActionStripComponent
     private productName: IgcColumnComponent
     private unitPrice: IgcColumnComponent
@@ -53,7 +54,6 @@ export class Sample {
             grid.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/action-strip/tsconfig.json b/samples/grids/grid/action-strip/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/action-strip/tsconfig.json
+++ b/samples/grids/grid/action-strip/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/action-strip/webpack.config.js b/samples/grids/grid/action-strip/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/action-strip/webpack.config.js
+++ b/samples/grids/grid/action-strip/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/advanced-filtering-options/package.json b/samples/grids/grid/advanced-filtering-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/advanced-filtering-options/package.json
+++ b/samples/grids/grid/advanced-filtering-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/advanced-filtering-options/sandbox.config.json b/samples/grids/grid/advanced-filtering-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/advanced-filtering-options/sandbox.config.json
+++ b/samples/grids/grid/advanced-filtering-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/advanced-filtering-options/src/index.css b/samples/grids/grid/advanced-filtering-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/advanced-filtering-options/src/index.css
+++ b/samples/grids/grid/advanced-filtering-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/advanced-filtering-options/src/index.ts b/samples/grids/grid/advanced-filtering-options/src/index.ts
index eda73fd819..945ac3f54e 100644
--- a/samples/grids/grid/advanced-filtering-options/src/index.ts
+++ b/samples/grids/grid/advanced-filtering-options/src/index.ts
@@ -4,11 +4,11 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import NwindData from './NwindData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridDiscontinuedCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/advanced-filtering-options/tsconfig.json b/samples/grids/grid/advanced-filtering-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/advanced-filtering-options/tsconfig.json
+++ b/samples/grids/grid/advanced-filtering-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/advanced-filtering-options/webpack.config.js b/samples/grids/grid/advanced-filtering-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/advanced-filtering-options/webpack.config.js
+++ b/samples/grids/grid/advanced-filtering-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/advanced-filtering-style/package.json b/samples/grids/grid/advanced-filtering-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/advanced-filtering-style/package.json
+++ b/samples/grids/grid/advanced-filtering-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/advanced-filtering-style/sandbox.config.json b/samples/grids/grid/advanced-filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/advanced-filtering-style/sandbox.config.json
+++ b/samples/grids/grid/advanced-filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/advanced-filtering-style/src/index.css b/samples/grids/grid/advanced-filtering-style/src/index.css
index 397fba0990..0fe9368715 100644
--- a/samples/grids/grid/advanced-filtering-style/src/index.css
+++ b/samples/grids/grid/advanced-filtering-style/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-filtering-row-background: #ffcd0f;
-    --ig-grid-filtering-background-or: #d83434;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/advanced-filtering-style/src/index.ts b/samples/grids/grid/advanced-filtering-style/src/index.ts
index eda73fd819..945ac3f54e 100644
--- a/samples/grids/grid/advanced-filtering-style/src/index.ts
+++ b/samples/grids/grid/advanced-filtering-style/src/index.ts
@@ -4,11 +4,11 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import NwindData from './NwindData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridDiscontinuedCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/advanced-filtering-style/tsconfig.json b/samples/grids/grid/advanced-filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/advanced-filtering-style/tsconfig.json
+++ b/samples/grids/grid/advanced-filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/advanced-filtering-style/webpack.config.js b/samples/grids/grid/advanced-filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/advanced-filtering-style/webpack.config.js
+++ b/samples/grids/grid/advanced-filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/binding-composite-data/package.json b/samples/grids/grid/binding-composite-data/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/binding-composite-data/package.json
+++ b/samples/grids/grid/binding-composite-data/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/binding-composite-data/sandbox.config.json b/samples/grids/grid/binding-composite-data/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/binding-composite-data/sandbox.config.json
+++ b/samples/grids/grid/binding-composite-data/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/binding-composite-data/src/index.css b/samples/grids/grid/binding-composite-data/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/binding-composite-data/src/index.css
+++ b/samples/grids/grid/binding-composite-data/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/binding-composite-data/src/index.ts b/samples/grids/grid/binding-composite-data/src/index.ts
index ef5acf29f1..3093a73a11 100644
--- a/samples/grids/grid/binding-composite-data/src/index.ts
+++ b/samples/grids/grid/binding-composite-data/src/index.ts
@@ -4,10 +4,10 @@ import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -32,7 +32,6 @@ export class Sample {
             column2.inlineEditorTemplate = this.webGridCompositeAddressEditCellTemplate;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
@@ -44,7 +43,6 @@ export class Sample {
         return this._customersData;
     }
 
-
     public webGridCompositeContactCellTemplate = (ctx: IgcCellTemplateContext) => {
         var cell = ctx.cell as any;
         if (cell === undefined || cell.row === undefined || cell.row.data === undefined) {
diff --git a/samples/grids/grid/binding-composite-data/tsconfig.json b/samples/grids/grid/binding-composite-data/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/binding-composite-data/tsconfig.json
+++ b/samples/grids/grid/binding-composite-data/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/binding-composite-data/webpack.config.js b/samples/grids/grid/binding-composite-data/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/binding-composite-data/webpack.config.js
+++ b/samples/grids/grid/binding-composite-data/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/binding-crud-data/package.json b/samples/grids/grid/binding-crud-data/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/binding-crud-data/package.json
+++ b/samples/grids/grid/binding-crud-data/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/binding-crud-data/sandbox.config.json b/samples/grids/grid/binding-crud-data/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/binding-crud-data/sandbox.config.json
+++ b/samples/grids/grid/binding-crud-data/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/binding-crud-data/src/index.css b/samples/grids/grid/binding-crud-data/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/binding-crud-data/src/index.css
+++ b/samples/grids/grid/binding-crud-data/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/binding-crud-data/src/index.ts b/samples/grids/grid/binding-crud-data/src/index.ts
index af9695c0ea..cb69a7bd62 100644
--- a/samples/grids/grid/binding-crud-data/src/index.ts
+++ b/samples/grids/grid/binding-crud-data/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -35,7 +35,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/binding-crud-data/tsconfig.json b/samples/grids/grid/binding-crud-data/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/binding-crud-data/tsconfig.json
+++ b/samples/grids/grid/binding-crud-data/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/binding-crud-data/webpack.config.js b/samples/grids/grid/binding-crud-data/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/binding-crud-data/webpack.config.js
+++ b/samples/grids/grid/binding-crud-data/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/binding-nested-data-1/package.json b/samples/grids/grid/binding-nested-data-1/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/binding-nested-data-1/package.json
+++ b/samples/grids/grid/binding-nested-data-1/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/binding-nested-data-1/sandbox.config.json b/samples/grids/grid/binding-nested-data-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/binding-nested-data-1/sandbox.config.json
+++ b/samples/grids/grid/binding-nested-data-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/binding-nested-data-1/src/index.css b/samples/grids/grid/binding-nested-data-1/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/binding-nested-data-1/src/index.css
+++ b/samples/grids/grid/binding-nested-data-1/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/binding-nested-data-1/src/index.ts b/samples/grids/grid/binding-nested-data-1/src/index.ts
index 21d40943ee..297e5f989d 100644
--- a/samples/grids/grid/binding-nested-data-1/src/index.ts
+++ b/samples/grids/grid/binding-nested-data-1/src/index.ts
@@ -3,10 +3,10 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -26,7 +26,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridNestedDataCellTemplate;
         }
         this._bind();
-
     }
 
     private _employeesNestedData: EmployeesNestedData = null;
@@ -38,7 +37,6 @@ export class Sample {
         return this._employeesNestedData;
     }
 
-
     public webGridNestedDataCellTemplate = (ctx: IgcCellTemplateContext) => {
         if (ctx.cell.value != null) {
             if (ctx.cell.value.length === 0) return html``;
diff --git a/samples/grids/grid/binding-nested-data-1/tsconfig.json b/samples/grids/grid/binding-nested-data-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/binding-nested-data-1/tsconfig.json
+++ b/samples/grids/grid/binding-nested-data-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/binding-nested-data-1/webpack.config.js b/samples/grids/grid/binding-nested-data-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/binding-nested-data-1/webpack.config.js
+++ b/samples/grids/grid/binding-nested-data-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/cascading-combo/package.json b/samples/grids/grid/cascading-combo/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/cascading-combo/package.json
+++ b/samples/grids/grid/cascading-combo/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/cascading-combo/sandbox.config.json b/samples/grids/grid/cascading-combo/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/cascading-combo/sandbox.config.json
+++ b/samples/grids/grid/cascading-combo/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/cascading-combo/src/index.css b/samples/grids/grid/cascading-combo/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/cascading-combo/src/index.css
+++ b/samples/grids/grid/cascading-combo/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/cascading-combo/src/index.ts b/samples/grids/grid/cascading-combo/src/index.ts
index daf09fa003..49cdd21dfe 100644
--- a/samples/grids/grid/cascading-combo/src/index.ts
+++ b/samples/grids/grid/cascading-combo/src/index.ts
@@ -4,10 +4,10 @@ import { WorldCitiesAbove500KItem, WorldCitiesAbove500K } from './WorldCitiesAbo
 import { IgcComboComponent, IgcLinearProgressComponent } from 'igniteui-webcomponents';
 import { IgcCellTemplateContext, IgcRenderFunction } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             column3.bodyTemplate = this.webGridCityDropDownTemplate;
         }
         this._bind();
-
     }
 
     private _worldCitiesAbove500K: WorldCitiesAbove500K = null;
@@ -47,7 +46,6 @@ export class Sample {
         return this._worldCitiesAbove500K;
     }
 
-
     public countryNames = [
         'United States',
         'Japan',
diff --git a/samples/grids/grid/cascading-combo/tsconfig.json b/samples/grids/grid/cascading-combo/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/cascading-combo/tsconfig.json
+++ b/samples/grids/grid/cascading-combo/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/cascading-combo/webpack.config.js b/samples/grids/grid/cascading-combo/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/cascading-combo/webpack.config.js
+++ b/samples/grids/grid/cascading-combo/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/cell-editing-sample/package.json b/samples/grids/grid/cell-editing-sample/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/cell-editing-sample/package.json
+++ b/samples/grids/grid/cell-editing-sample/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/cell-editing-sample/sandbox.config.json b/samples/grids/grid/cell-editing-sample/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/cell-editing-sample/sandbox.config.json
+++ b/samples/grids/grid/cell-editing-sample/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/cell-editing-sample/src/index.css b/samples/grids/grid/cell-editing-sample/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/cell-editing-sample/src/index.css
+++ b/samples/grids/grid/cell-editing-sample/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/cell-editing-sample/src/index.ts b/samples/grids/grid/cell-editing-sample/src/index.ts
index 313d95cbef..baa124dd7a 100644
--- a/samples/grids/grid/cell-editing-sample/src/index.ts
+++ b/samples/grids/grid/cell-editing-sample/src/index.ts
@@ -4,10 +4,10 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import { RoleplayDataStatsItem, RoleplayDataStats } from './RoleplayDataStats';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -33,7 +33,6 @@ export class Sample {
             column3.inlineEditorTemplate = this.webGridCellEditCellTemplate;
         }
         this._bind();
-
     }
 
     private _roleplayDataStats: RoleplayDataStats = null;
diff --git a/samples/grids/grid/cell-editing-sample/tsconfig.json b/samples/grids/grid/cell-editing-sample/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/cell-editing-sample/tsconfig.json
+++ b/samples/grids/grid/cell-editing-sample/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/cell-editing-sample/webpack.config.js b/samples/grids/grid/cell-editing-sample/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/cell-editing-sample/webpack.config.js
+++ b/samples/grids/grid/cell-editing-sample/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/cell-editing-styling/package.json b/samples/grids/grid/cell-editing-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/cell-editing-styling/package.json
+++ b/samples/grids/grid/cell-editing-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/cell-editing-styling/sandbox.config.json b/samples/grids/grid/cell-editing-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/cell-editing-styling/sandbox.config.json
+++ b/samples/grids/grid/cell-editing-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/cell-editing-styling/src/index.css b/samples/grids/grid/cell-editing-styling/src/index.css
index aea51891e1..0fe9368715 100644
--- a/samples/grids/grid/cell-editing-styling/src/index.css
+++ b/samples/grids/grid/cell-editing-styling/src/index.css
@@ -1,13 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
-    #grid {
-        --ig-grid-edit-mode-color: #FFA500;
-        --ig-grid-cell-active-border-color: #AAFF00;
-        --ig-grid-cell-editing-background: #ADD8E6;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/cell-editing-styling/src/index.ts b/samples/grids/grid/cell-editing-styling/src/index.ts
index a8d57b898f..87fef6fdbe 100644
--- a/samples/grids/grid/cell-editing-styling/src/index.ts
+++ b/samples/grids/grid/cell-editing-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/cell-editing-styling/tsconfig.json b/samples/grids/grid/cell-editing-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/cell-editing-styling/tsconfig.json
+++ b/samples/grids/grid/cell-editing-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/cell-editing-styling/webpack.config.js b/samples/grids/grid/cell-editing-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/cell-editing-styling/webpack.config.js
+++ b/samples/grids/grid/cell-editing-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/cell-selection-mode/package.json b/samples/grids/grid/cell-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/cell-selection-mode/package.json
+++ b/samples/grids/grid/cell-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/cell-selection-mode/sandbox.config.json b/samples/grids/grid/cell-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/cell-selection-mode/sandbox.config.json
+++ b/samples/grids/grid/cell-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/cell-selection-mode/src/index.css b/samples/grids/grid/cell-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/cell-selection-mode/src/index.css
+++ b/samples/grids/grid/cell-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/cell-selection-mode/src/index.ts b/samples/grids/grid/cell-selection-mode/src/index.ts
index 3fedfbddb8..71b3ae39d0 100644
--- a/samples/grids/grid/cell-selection-mode/src/index.ts
+++ b/samples/grids/grid/cell-selection-mode/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescrip
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/cell-selection-mode/tsconfig.json b/samples/grids/grid/cell-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/cell-selection-mode/tsconfig.json
+++ b/samples/grids/grid/cell-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/cell-selection-mode/webpack.config.js b/samples/grids/grid/cell-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/cell-selection-mode/webpack.config.js
+++ b/samples/grids/grid/cell-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/cell-selection-style/package.json b/samples/grids/grid/cell-selection-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/cell-selection-style/package.json
+++ b/samples/grids/grid/cell-selection-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/cell-selection-style/sandbox.config.json b/samples/grids/grid/cell-selection-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/cell-selection-style/sandbox.config.json
+++ b/samples/grids/grid/cell-selection-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/cell-selection-style/src/index.css b/samples/grids/grid/cell-selection-style/src/index.css
index 85e1b336ac..0fe9368715 100644
--- a/samples/grids/grid/cell-selection-style/src/index.css
+++ b/samples/grids/grid/cell-selection-style/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --cell-selected-text-color: #FFFFFF;
-    --cell-active-border-color: #f2c43c;
-    --cell-selected-background: #0062a3;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/cell-selection-style/src/index.ts b/samples/grids/grid/cell-selection-style/src/index.ts
index c114565657..d11c648c6f 100644
--- a/samples/grids/grid/cell-selection-style/src/index.ts
+++ b/samples/grids/grid/cell-selection-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/cell-selection-style/tsconfig.json b/samples/grids/grid/cell-selection-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/cell-selection-style/tsconfig.json
+++ b/samples/grids/grid/cell-selection-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/cell-selection-style/webpack.config.js b/samples/grids/grid/cell-selection-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/cell-selection-style/webpack.config.js
+++ b/samples/grids/grid/cell-selection-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/change-icons-custom/package.json b/samples/grids/grid/change-icons-custom/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/grid/change-icons-custom/package.json
+++ b/samples/grids/grid/change-icons-custom/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/change-icons-custom/sandbox.config.json b/samples/grids/grid/change-icons-custom/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/change-icons-custom/sandbox.config.json
+++ b/samples/grids/grid/change-icons-custom/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/change-icons-custom/src/index.css b/samples/grids/grid/change-icons-custom/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/change-icons-custom/src/index.css
+++ b/samples/grids/grid/change-icons-custom/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/change-icons-custom/tsconfig.json b/samples/grids/grid/change-icons-custom/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/change-icons-custom/tsconfig.json
+++ b/samples/grids/grid/change-icons-custom/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/clipboard-operations/package.json b/samples/grids/grid/clipboard-operations/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/grid/clipboard-operations/package.json
+++ b/samples/grids/grid/clipboard-operations/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/clipboard-operations/sandbox.config.json b/samples/grids/grid/clipboard-operations/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/clipboard-operations/sandbox.config.json
+++ b/samples/grids/grid/clipboard-operations/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/clipboard-operations/src/index.css b/samples/grids/grid/clipboard-operations/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/clipboard-operations/src/index.css
+++ b/samples/grids/grid/clipboard-operations/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/clipboard-operations/src/index.ts b/samples/grids/grid/clipboard-operations/src/index.ts
index c7c9ec2ce8..d64a221b65 100644
--- a/samples/grids/grid/clipboard-operations/src/index.ts
+++ b/samples/grids/grid/clipboard-operations/src/index.ts
@@ -52,7 +52,6 @@ export class Sample {
             });
         }
         this._bind();
-
     }
 
     private _nwindData: NwindData = null;
diff --git a/samples/grids/grid/clipboard-operations/tsconfig.json b/samples/grids/grid/clipboard-operations/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/clipboard-operations/tsconfig.json
+++ b/samples/grids/grid/clipboard-operations/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-auto-sizing/package.json b/samples/grids/grid/column-auto-sizing/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-auto-sizing/package.json
+++ b/samples/grids/grid/column-auto-sizing/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-auto-sizing/sandbox.config.json b/samples/grids/grid/column-auto-sizing/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-auto-sizing/sandbox.config.json
+++ b/samples/grids/grid/column-auto-sizing/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-auto-sizing/src/index.css b/samples/grids/grid/column-auto-sizing/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-auto-sizing/src/index.css
+++ b/samples/grids/grid/column-auto-sizing/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-auto-sizing/src/index.ts b/samples/grids/grid/column-auto-sizing/src/index.ts
index c114565657..d11c648c6f 100644
--- a/samples/grids/grid/column-auto-sizing/src/index.ts
+++ b/samples/grids/grid/column-auto-sizing/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/column-auto-sizing/tsconfig.json b/samples/grids/grid/column-auto-sizing/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-auto-sizing/tsconfig.json
+++ b/samples/grids/grid/column-auto-sizing/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-auto-sizing/webpack.config.js b/samples/grids/grid/column-auto-sizing/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-auto-sizing/webpack.config.js
+++ b/samples/grids/grid/column-auto-sizing/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-collapsible-groups/package.json b/samples/grids/grid/column-collapsible-groups/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-collapsible-groups/package.json
+++ b/samples/grids/grid/column-collapsible-groups/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-collapsible-groups/sandbox.config.json b/samples/grids/grid/column-collapsible-groups/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-collapsible-groups/sandbox.config.json
+++ b/samples/grids/grid/column-collapsible-groups/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-collapsible-groups/src/index.css b/samples/grids/grid/column-collapsible-groups/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-collapsible-groups/src/index.css
+++ b/samples/grids/grid/column-collapsible-groups/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-collapsible-groups/src/index.ts b/samples/grids/grid/column-collapsible-groups/src/index.ts
index c58f1047ea..a1b802abe0 100644
--- a/samples/grids/grid/column-collapsible-groups/src/index.ts
+++ b/samples/grids/grid/column-collapsible-groups/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.invoicesData;
         }
         this._bind();
-
     }
 
     private _invoicesData: InvoicesData = null;
diff --git a/samples/grids/grid/column-collapsible-groups/tsconfig.json b/samples/grids/grid/column-collapsible-groups/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-collapsible-groups/tsconfig.json
+++ b/samples/grids/grid/column-collapsible-groups/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-collapsible-groups/webpack.config.js b/samples/grids/grid/column-collapsible-groups/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-collapsible-groups/webpack.config.js
+++ b/samples/grids/grid/column-collapsible-groups/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-data-types/package.json b/samples/grids/grid/column-data-types/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-data-types/package.json
+++ b/samples/grids/grid/column-data-types/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-data-types/sandbox.config.json b/samples/grids/grid/column-data-types/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-data-types/sandbox.config.json
+++ b/samples/grids/grid/column-data-types/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-data-types/src/index.css b/samples/grids/grid/column-data-types/src/index.css
index db87b63a60..0fe9368715 100644
--- a/samples/grids/grid/column-data-types/src/index.css
+++ b/samples/grids/grid/column-data-types/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-small);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-data-types/src/index.ts b/samples/grids/grid/column-data-types/src/index.ts
index 29576c437b..9ea0fba33c 100644
--- a/samples/grids/grid/column-data-types/src/index.ts
+++ b/samples/grids/grid/column-data-types/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataExtendedDates } from './InvoicesDataExtendedDates';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -22,6 +22,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private column2: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -35,6 +36,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private column3: IgcColumnComponent
     private _columnPipeArgs3: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs3(): IgcColumnPipeArgs {
@@ -47,6 +49,7 @@ export class Sample {
         }
         return this._columnPipeArgs3;
     }
+
     private column4: IgcColumnComponent
     private _columnPipeArgs4: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs4(): IgcColumnPipeArgs {
@@ -60,6 +63,7 @@ export class Sample {
         }
         return this._columnPipeArgs4;
     }
+
     private column5: IgcColumnComponent
     private _columnPipeArgs5: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs5(): IgcColumnPipeArgs {
@@ -73,6 +77,7 @@ export class Sample {
         }
         return this._columnPipeArgs5;
     }
+
     private column6: IgcColumnComponent
     private _columnPipeArgs6: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs6(): IgcColumnPipeArgs {
@@ -86,6 +91,7 @@ export class Sample {
         }
         return this._columnPipeArgs6;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -107,7 +113,6 @@ export class Sample {
             column6.pipeArgs = this.columnPipeArgs6;
         }
         this._bind();
-
     }
 
     private _invoicesDataExtendedDates: InvoicesDataExtendedDates = null;
diff --git a/samples/grids/grid/column-data-types/tsconfig.json b/samples/grids/grid/column-data-types/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-data-types/tsconfig.json
+++ b/samples/grids/grid/column-data-types/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-data-types/webpack.config.js b/samples/grids/grid/column-data-types/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-data-types/webpack.config.js
+++ b/samples/grids/grid/column-data-types/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-hiding-options/package.json b/samples/grids/grid/column-hiding-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-hiding-options/package.json
+++ b/samples/grids/grid/column-hiding-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-hiding-options/sandbox.config.json b/samples/grids/grid/column-hiding-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-hiding-options/sandbox.config.json
+++ b/samples/grids/grid/column-hiding-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-hiding-options/src/index.css b/samples/grids/grid/column-hiding-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-hiding-options/src/index.css
+++ b/samples/grids/grid/column-hiding-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-hiding-options/src/index.ts b/samples/grids/grid/column-hiding-options/src/index.ts
index f2b64236af..e022786cd4 100644
--- a/samples/grids/grid/column-hiding-options/src/index.ts
+++ b/samples/grids/grid/column-hiding-options/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -39,7 +39,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/column-hiding-options/tsconfig.json b/samples/grids/grid/column-hiding-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-hiding-options/tsconfig.json
+++ b/samples/grids/grid/column-hiding-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-hiding-options/webpack.config.js b/samples/grids/grid/column-hiding-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-hiding-options/webpack.config.js
+++ b/samples/grids/grid/column-hiding-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-hiding-toolbar-style/package.json b/samples/grids/grid/column-hiding-toolbar-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/package.json
+++ b/samples/grids/grid/column-hiding-toolbar-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-hiding-toolbar-style/sandbox.config.json b/samples/grids/grid/column-hiding-toolbar-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/sandbox.config.json
+++ b/samples/grids/grid/column-hiding-toolbar-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-hiding-toolbar-style/src/index.css b/samples/grids/grid/column-hiding-toolbar-style/src/index.css
index fe0a4add53..0fe9368715 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/src/index.css
+++ b/samples/grids/grid/column-hiding-toolbar-style/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    .grid igc-grid-toolbar-actions, igx-column-actions {
-        --ig-column-actions-background-color: #292826;
-        --ig-column-actions-title-color: #ffcd0f;
-        --ig-checkbox-tick-color: #292826;
-        --ig-checkbox-label-color: #ffcd0f;
-        --ig-checkbox-empty-color: #ffcd0f;
-        --ig-checkbox-fill-color: #ffcd0f;
-        --ig-input-group-idle-text-color: white;
-        --ig-input-group-filled-text-color: #ffcd0f;
-        --ig-input-group-focused-text-color: #ffcd0f;
-        --ig-input-group-focused-border-color: #ffcd0f;
-        --ig-input-group-focused-secondary-color: #ffcd0f;
-        --igx-button-foreground: #292826;
-        --igx-button-background: #ffcd0f;
-        --igx-button-hover-background: #404040;
-        --igx-button-hover-foreground: #ffcd0f;
-        --igx-button-focus-background: #ffcd0f;
-        --igx-button-focus-foreground: black;
-        --igx-button-focus-visible-background: #ffcd0f;
-        --igx-button-focus-visible-foreground: black;
-        --igx-button-disabled-foreground: #ffcd0f;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-hiding-toolbar-style/src/index.ts b/samples/grids/grid/column-hiding-toolbar-style/src/index.ts
index f2b64236af..e022786cd4 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/src/index.ts
+++ b/samples/grids/grid/column-hiding-toolbar-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -39,7 +39,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/column-hiding-toolbar-style/tsconfig.json b/samples/grids/grid/column-hiding-toolbar-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/tsconfig.json
+++ b/samples/grids/grid/column-hiding-toolbar-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-hiding-toolbar-style/webpack.config.js b/samples/grids/grid/column-hiding-toolbar-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/webpack.config.js
+++ b/samples/grids/grid/column-hiding-toolbar-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-hiding-toolbar/package.json b/samples/grids/grid/column-hiding-toolbar/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-hiding-toolbar/package.json
+++ b/samples/grids/grid/column-hiding-toolbar/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-hiding-toolbar/sandbox.config.json b/samples/grids/grid/column-hiding-toolbar/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-hiding-toolbar/sandbox.config.json
+++ b/samples/grids/grid/column-hiding-toolbar/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-hiding-toolbar/src/index.css b/samples/grids/grid/column-hiding-toolbar/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-hiding-toolbar/src/index.css
+++ b/samples/grids/grid/column-hiding-toolbar/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-hiding-toolbar/src/index.ts b/samples/grids/grid/column-hiding-toolbar/src/index.ts
index f2b64236af..e022786cd4 100644
--- a/samples/grids/grid/column-hiding-toolbar/src/index.ts
+++ b/samples/grids/grid/column-hiding-toolbar/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -39,7 +39,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/column-hiding-toolbar/tsconfig.json b/samples/grids/grid/column-hiding-toolbar/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-hiding-toolbar/tsconfig.json
+++ b/samples/grids/grid/column-hiding-toolbar/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-hiding-toolbar/webpack.config.js b/samples/grids/grid/column-hiding-toolbar/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-hiding-toolbar/webpack.config.js
+++ b/samples/grids/grid/column-hiding-toolbar/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-moving-options/package.json b/samples/grids/grid/column-moving-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/column-moving-options/package.json
+++ b/samples/grids/grid/column-moving-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-moving-options/sandbox.config.json b/samples/grids/grid/column-moving-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-moving-options/sandbox.config.json
+++ b/samples/grids/grid/column-moving-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-moving-options/src/index.css b/samples/grids/grid/column-moving-options/src/index.css
index 77958e8090..0fe9368715 100644
--- a/samples/grids/grid/column-moving-options/src/index.css
+++ b/samples/grids/grid/column-moving-options/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cellAlignStyle {
-    text-align: right;
-    float:right;
-}
-.cellAlignStyle > span {
-    float:right;
-}
-.up {
-    color: green;
-}
-.down {
-    color: red;
-}
-.grid__wrapper {
-  padding: 16px;
-}
-.currency-badge-container {
-    width: 80px;
-    float: right;
-}
-.badge-left {
-    float: left;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-moving-options/src/index.ts b/samples/grids/grid/column-moving-options/src/index.ts
index 002ad91129..c7827b8a9a 100644
--- a/samples/grids/grid/column-moving-options/src/index.ts
+++ b/samples/grids/grid/column-moving-options/src/index.ts
@@ -4,10 +4,10 @@ import { FinancialDataAllItem, FinancialDataAll } from './FinancialDataAll';
 import { IgcColumnTemplateContext, IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
 import { IgcBadgeComponent } from 'igniteui-webcomponents';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -30,6 +30,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private column4: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -43,6 +44,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private column5: IgcColumnComponent
     private _columnPipeArgs3: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs3(): IgcColumnPipeArgs {
@@ -56,6 +58,7 @@ export class Sample {
         }
         return this._columnPipeArgs3;
     }
+
     private column6: IgcColumnComponent
     private column7: IgcColumnComponent
     private column8: IgcColumnComponent
@@ -93,7 +96,6 @@ export class Sample {
             column9.headerTemplate = this.webGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _financialDataAll: FinancialDataAll = null;
@@ -105,7 +107,6 @@ export class Sample {
         return this._financialDataAll;
     }
 
-
     public webGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
         const column = (ctx as any).column;
diff --git a/samples/grids/grid/column-moving-options/tsconfig.json b/samples/grids/grid/column-moving-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-moving-options/tsconfig.json
+++ b/samples/grids/grid/column-moving-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-moving-options/webpack.config.js b/samples/grids/grid/column-moving-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-moving-options/webpack.config.js
+++ b/samples/grids/grid/column-moving-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-moving-styles/package.json b/samples/grids/grid/column-moving-styles/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/column-moving-styles/package.json
+++ b/samples/grids/grid/column-moving-styles/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-moving-styles/sandbox.config.json b/samples/grids/grid/column-moving-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-moving-styles/sandbox.config.json
+++ b/samples/grids/grid/column-moving-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-moving-styles/src/index.css b/samples/grids/grid/column-moving-styles/src/index.css
index 923fce7f0d..0fe9368715 100644
--- a/samples/grids/grid/column-moving-styles/src/index.css
+++ b/samples/grids/grid/column-moving-styles/src/index.css
@@ -1,33 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cellAlignStyle {
-    text-align: right;
-    float:right;
-}
-.cellAlignStyle > span {
-    float:right;
-}
-.up {
-    color: green;
-}
-.down {
-    color: red;
-}
-.grid__wrapper {
-  padding: 16px;
-}
-.currency-badge-container {
-    width: 80px;
-    float: right;
-}
-.badge-left {
-    float: left;
-}
-
-#grid {
-    --ig-grid-ghost-header-text-color: #f4d45c;
-    --ig-grid-ghost-header-background: #ad9d9d;
-    --ig-grid-ghost-header-icon-color: #f4d45c;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-moving-styles/src/index.ts b/samples/grids/grid/column-moving-styles/src/index.ts
index 002ad91129..c7827b8a9a 100644
--- a/samples/grids/grid/column-moving-styles/src/index.ts
+++ b/samples/grids/grid/column-moving-styles/src/index.ts
@@ -4,10 +4,10 @@ import { FinancialDataAllItem, FinancialDataAll } from './FinancialDataAll';
 import { IgcColumnTemplateContext, IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
 import { IgcBadgeComponent } from 'igniteui-webcomponents';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -30,6 +30,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private column4: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -43,6 +44,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private column5: IgcColumnComponent
     private _columnPipeArgs3: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs3(): IgcColumnPipeArgs {
@@ -56,6 +58,7 @@ export class Sample {
         }
         return this._columnPipeArgs3;
     }
+
     private column6: IgcColumnComponent
     private column7: IgcColumnComponent
     private column8: IgcColumnComponent
@@ -93,7 +96,6 @@ export class Sample {
             column9.headerTemplate = this.webGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _financialDataAll: FinancialDataAll = null;
@@ -105,7 +107,6 @@ export class Sample {
         return this._financialDataAll;
     }
 
-
     public webGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
         const column = (ctx as any).column;
diff --git a/samples/grids/grid/column-moving-styles/tsconfig.json b/samples/grids/grid/column-moving-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-moving-styles/tsconfig.json
+++ b/samples/grids/grid/column-moving-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-moving-styles/webpack.config.js b/samples/grids/grid/column-moving-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-moving-styles/webpack.config.js
+++ b/samples/grids/grid/column-moving-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-pinning-options/package.json b/samples/grids/grid/column-pinning-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-pinning-options/package.json
+++ b/samples/grids/grid/column-pinning-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-pinning-options/sandbox.config.json b/samples/grids/grid/column-pinning-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-pinning-options/sandbox.config.json
+++ b/samples/grids/grid/column-pinning-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-pinning-options/src/index.css b/samples/grids/grid/column-pinning-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-pinning-options/src/index.css
+++ b/samples/grids/grid/column-pinning-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-pinning-options/src/index.ts b/samples/grids/grid/column-pinning-options/src/index.ts
index b27fd7fd3c..2e7379a0f7 100644
--- a/samples/grids/grid/column-pinning-options/src/index.ts
+++ b/samples/grids/grid/column-pinning-options/src/index.ts
@@ -3,11 +3,11 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -47,7 +47,6 @@ export class Sample {
             column9.headerTemplate = this.webGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
@@ -59,7 +58,6 @@ export class Sample {
         return this._customersData;
     }
 
-
     public webGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
         const column = (ctx as any).column;
diff --git a/samples/grids/grid/column-pinning-options/tsconfig.json b/samples/grids/grid/column-pinning-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-pinning-options/tsconfig.json
+++ b/samples/grids/grid/column-pinning-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-pinning-options/webpack.config.js b/samples/grids/grid/column-pinning-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-pinning-options/webpack.config.js
+++ b/samples/grids/grid/column-pinning-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-pinning-right-side/package.json b/samples/grids/grid/column-pinning-right-side/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/column-pinning-right-side/package.json
+++ b/samples/grids/grid/column-pinning-right-side/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-pinning-right-side/sandbox.config.json b/samples/grids/grid/column-pinning-right-side/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-pinning-right-side/sandbox.config.json
+++ b/samples/grids/grid/column-pinning-right-side/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-pinning-right-side/src/index.css b/samples/grids/grid/column-pinning-right-side/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-pinning-right-side/src/index.css
+++ b/samples/grids/grid/column-pinning-right-side/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-pinning-right-side/src/index.ts b/samples/grids/grid/column-pinning-right-side/src/index.ts
index af169e4710..f6b658b648 100644
--- a/samples/grids/grid/column-pinning-right-side/src/index.ts
+++ b/samples/grids/grid/column-pinning-right-side/src/index.ts
@@ -3,10 +3,10 @@ import { IgcGridComponent, IgcPinningConfig, ColumnPinningPosition, IgcColumnCom
 import { AthletesDataExtendedItem, AthletesDataExtended } from './AthletesDataExtended';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -25,6 +25,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private column1: IgcColumnComponent
     private column2: IgcColumnComponent
     private _bind: () => void;
@@ -41,7 +42,6 @@ export class Sample {
             column2.bodyTemplate = this.webGridAvatarCellTemplate;
         }
         this._bind();
-
     }
 
     private _athletesDataExtended: AthletesDataExtended = null;
@@ -53,7 +53,6 @@ export class Sample {
         return this._athletesDataExtended;
     }
 
-
     public webGridImageCellTemplate = (ctx: IgcCellTemplateContext) => {
         return html`<div>
             <img src="${ctx.cell.value}"
diff --git a/samples/grids/grid/column-pinning-right-side/tsconfig.json b/samples/grids/grid/column-pinning-right-side/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-pinning-right-side/tsconfig.json
+++ b/samples/grids/grid/column-pinning-right-side/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-pinning-right-side/webpack.config.js b/samples/grids/grid/column-pinning-right-side/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-pinning-right-side/webpack.config.js
+++ b/samples/grids/grid/column-pinning-right-side/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-pinning-styles/package.json b/samples/grids/grid/column-pinning-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-pinning-styles/package.json
+++ b/samples/grids/grid/column-pinning-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-pinning-styles/sandbox.config.json b/samples/grids/grid/column-pinning-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-pinning-styles/sandbox.config.json
+++ b/samples/grids/grid/column-pinning-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-pinning-styles/src/index.css b/samples/grids/grid/column-pinning-styles/src/index.css
index 38c34c00bf..0fe9368715 100644
--- a/samples/grids/grid/column-pinning-styles/src/index.css
+++ b/samples/grids/grid/column-pinning-styles/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-pinned-border-width: 5px;
-    --ig-grid-pinned-border-color: #FFCD0F;
-    --ig-grid-pinned-border-style: double;
-    --ig-grid-cell-active-border-color: #FFCD0F;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-pinning-styles/src/index.ts b/samples/grids/grid/column-pinning-styles/src/index.ts
index c114565657..d11c648c6f 100644
--- a/samples/grids/grid/column-pinning-styles/src/index.ts
+++ b/samples/grids/grid/column-pinning-styles/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/column-pinning-styles/tsconfig.json b/samples/grids/grid/column-pinning-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-pinning-styles/tsconfig.json
+++ b/samples/grids/grid/column-pinning-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-pinning-styles/webpack.config.js b/samples/grids/grid/column-pinning-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-pinning-styles/webpack.config.js
+++ b/samples/grids/grid/column-pinning-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-pinning/package.json b/samples/grids/grid/column-pinning/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-pinning/package.json
+++ b/samples/grids/grid/column-pinning/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-pinning/sandbox.config.json b/samples/grids/grid/column-pinning/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-pinning/sandbox.config.json
+++ b/samples/grids/grid/column-pinning/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-pinning/src/index.css b/samples/grids/grid/column-pinning/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-pinning/src/index.css
+++ b/samples/grids/grid/column-pinning/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-pinning/src/index.ts b/samples/grids/grid/column-pinning/src/index.ts
index 9478c6fd13..e8b7babf26 100644
--- a/samples/grids/grid/column-pinning/src/index.ts
+++ b/samples/grids/grid/column-pinning/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import CustomersDataLocal from './CustomersDataLocal.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.customersDataLocal;
         }
         this._bind();
-
     }
 
     private _customersDataLocal: any[] = CustomersDataLocal;
diff --git a/samples/grids/grid/column-pinning/tsconfig.json b/samples/grids/grid/column-pinning/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-pinning/tsconfig.json
+++ b/samples/grids/grid/column-pinning/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-pinning/webpack.config.js b/samples/grids/grid/column-pinning/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-pinning/webpack.config.js
+++ b/samples/grids/grid/column-pinning/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-resize-styling/package.json b/samples/grids/grid/column-resize-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-resize-styling/package.json
+++ b/samples/grids/grid/column-resize-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-resize-styling/sandbox.config.json b/samples/grids/grid/column-resize-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-resize-styling/sandbox.config.json
+++ b/samples/grids/grid/column-resize-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-resize-styling/src/index.css b/samples/grids/grid/column-resize-styling/src/index.css
index 1203da6d95..0fe9368715 100644
--- a/samples/grids/grid/column-resize-styling/src/index.css
+++ b/samples/grids/grid/column-resize-styling/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-resize-line-color: #f35b04;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-resize-styling/src/index.ts b/samples/grids/grid/column-resize-styling/src/index.ts
index fa61408bf5..4e09af215f 100644
--- a/samples/grids/grid/column-resize-styling/src/index.ts
+++ b/samples/grids/grid/column-resize-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { AthletesDataItem, AthletesData } from './AthletesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.athletesData;
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
diff --git a/samples/grids/grid/column-resize-styling/tsconfig.json b/samples/grids/grid/column-resize-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-resize-styling/tsconfig.json
+++ b/samples/grids/grid/column-resize-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-resize-styling/webpack.config.js b/samples/grids/grid/column-resize-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-resize-styling/webpack.config.js
+++ b/samples/grids/grid/column-resize-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-resizing/package.json b/samples/grids/grid/column-resizing/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-resizing/package.json
+++ b/samples/grids/grid/column-resizing/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-resizing/sandbox.config.json b/samples/grids/grid/column-resizing/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-resizing/sandbox.config.json
+++ b/samples/grids/grid/column-resizing/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-resizing/src/index.css b/samples/grids/grid/column-resizing/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-resizing/src/index.css
+++ b/samples/grids/grid/column-resizing/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-resizing/src/index.ts b/samples/grids/grid/column-resizing/src/index.ts
index 0322d23f01..0af52866e0 100644
--- a/samples/grids/grid/column-resizing/src/index.ts
+++ b/samples/grids/grid/column-resizing/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcRowSelectionEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -41,7 +41,6 @@ export class Sample {
             grid.addEventListener("columnResized", this.webGridColumnResized);
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
@@ -53,7 +52,6 @@ export class Sample {
         return this._customersData;
     }
 
-
     public webGridColumnResized(args: CustomEvent<IgcRowSelectionEventArgs>): void {
         //var col = args.detail.column;
         //var pWidth = args.detail.prevWidth;
diff --git a/samples/grids/grid/column-resizing/tsconfig.json b/samples/grids/grid/column-resizing/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-resizing/tsconfig.json
+++ b/samples/grids/grid/column-resizing/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-resizing/webpack.config.js b/samples/grids/grid/column-resizing/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-resizing/webpack.config.js
+++ b/samples/grids/grid/column-resizing/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-selection-group/package.json b/samples/grids/grid/column-selection-group/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-selection-group/package.json
+++ b/samples/grids/grid/column-selection-group/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-selection-group/sandbox.config.json b/samples/grids/grid/column-selection-group/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-selection-group/sandbox.config.json
+++ b/samples/grids/grid/column-selection-group/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-selection-group/src/index.css b/samples/grids/grid/column-selection-group/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-selection-group/src/index.css
+++ b/samples/grids/grid/column-selection-group/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-selection-group/src/index.ts b/samples/grids/grid/column-selection-group/src/index.ts
index c114565657..d11c648c6f 100644
--- a/samples/grids/grid/column-selection-group/src/index.ts
+++ b/samples/grids/grid/column-selection-group/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/column-selection-group/tsconfig.json b/samples/grids/grid/column-selection-group/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-selection-group/tsconfig.json
+++ b/samples/grids/grid/column-selection-group/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-selection-group/webpack.config.js b/samples/grids/grid/column-selection-group/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-selection-group/webpack.config.js
+++ b/samples/grids/grid/column-selection-group/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-selection-mode/package.json b/samples/grids/grid/column-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/column-selection-mode/package.json
+++ b/samples/grids/grid/column-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-selection-mode/sandbox.config.json b/samples/grids/grid/column-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-selection-mode/sandbox.config.json
+++ b/samples/grids/grid/column-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-selection-mode/src/index.css b/samples/grids/grid/column-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-selection-mode/src/index.css
+++ b/samples/grids/grid/column-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-selection-mode/src/index.ts b/samples/grids/grid/column-selection-mode/src/index.ts
index c5edda1d58..9a453794d6 100644
--- a/samples/grids/grid/column-selection-mode/src/index.ts
+++ b/samples/grids/grid/column-selection-mode/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescrip
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/column-selection-mode/tsconfig.json b/samples/grids/grid/column-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-selection-mode/tsconfig.json
+++ b/samples/grids/grid/column-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-selection-mode/webpack.config.js b/samples/grids/grid/column-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-selection-mode/webpack.config.js
+++ b/samples/grids/grid/column-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-selection-styles/package.json b/samples/grids/grid/column-selection-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-selection-styles/package.json
+++ b/samples/grids/grid/column-selection-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-selection-styles/sandbox.config.json b/samples/grids/grid/column-selection-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-selection-styles/sandbox.config.json
+++ b/samples/grids/grid/column-selection-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-selection-styles/src/index.css b/samples/grids/grid/column-selection-styles/src/index.css
index d328109828..0fe9368715 100644
--- a/samples/grids/grid/column-selection-styles/src/index.css
+++ b/samples/grids/grid/column-selection-styles/src/index.css
@@ -1,13 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-row-selected-background: #0062A3;
-    --ig-grid-row-selected-text-color: #ecaa53;
-    --ig-grid-row-selected-hover-background: #0062A3;
-    --ig-grid-header-selected-text-color: #ecaa53;
-    --ig-grid-header-selected-background: #0062A3;
-    --ig-grid-row-selected-hover-text-color: #ecaa53;
-    --ig-grid-row-selected-hover-background: #0062A3;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-selection-styles/src/index.ts b/samples/grids/grid/column-selection-styles/src/index.ts
index c114565657..d11c648c6f 100644
--- a/samples/grids/grid/column-selection-styles/src/index.ts
+++ b/samples/grids/grid/column-selection-styles/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/column-selection-styles/tsconfig.json b/samples/grids/grid/column-selection-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-selection-styles/tsconfig.json
+++ b/samples/grids/grid/column-selection-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-selection-styles/webpack.config.js b/samples/grids/grid/column-selection-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-selection-styles/webpack.config.js
+++ b/samples/grids/grid/column-selection-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-sorting-indicators/package.json b/samples/grids/grid/column-sorting-indicators/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-sorting-indicators/package.json
+++ b/samples/grids/grid/column-sorting-indicators/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-sorting-indicators/sandbox.config.json b/samples/grids/grid/column-sorting-indicators/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-sorting-indicators/sandbox.config.json
+++ b/samples/grids/grid/column-sorting-indicators/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-sorting-indicators/src/index.css b/samples/grids/grid/column-sorting-indicators/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-sorting-indicators/src/index.css
+++ b/samples/grids/grid/column-sorting-indicators/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-sorting-indicators/src/index.ts b/samples/grids/grid/column-sorting-indicators/src/index.ts
index 4d8bfd0119..ef1e412876 100644
--- a/samples/grids/grid/column-sorting-indicators/src/index.ts
+++ b/samples/grids/grid/column-sorting-indicators/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcSortingExpression, SortingDirection } from 'igniteui-webcomponents-grids/grids';
 import { FinancialDataAllItem, FinancialDataAll } from './FinancialDataAll';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -54,6 +54,7 @@ export class Sample {
         }
         return this._sortingExpression1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -64,7 +65,6 @@ export class Sample {
             grid.sortingExpressions = this.sortingExpression1;
         }
         this._bind();
-
     }
 
     private _financialDataAll: FinancialDataAll = null;
diff --git a/samples/grids/grid/column-sorting-indicators/tsconfig.json b/samples/grids/grid/column-sorting-indicators/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-sorting-indicators/tsconfig.json
+++ b/samples/grids/grid/column-sorting-indicators/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-sorting-indicators/webpack.config.js b/samples/grids/grid/column-sorting-indicators/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-sorting-indicators/webpack.config.js
+++ b/samples/grids/grid/column-sorting-indicators/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-sorting-options/package.json b/samples/grids/grid/column-sorting-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/column-sorting-options/package.json
+++ b/samples/grids/grid/column-sorting-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-sorting-options/sandbox.config.json b/samples/grids/grid/column-sorting-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-sorting-options/sandbox.config.json
+++ b/samples/grids/grid/column-sorting-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-sorting-options/src/index.css b/samples/grids/grid/column-sorting-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/column-sorting-options/src/index.css
+++ b/samples/grids/grid/column-sorting-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-sorting-options/src/index.ts b/samples/grids/grid/column-sorting-options/src/index.ts
index bd6b8b525f..0efda97a2c 100644
--- a/samples/grids/grid/column-sorting-options/src/index.ts
+++ b/samples/grids/grid/column-sorting-options/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcGridComponent, IgcSortingExpression, SortingDirection, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import { ProductSalesItem, ProductSales } from './ProductSales';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -40,6 +40,7 @@ export class Sample {
         }
         return this._sortingExpression1;
     }
+
     private column1: IgcColumnComponent
     private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs1(): IgcColumnPipeArgs {
@@ -53,6 +54,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -75,7 +77,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _productSales: ProductSales = null;
diff --git a/samples/grids/grid/column-sorting-options/tsconfig.json b/samples/grids/grid/column-sorting-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-sorting-options/tsconfig.json
+++ b/samples/grids/grid/column-sorting-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-sorting-options/webpack.config.js b/samples/grids/grid/column-sorting-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-sorting-options/webpack.config.js
+++ b/samples/grids/grid/column-sorting-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/column-sorting-style/package.json b/samples/grids/grid/column-sorting-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/column-sorting-style/package.json
+++ b/samples/grids/grid/column-sorting-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/column-sorting-style/sandbox.config.json b/samples/grids/grid/column-sorting-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/column-sorting-style/sandbox.config.json
+++ b/samples/grids/grid/column-sorting-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/column-sorting-style/src/index.css b/samples/grids/grid/column-sorting-style/src/index.css
index 4c1b0d1952..0fe9368715 100644
--- a/samples/grids/grid/column-sorting-style/src/index.css
+++ b/samples/grids/grid/column-sorting-style/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-sorted-header-icon-color: #ffb06a;
-    --ig-grid-sortable-header-icon-hover-color: black;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/column-sorting-style/src/index.ts b/samples/grids/grid/column-sorting-style/src/index.ts
index 8dbd971400..e3e3862ddb 100644
--- a/samples/grids/grid/column-sorting-style/src/index.ts
+++ b/samples/grids/grid/column-sorting-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcSortingExpression, SortingDirection, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import { ProductSalesItem, ProductSales } from './ProductSales';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -25,6 +25,7 @@ export class Sample {
         }
         return this._sortingExpression1;
     }
+
     private column1: IgcColumnComponent
     private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs1(): IgcColumnPipeArgs {
@@ -38,6 +39,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -50,7 +52,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _productSales: ProductSales = null;
diff --git a/samples/grids/grid/column-sorting-style/tsconfig.json b/samples/grids/grid/column-sorting-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/column-sorting-style/tsconfig.json
+++ b/samples/grids/grid/column-sorting-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/column-sorting-style/webpack.config.js b/samples/grids/grid/column-sorting-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/column-sorting-style/webpack.config.js
+++ b/samples/grids/grid/column-sorting-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/conditional-cell-style-1/package.json b/samples/grids/grid/conditional-cell-style-1/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/conditional-cell-style-1/package.json
+++ b/samples/grids/grid/conditional-cell-style-1/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/conditional-cell-style-1/sandbox.config.json b/samples/grids/grid/conditional-cell-style-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/conditional-cell-style-1/sandbox.config.json
+++ b/samples/grids/grid/conditional-cell-style-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/conditional-cell-style-1/src/index.css b/samples/grids/grid/conditional-cell-style-1/src/index.css
index d07f385bc0..0fe9368715 100644
--- a/samples/grids/grid/conditional-cell-style-1/src/index.css
+++ b/samples/grids/grid/conditional-cell-style-1/src/index.css
@@ -1,15 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.upFont {
-    color: green !important;
-}
-
-.downFont {
-    color: red !important;
-}
-
-.topSpeed {
-    color: royalblue !important;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/conditional-cell-style-1/src/index.ts b/samples/grids/grid/conditional-cell-style-1/src/index.ts
index d31a2e34f9..f8f9d9d4e3 100644
--- a/samples/grids/grid/conditional-cell-style-1/src/index.ts
+++ b/samples/grids/grid/conditional-cell-style-1/src/index.ts
@@ -4,12 +4,12 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import { AthletesDataItem, AthletesData } from './AthletesData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -35,7 +35,6 @@ export class Sample {
             column3.bodyTemplate = this.webGridImageCellTemplate;
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
@@ -47,7 +46,6 @@ export class Sample {
         return this._athletesData;
     }
 
-
     public webGridBeatsPerMinuteCellClassesHandler = {
         upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 95,
         downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] <= 95
diff --git a/samples/grids/grid/conditional-cell-style-1/tsconfig.json b/samples/grids/grid/conditional-cell-style-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/conditional-cell-style-1/tsconfig.json
+++ b/samples/grids/grid/conditional-cell-style-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/conditional-cell-style-1/webpack.config.js b/samples/grids/grid/conditional-cell-style-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/conditional-cell-style-1/webpack.config.js
+++ b/samples/grids/grid/conditional-cell-style-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/conditional-cell-style-2/package.json b/samples/grids/grid/conditional-cell-style-2/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/conditional-cell-style-2/package.json
+++ b/samples/grids/grid/conditional-cell-style-2/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/conditional-cell-style-2/sandbox.config.json b/samples/grids/grid/conditional-cell-style-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/conditional-cell-style-2/sandbox.config.json
+++ b/samples/grids/grid/conditional-cell-style-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/conditional-cell-style-2/src/index.css b/samples/grids/grid/conditional-cell-style-2/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/conditional-cell-style-2/src/index.css
+++ b/samples/grids/grid/conditional-cell-style-2/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/conditional-cell-style-2/src/index.ts b/samples/grids/grid/conditional-cell-style-2/src/index.ts
index 2a513e3466..08b8d58ff7 100644
--- a/samples/grids/grid/conditional-cell-style-2/src/index.ts
+++ b/samples/grids/grid/conditional-cell-style-2/src/index.ts
@@ -4,11 +4,11 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import { AthletesDataItem, AthletesData } from './AthletesData';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcRowType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -36,7 +36,6 @@ export class Sample {
             column5.cellStyles = this.webGridCellStylesHandler;
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
diff --git a/samples/grids/grid/conditional-cell-style-2/tsconfig.json b/samples/grids/grid/conditional-cell-style-2/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/conditional-cell-style-2/tsconfig.json
+++ b/samples/grids/grid/conditional-cell-style-2/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/conditional-cell-style-2/webpack.config.js b/samples/grids/grid/conditional-cell-style-2/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/conditional-cell-style-2/webpack.config.js
+++ b/samples/grids/grid/conditional-cell-style-2/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/conditional-row-selectors/package.json b/samples/grids/grid/conditional-row-selectors/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/conditional-row-selectors/package.json
+++ b/samples/grids/grid/conditional-row-selectors/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/conditional-row-selectors/sandbox.config.json b/samples/grids/grid/conditional-row-selectors/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/conditional-row-selectors/sandbox.config.json
+++ b/samples/grids/grid/conditional-row-selectors/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/conditional-row-selectors/src/index.css b/samples/grids/grid/conditional-row-selectors/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/conditional-row-selectors/src/index.css
+++ b/samples/grids/grid/conditional-row-selectors/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/conditional-row-selectors/src/index.ts b/samples/grids/grid/conditional-row-selectors/src/index.ts
index 141e4954b7..cda11ea2f3 100644
--- a/samples/grids/grid/conditional-row-selectors/src/index.ts
+++ b/samples/grids/grid/conditional-row-selectors/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcompone
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcRowSelectionEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -22,7 +22,6 @@ export class Sample {
             grid.addEventListener("rowSelectionChanging", this.webGridRowSelectionConditional);
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/conditional-row-selectors/tsconfig.json b/samples/grids/grid/conditional-row-selectors/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/conditional-row-selectors/tsconfig.json
+++ b/samples/grids/grid/conditional-row-selectors/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/conditional-row-selectors/webpack.config.js b/samples/grids/grid/conditional-row-selectors/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/conditional-row-selectors/webpack.config.js
+++ b/samples/grids/grid/conditional-row-selectors/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/custom-context-menu/package.json b/samples/grids/grid/custom-context-menu/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/grid/custom-context-menu/package.json
+++ b/samples/grids/grid/custom-context-menu/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/custom-context-menu/sandbox.config.json b/samples/grids/grid/custom-context-menu/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/custom-context-menu/sandbox.config.json
+++ b/samples/grids/grid/custom-context-menu/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/custom-context-menu/src/index.css b/samples/grids/grid/custom-context-menu/src/index.css
index c92585ee6a..0fe9368715 100644
--- a/samples/grids/grid/custom-context-menu/src/index.css
+++ b/samples/grids/grid/custom-context-menu/src/index.css
@@ -1,43 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.contextmenu {
-    position: absolute;
-    width: 180px;
-    background: white;
-    display: flex;
-    cursor: context-menu;
-    flex-direction: column;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-    z-index: 9999;
-    font-size: 0.75rem;
-    font-weight: 650;
-}
-
-.item {
-    padding: 10px;
-    display: flex;
-}
-
-.item:hover {
-    background:rgb(204, 203, 203);
-}
-
-.icon {
-    vertical-align: middle;
-    margin-bottom: 5px;
-    margin-right: 5px;
-}
-
-.selected-data-area{
-    overflow-y: auto;
-    width: 50%;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-    margin-left: 10px;
-}
-
-.wrapper{
-    margin: 10px;
-    display: flex;
-    justify-content: space-evenly;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/custom-context-menu/src/index.ts b/samples/grids/grid/custom-context-menu/src/index.ts
index 37bf6d6893..a29cb5f53f 100644
--- a/samples/grids/grid/custom-context-menu/src/index.ts
+++ b/samples/grids/grid/custom-context-menu/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescrip
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents, registerIconFromText } from 'igniteui-webcomponents';
 import "./index.css";
+
 defineAllComponents();
 
 export class Sample {
@@ -19,6 +19,7 @@ export class Sample {
   public clickedCell: any = null;
   public copiedData: any;
   public multiCellSelection: { data: any[] } = { data: [] };
+
   public multiCellArgs: any;
 
   constructor() {
@@ -100,7 +101,6 @@ export class Sample {
     this.toggleContextMenu();
   }
 
-
   public copySelectedData() {
     const selectedData = this.grid.getSelectedData();
     this.copyData(selectedData);
diff --git a/samples/grids/grid/custom-context-menu/tsconfig.json b/samples/grids/grid/custom-context-menu/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/custom-context-menu/tsconfig.json
+++ b/samples/grids/grid/custom-context-menu/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/custom-filtering/package.json b/samples/grids/grid/custom-filtering/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/custom-filtering/package.json
+++ b/samples/grids/grid/custom-filtering/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/custom-filtering/sandbox.config.json b/samples/grids/grid/custom-filtering/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/custom-filtering/sandbox.config.json
+++ b/samples/grids/grid/custom-filtering/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/custom-filtering/src/index.ts b/samples/grids/grid/custom-filtering/src/index.ts
index bcace7274e..c2acdc52a6 100644
--- a/samples/grids/grid/custom-filtering/src/index.ts
+++ b/samples/grids/grid/custom-filtering/src/index.ts
@@ -2,11 +2,9 @@ import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent, IgcStringFilteringOperand, IgcFilteringOperand, IgcFilteringOperation, IgcBooleanFilteringOperand } from 'igniteui-webcomponents-grids/grids';
 import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 
 
-
 export class Sample {
 
     private grid: IgcGridComponent
@@ -33,7 +31,6 @@ export class Sample {
             discontinued.filters = this.booleanFilteringOperand;
         }
         this._bind();
-
     }
 
     private _nwindData: NwindData = null;
diff --git a/samples/grids/grid/custom-filtering/tsconfig.json b/samples/grids/grid/custom-filtering/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/custom-filtering/tsconfig.json
+++ b/samples/grids/grid/custom-filtering/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-batch-editing-actions/package.json b/samples/grids/grid/data-batch-editing-actions/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/data-batch-editing-actions/package.json
+++ b/samples/grids/grid/data-batch-editing-actions/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-batch-editing-actions/sandbox.config.json b/samples/grids/grid/data-batch-editing-actions/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-batch-editing-actions/sandbox.config.json
+++ b/samples/grids/grid/data-batch-editing-actions/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-batch-editing-actions/src/index.css b/samples/grids/grid/data-batch-editing-actions/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/data-batch-editing-actions/src/index.css
+++ b/samples/grids/grid/data-batch-editing-actions/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-batch-editing-actions/src/index.ts b/samples/grids/grid/data-batch-editing-actions/src/index.ts
index 448de571f5..160c7a792a 100644
--- a/samples/grids/grid/data-batch-editing-actions/src/index.ts
+++ b/samples/grids/grid/data-batch-editing-actions/src/index.ts
@@ -8,11 +8,11 @@ import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'ignite
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
 import { IgcButtonComponent } from 'igniteui-webcomponents';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -76,7 +76,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridDeleteCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
@@ -131,7 +130,6 @@ export class Sample {
         var grid = this.grid;
         //grid.endEdit(true);
         //grid.transactions.undo();
-
     }
 
     public webGridRedo(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
@@ -141,7 +139,6 @@ export class Sample {
 
         //grid.endEdit(true);
         //grid.transactions.redo();
-
     }
 
     public webGridCommit(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
diff --git a/samples/grids/grid/data-batch-editing-actions/tsconfig.json b/samples/grids/grid/data-batch-editing-actions/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-batch-editing-actions/tsconfig.json
+++ b/samples/grids/grid/data-batch-editing-actions/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-batch-editing-actions/webpack.config.js b/samples/grids/grid/data-batch-editing-actions/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-batch-editing-actions/webpack.config.js
+++ b/samples/grids/grid/data-batch-editing-actions/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/data-exporting-indicator/package.json b/samples/grids/grid/data-exporting-indicator/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/data-exporting-indicator/package.json
+++ b/samples/grids/grid/data-exporting-indicator/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-exporting-indicator/sandbox.config.json b/samples/grids/grid/data-exporting-indicator/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-exporting-indicator/sandbox.config.json
+++ b/samples/grids/grid/data-exporting-indicator/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-exporting-indicator/tsconfig.json b/samples/grids/grid/data-exporting-indicator/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/data-exporting-indicator/tsconfig.json
+++ b/samples/grids/grid/data-exporting-indicator/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-paste-options/package.json b/samples/grids/grid/data-paste-options/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/grid/data-paste-options/package.json
+++ b/samples/grids/grid/data-paste-options/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-paste-options/sandbox.config.json b/samples/grids/grid/data-paste-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-paste-options/sandbox.config.json
+++ b/samples/grids/grid/data-paste-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-paste-options/src/index.ts b/samples/grids/grid/data-paste-options/src/index.ts
index 7ba6783e18..dfabc5543b 100644
--- a/samples/grids/grid/data-paste-options/src/index.ts
+++ b/samples/grids/grid/data-paste-options/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 ModuleManager.register(
@@ -48,7 +48,6 @@ export class Sample {
             grid1.data = this.customersData
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
@@ -59,7 +58,6 @@ export class Sample {
         }
         return this._customersData;
     }
-    
 
     private _componentRenderer: ComponentRenderer = null;
     public get renderer(): ComponentRenderer {
@@ -72,28 +70,26 @@ export class Sample {
         return this._componentRenderer;
     }
 
-    
     public webGridPasteOptions(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
         //TODO
-    
+
         //var grid = this.grid1;
         // grid.transactions.commit(grid.data);
         //dialog.close();
-    
+
         console.log("test");
     }
-        
-    
+
     public webGridExcelDownload(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
         //TODO
-    
+
         //var grid = this.grid1;
         // grid.transactions.commit(grid.data);
         //dialog.close();
-    
+
         console.log("test");
     }
-        
+
 }
 
 new Sample();
diff --git a/samples/grids/grid/data-paste-options/tsconfig.json b/samples/grids/grid/data-paste-options/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/data-paste-options/tsconfig.json
+++ b/samples/grids/grid/data-paste-options/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-performance-virtualization/package.json b/samples/grids/grid/data-performance-virtualization/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/data-performance-virtualization/package.json
+++ b/samples/grids/grid/data-performance-virtualization/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-performance-virtualization/sandbox.config.json b/samples/grids/grid/data-performance-virtualization/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-performance-virtualization/sandbox.config.json
+++ b/samples/grids/grid/data-performance-virtualization/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-performance-virtualization/src/index.css b/samples/grids/grid/data-performance-virtualization/src/index.css
index 77958e8090..0fe9368715 100644
--- a/samples/grids/grid/data-performance-virtualization/src/index.css
+++ b/samples/grids/grid/data-performance-virtualization/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cellAlignStyle {
-    text-align: right;
-    float:right;
-}
-.cellAlignStyle > span {
-    float:right;
-}
-.up {
-    color: green;
-}
-.down {
-    color: red;
-}
-.grid__wrapper {
-  padding: 16px;
-}
-.currency-badge-container {
-    width: 80px;
-    float: right;
-}
-.badge-left {
-    float: left;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-performance-virtualization/src/index.ts b/samples/grids/grid/data-performance-virtualization/src/index.ts
index ee68a79c12..6b2db7e046 100644
--- a/samples/grids/grid/data-performance-virtualization/src/index.ts
+++ b/samples/grids/grid/data-performance-virtualization/src/index.ts
@@ -4,10 +4,10 @@ import { FinancialDataAllItem, FinancialDataAll } from './FinancialDataAll';
 import { IgcBadgeComponent } from 'igniteui-webcomponents';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -33,7 +33,6 @@ export class Sample {
             column3.bodyTemplate = this.webGridCurrencyCellTemplate;
         }
         this._bind();
-
     }
 
     private _financialDataAll: FinancialDataAll = null;
@@ -45,7 +44,6 @@ export class Sample {
         return this._financialDataAll;
     }
 
-
     public webGridCurrencyCellTemplate = (ctx: IgcCellTemplateContext) => {
         if (ctx.cell.value > 0) {
             return html`<div style='width: 80px;
diff --git a/samples/grids/grid/data-performance-virtualization/tsconfig.json b/samples/grids/grid/data-performance-virtualization/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-performance-virtualization/tsconfig.json
+++ b/samples/grids/grid/data-performance-virtualization/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-performance-virtualization/webpack.config.js b/samples/grids/grid/data-performance-virtualization/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-performance-virtualization/webpack.config.js
+++ b/samples/grids/grid/data-performance-virtualization/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/data-searching/package.json b/samples/grids/grid/data-searching/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/grid/data-searching/package.json
+++ b/samples/grids/grid/data-searching/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-searching/sandbox.config.json b/samples/grids/grid/data-searching/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-searching/sandbox.config.json
+++ b/samples/grids/grid/data-searching/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-searching/src/index.css b/samples/grids/grid/data-searching/src/index.css
index 08c65b2d5c..0fe9368715 100644
--- a/samples/grids/grid/data-searching/src/index.css
+++ b/samples/grids/grid/data-searching/src/index.css
@@ -1,6 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.gridSize {
-    --ig-size: var(--ig-size-small);
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-searching/src/index.ts b/samples/grids/grid/data-searching/src/index.ts
index cdb6ce9a6c..b0d79a1730 100644
--- a/samples/grids/grid/data-searching/src/index.ts
+++ b/samples/grids/grid/data-searching/src/index.ts
@@ -1,18 +1,17 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from 'igniteui-webcomponents';
 import { MarketData } from './MarketData';
-
 import "./index.css";
 
+
 defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);
 
 export class Sample {
 
-    private grid: IgcGridComponent;    
+    private grid: IgcGridComponent;
     private searchBox: IgcInputComponent;
     private searchIcon: IgcIconComponent;
     private clearIcon: IgcIconComponent;
@@ -24,13 +23,12 @@ export class Sample {
     private _bind: () => void;
 
     constructor() {
-        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;        
-        
+        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
+
         this.nextSearch = this.nextSearch.bind(this);
         this.prevSearch = this.prevSearch.bind(this);
-        this.clearSearch = this.clearSearch.bind(this);        
-      
-        
+        this.clearSearch = this.clearSearch.bind(this);
+
         const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
         const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
         const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";
@@ -42,7 +40,6 @@ export class Sample {
         registerIconFromText("search", searchIconText, "material");
 
         var searchIcon = this.searchIcon = document.getElementById('searchIcon') as IgcIconComponent;
-        
 
         var nextIconButton = this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
         var prevIconButton = this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
@@ -55,8 +52,7 @@ export class Sample {
         this.data = new MarketData();
 
         this._bind = () => {
-            grid.data = this.data;            
-                        
+            grid.data = this.data;
             searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); });
             this.searchBox.addEventListener("igcInput", (evt) => {
                 this.searchIcon.name = evt.detail ? 'clear' : 'search';
@@ -69,7 +65,7 @@ export class Sample {
         this._bind();
     }
 
-    public onSearchKeydown(evt: KeyboardEvent) {  
+    public onSearchKeydown(evt: KeyboardEvent) {
         if (evt.key === 'Enter' || evt.key === 'ArrowDown') {
             evt.preventDefault();
             this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
@@ -89,8 +85,8 @@ export class Sample {
 
     public clearSearch() {
         this.searchBox.value = "";
-        this.grid.clearSearch();    
-        this.searchIcon.name = 'search';    
+        this.grid.clearSearch();
+        this.searchIcon.name = 'search';
     }
 }
 
diff --git a/samples/grids/grid/data-searching/tsconfig.json b/samples/grids/grid/data-searching/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/data-searching/tsconfig.json
+++ b/samples/grids/grid/data-searching/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-summaries-custom/package.json b/samples/grids/grid/data-summaries-custom/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/data-summaries-custom/package.json
+++ b/samples/grids/grid/data-summaries-custom/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-summaries-custom/sandbox.config.json b/samples/grids/grid/data-summaries-custom/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-summaries-custom/sandbox.config.json
+++ b/samples/grids/grid/data-summaries-custom/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-summaries-custom/src/index.ts b/samples/grids/grid/data-summaries-custom/src/index.ts
index 98f8d00346..6305483128 100644
--- a/samples/grids/grid/data-summaries-custom/src/index.ts
+++ b/samples/grids/grid/data-summaries-custom/src/index.ts
@@ -3,9 +3,9 @@ import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcompone
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
 import { IgcSummaryResult } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 
+
 class CustomSummary {
     operate(data: any[], allData: any[] = [], fieldName: string): IgcSummaryResult[] {
         const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => (r as any)[fieldName]);
@@ -56,7 +56,6 @@ export class Sample {
             grid.addEventListener("columnInit", this.webGridCustomSummary);
         }
         this._bind();
-
     }
 
     private _nwindData: NwindData = null;
diff --git a/samples/grids/grid/data-summaries-custom/tsconfig.json b/samples/grids/grid/data-summaries-custom/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/data-summaries-custom/tsconfig.json
+++ b/samples/grids/grid/data-summaries-custom/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-summary-formatter/package.json b/samples/grids/grid/data-summary-formatter/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/data-summary-formatter/package.json
+++ b/samples/grids/grid/data-summary-formatter/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-summary-formatter/sandbox.config.json b/samples/grids/grid/data-summary-formatter/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-summary-formatter/sandbox.config.json
+++ b/samples/grids/grid/data-summary-formatter/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-summary-formatter/src/index.css b/samples/grids/grid/data-summary-formatter/src/index.css
index db87b63a60..0fe9368715 100644
--- a/samples/grids/grid/data-summary-formatter/src/index.css
+++ b/samples/grids/grid/data-summary-formatter/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-small);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-summary-formatter/src/index.ts b/samples/grids/grid/data-summary-formatter/src/index.ts
index 66bb1f942f..5ebb7669bb 100644
--- a/samples/grids/grid/data-summary-formatter/src/index.ts
+++ b/samples/grids/grid/data-summary-formatter/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcSummaryResult, IgcSummaryOperand } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -23,7 +23,6 @@ export class Sample {
             column1.summaryFormatter = this.webGridSummaryFormatter;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
@@ -31,7 +30,6 @@ export class Sample {
         return this._nwindData;
     }
 
-
     public webGridSummaryFormatter(summary: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
         const result = summary.summaryResult;
         if (summary.key !== "count" && result !== null && result !== undefined) {
diff --git a/samples/grids/grid/data-summary-formatter/tsconfig.json b/samples/grids/grid/data-summary-formatter/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-summary-formatter/tsconfig.json
+++ b/samples/grids/grid/data-summary-formatter/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-summary-formatter/webpack.config.js b/samples/grids/grid/data-summary-formatter/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-summary-formatter/webpack.config.js
+++ b/samples/grids/grid/data-summary-formatter/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/data-summary-options/package.json b/samples/grids/grid/data-summary-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/data-summary-options/package.json
+++ b/samples/grids/grid/data-summary-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-summary-options/sandbox.config.json b/samples/grids/grid/data-summary-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-summary-options/sandbox.config.json
+++ b/samples/grids/grid/data-summary-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-summary-options/src/index.css b/samples/grids/grid/data-summary-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/data-summary-options/src/index.css
+++ b/samples/grids/grid/data-summary-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-summary-options/src/index.ts b/samples/grids/grid/data-summary-options/src/index.ts
index ed893717d6..762578fc41 100644
--- a/samples/grids/grid/data-summary-options/src/index.ts
+++ b/samples/grids/grid/data-summary-options/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcompone
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcSummaryResult } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -34,7 +34,6 @@ export class Sample {
             grid.addEventListener("columnInit", this.webGridCustomSummary);
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/data-summary-options/tsconfig.json b/samples/grids/grid/data-summary-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-summary-options/tsconfig.json
+++ b/samples/grids/grid/data-summary-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-summary-options/webpack.config.js b/samples/grids/grid/data-summary-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-summary-options/webpack.config.js
+++ b/samples/grids/grid/data-summary-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/data-summary-template/package.json b/samples/grids/grid/data-summary-template/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/data-summary-template/package.json
+++ b/samples/grids/grid/data-summary-template/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-summary-template/sandbox.config.json b/samples/grids/grid/data-summary-template/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-summary-template/sandbox.config.json
+++ b/samples/grids/grid/data-summary-template/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-summary-template/src/index.css b/samples/grids/grid/data-summary-template/src/index.css
index 96988782c3..0fe9368715 100644
--- a/samples/grids/grid/data-summary-template/src/index.css
+++ b/samples/grids/grid/data-summary-template/src/index.css
@@ -1,43 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.summary-temp {
-	display: flex;
-	flex-direction: column;
-	margin: 0 1px;
-	font-size: 14px;
-	line-height: 24px;
-	height: 100%;
-	overflow-y: auto;
-	overflow-x: hidden;
-	> * {
-		padding: 8px 0;
-		line-height: 18px;
-		border-bottom: 1px dashed hsla(var(--igx-gray-400));
-		&:last-child {
-			border-bottom: none;
-		}
-	}
-}
-.summary-temp span {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px;
-    justify-content: space-between;
-    color: hsla(var(--ig-gray-900));
-}
-.summary-temp span span {
-    user-select: all;
-    max-width: 300px;
-    padding-right: 8px;
-}
-.summary-temp span strong {
-    font-size: 12px;
-    text-transform: uppercase;
-    min-width: 70px;
-    justify-self: flex-start;
-    text-align: left;
-    color: hsla(var(--ig-secondary-600));
-    user-select: none;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-summary-template/src/index.ts b/samples/grids/grid/data-summary-template/src/index.ts
index 2348de082b..908f1fd98d 100644
--- a/samples/grids/grid/data-summary-template/src/index.ts
+++ b/samples/grids/grid/data-summary-template/src/index.ts
@@ -7,11 +7,11 @@ import NwindData from './NwindData.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcSummaryResult, IgcSummaryTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -52,7 +52,6 @@ export class Sample {
             column2.summaryTemplate = this.webGridOrderDateSummaryTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/data-summary-template/tsconfig.json b/samples/grids/grid/data-summary-template/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-summary-template/tsconfig.json
+++ b/samples/grids/grid/data-summary-template/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-summary-template/webpack.config.js b/samples/grids/grid/data-summary-template/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-summary-template/webpack.config.js
+++ b/samples/grids/grid/data-summary-template/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/data-validation-style/package.json b/samples/grids/grid/data-validation-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/data-validation-style/package.json
+++ b/samples/grids/grid/data-validation-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-validation-style/sandbox.config.json b/samples/grids/grid/data-validation-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-validation-style/sandbox.config.json
+++ b/samples/grids/grid/data-validation-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-validation-style/src/index.css b/samples/grids/grid/data-validation-style/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/data-validation-style/src/index.css
+++ b/samples/grids/grid/data-validation-style/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-validation-style/src/index.ts b/samples/grids/grid/data-validation-style/src/index.ts
index dd2ec7e818..a8d87a38f5 100644
--- a/samples/grids/grid/data-validation-style/src/index.ts
+++ b/samples/grids/grid/data-validation-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid1.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/data-validation-style/tsconfig.json b/samples/grids/grid/data-validation-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-validation-style/tsconfig.json
+++ b/samples/grids/grid/data-validation-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-validation-style/webpack.config.js b/samples/grids/grid/data-validation-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-validation-style/webpack.config.js
+++ b/samples/grids/grid/data-validation-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/data-validator-service-cross-field/package.json b/samples/grids/grid/data-validator-service-cross-field/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/data-validator-service-cross-field/package.json
+++ b/samples/grids/grid/data-validator-service-cross-field/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-validator-service-cross-field/sandbox.config.json b/samples/grids/grid/data-validator-service-cross-field/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-validator-service-cross-field/sandbox.config.json
+++ b/samples/grids/grid/data-validator-service-cross-field/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-validator-service-cross-field/src/index.css b/samples/grids/grid/data-validator-service-cross-field/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/data-validator-service-cross-field/src/index.css
+++ b/samples/grids/grid/data-validator-service-cross-field/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-validator-service-cross-field/src/index.ts b/samples/grids/grid/data-validator-service-cross-field/src/index.ts
index 3c80bd88a5..7f13a6aecd 100644
--- a/samples/grids/grid/data-validator-service-cross-field/src/index.ts
+++ b/samples/grids/grid/data-validator-service-cross-field/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -45,7 +45,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/data-validator-service-cross-field/tsconfig.json b/samples/grids/grid/data-validator-service-cross-field/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-validator-service-cross-field/tsconfig.json
+++ b/samples/grids/grid/data-validator-service-cross-field/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-validator-service-cross-field/webpack.config.js b/samples/grids/grid/data-validator-service-cross-field/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-validator-service-cross-field/webpack.config.js
+++ b/samples/grids/grid/data-validator-service-cross-field/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/data-validator-service-extended/package.json b/samples/grids/grid/data-validator-service-extended/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/data-validator-service-extended/package.json
+++ b/samples/grids/grid/data-validator-service-extended/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-validator-service-extended/sandbox.config.json b/samples/grids/grid/data-validator-service-extended/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-validator-service-extended/sandbox.config.json
+++ b/samples/grids/grid/data-validator-service-extended/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-validator-service-extended/src/index.css b/samples/grids/grid/data-validator-service-extended/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/data-validator-service-extended/src/index.css
+++ b/samples/grids/grid/data-validator-service-extended/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-validator-service-extended/src/index.ts b/samples/grids/grid/data-validator-service-extended/src/index.ts
index 7ab2b5deb3..6652dd266e 100644
--- a/samples/grids/grid/data-validator-service-extended/src/index.ts
+++ b/samples/grids/grid/data-validator-service-extended/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -66,7 +66,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
@@ -91,7 +90,6 @@ export class Sample {
         var grid = this.grid;
         //grid.endEdit(true);
         //grid.transactions.undo();
-
     }
 
     public webGridRedo(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
@@ -101,7 +99,6 @@ export class Sample {
 
         //grid.endEdit(true);
         //grid.transactions.redo();
-
     }
 
     public webGridCommit(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
diff --git a/samples/grids/grid/data-validator-service-extended/tsconfig.json b/samples/grids/grid/data-validator-service-extended/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-validator-service-extended/tsconfig.json
+++ b/samples/grids/grid/data-validator-service-extended/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-validator-service-extended/webpack.config.js b/samples/grids/grid/data-validator-service-extended/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-validator-service-extended/webpack.config.js
+++ b/samples/grids/grid/data-validator-service-extended/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/data-validator-service/package.json b/samples/grids/grid/data-validator-service/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/data-validator-service/package.json
+++ b/samples/grids/grid/data-validator-service/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/data-validator-service/sandbox.config.json b/samples/grids/grid/data-validator-service/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/data-validator-service/sandbox.config.json
+++ b/samples/grids/grid/data-validator-service/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/data-validator-service/src/index.css b/samples/grids/grid/data-validator-service/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/data-validator-service/src/index.css
+++ b/samples/grids/grid/data-validator-service/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/data-validator-service/src/index.ts b/samples/grids/grid/data-validator-service/src/index.ts
index c1b2be974d..343ca2899e 100644
--- a/samples/grids/grid/data-validator-service/src/index.ts
+++ b/samples/grids/grid/data-validator-service/src/index.ts
@@ -6,11 +6,11 @@ import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteu
 import { EmployeesDataItem, EmployeesData } from './EmployeesData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -41,6 +41,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private lastActivity: IgcColumnComponent
     private estimatedSales: IgcColumnComponent
     private dealsLost: IgcColumnComponent
@@ -72,7 +73,6 @@ export class Sample {
             createdOn.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _employeesData: EmployeesData = null;
diff --git a/samples/grids/grid/data-validator-service/tsconfig.json b/samples/grids/grid/data-validator-service/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/data-validator-service/tsconfig.json
+++ b/samples/grids/grid/data-validator-service/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/data-validator-service/webpack.config.js b/samples/grids/grid/data-validator-service/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/data-validator-service/webpack.config.js
+++ b/samples/grids/grid/data-validator-service/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/editing-columns/package.json b/samples/grids/grid/editing-columns/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/editing-columns/package.json
+++ b/samples/grids/grid/editing-columns/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/editing-columns/sandbox.config.json b/samples/grids/grid/editing-columns/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/editing-columns/sandbox.config.json
+++ b/samples/grids/grid/editing-columns/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/editing-columns/src/index.css b/samples/grids/grid/editing-columns/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/grid/editing-columns/src/index.css
+++ b/samples/grids/grid/editing-columns/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/editing-columns/src/index.ts b/samples/grids/grid/editing-columns/src/index.ts
index a8d57b898f..87fef6fdbe 100644
--- a/samples/grids/grid/editing-columns/src/index.ts
+++ b/samples/grids/grid/editing-columns/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/editing-columns/tsconfig.json b/samples/grids/grid/editing-columns/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/editing-columns/tsconfig.json
+++ b/samples/grids/grid/editing-columns/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/editing-columns/webpack.config.js b/samples/grids/grid/editing-columns/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/editing-columns/webpack.config.js
+++ b/samples/grids/grid/editing-columns/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/editing-events/package.json b/samples/grids/grid/editing-events/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/editing-events/package.json
+++ b/samples/grids/grid/editing-events/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/editing-events/sandbox.config.json b/samples/grids/grid/editing-events/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/editing-events/sandbox.config.json
+++ b/samples/grids/grid/editing-events/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/editing-events/src/index.css b/samples/grids/grid/editing-events/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/editing-events/src/index.css
+++ b/samples/grids/grid/editing-events/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/editing-events/src/index.ts b/samples/grids/grid/editing-events/src/index.ts
index f36742b6e9..d2f00d6b9d 100644
--- a/samples/grids/grid/editing-events/src/index.ts
+++ b/samples/grids/grid/editing-events/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcompone
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcGridEditEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -26,7 +26,6 @@ export class Sample {
             grid1.addEventListener("cellEdit", this.webGridEditingEventsCellEdit);
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/editing-events/tsconfig.json b/samples/grids/grid/editing-events/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/editing-events/tsconfig.json
+++ b/samples/grids/grid/editing-events/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/editing-events/webpack.config.js b/samples/grids/grid/editing-events/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/editing-events/webpack.config.js
+++ b/samples/grids/grid/editing-events/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/editing-excel-style-custom/package.json b/samples/grids/grid/editing-excel-style-custom/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/editing-excel-style-custom/package.json
+++ b/samples/grids/grid/editing-excel-style-custom/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/editing-excel-style-custom/sandbox.config.json b/samples/grids/grid/editing-excel-style-custom/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/editing-excel-style-custom/sandbox.config.json
+++ b/samples/grids/grid/editing-excel-style-custom/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.css b/samples/grids/grid/editing-excel-style-custom/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.css
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index 2c14643d13..9ab87422bd 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcCellType, IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { NwindData } from './NwindData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -15,31 +15,30 @@ export class Sample {
 
     constructor() {
         var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
-    
+
         this._bind = () => {
             grid1.data = this.nwindData;
 
             grid1.addEventListener('activeNodeChange', (event: any) => {
                 grid1.endEdit();
                 (grid1.getElementsByClassName("igx-grid__tbody-content")[0] as any).focus();
-
             });
             grid1.addEventListener('keydown', (event: KeyboardEvent) => {
                 var code = event.code;
                 var activeElem = grid1.selectedCells[0];
 
-                if ((event.code >= 'Digit0' && event.code <= 'Digit9') || 
+                if ((event.code >= 'Digit0' && event.code <= 'Digit9') ||
                     (event.code >= 'KeyA' && event.code <= 'KeyZ') ||
-                    (event.code >= 'Numpad0' && event.code <= 'Numpad9') && 
+                    (event.code >= 'Numpad0' && event.code <= 'Numpad9') &&
                      event.code !== 'Enter' && event.code !== 'NumpadEnter') {
-        
+
                     if (activeElem && activeElem.editMode === false) {
                         activeElem.editMode = true;
                         activeElem.editValue = event.key;
                         this.shouldAppendValue = true;
                         grid1.markForCheck();
                     } else
-                    
+
                     if (activeElem && activeElem.editMode && this.shouldAppendValue) {
                         event.preventDefault();
                         activeElem.editValue = activeElem.editValue + event.key;
@@ -52,28 +51,26 @@ export class Sample {
                         return;
                     }
                     const rowIndex = activeElem.row.index;
-                    const columnKey = activeElem.column.field; 
-            
+                    const columnKey = activeElem.column.field;
+
                     grid1.data[rowIndex][columnKey] = '';
                     grid1.markForCheck();
-
                 }
-    
+
                 if (code === 'Enter') {
-                    
+
                     if(activeElem == null) {
                         return;
                     }
 
                     const thisRow = activeElem.row.index;
                     const dataView = this.grid1.dataView;
-                    const nextRowIndex = this.getNextEditableRowIndex(thisRow, dataView, event.shiftKey);    
+                    const nextRowIndex = this.getNextEditableRowIndex(thisRow, dataView, event.shiftKey);
 
                     grid1.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => {
-                        grid1.clearCellSelection(); 
-                        obj.target.activate(); 
+                        grid1.clearCellSelection();
+                        obj.target.activate();
                     });
-
                 }
         });
     }
@@ -113,7 +110,6 @@ export class Sample {
         }
         return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
       }
-  
 
     private isEditableDataRecordAtIndex(rowIndex: number, dataView: any[]): boolean {
         const rec = dataView[rowIndex];
diff --git a/samples/grids/grid/editing-excel-style-custom/tsconfig.json b/samples/grids/grid/editing-excel-style-custom/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/editing-excel-style-custom/tsconfig.json
+++ b/samples/grids/grid/editing-excel-style-custom/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/editing-excel-style/package.json b/samples/grids/grid/editing-excel-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/editing-excel-style/package.json
+++ b/samples/grids/grid/editing-excel-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/editing-excel-style/sandbox.config.json b/samples/grids/grid/editing-excel-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/editing-excel-style/sandbox.config.json
+++ b/samples/grids/grid/editing-excel-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style/src/index.css b/samples/grids/grid/editing-excel-style/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/editing-excel-style/src/index.css
+++ b/samples/grids/grid/editing-excel-style/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style/src/index.ts b/samples/grids/grid/editing-excel-style/src/index.ts
index 81ffb84e23..1b1dec2817 100644
--- a/samples/grids/grid/editing-excel-style/src/index.ts
+++ b/samples/grids/grid/editing-excel-style/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcompone
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcGridKeydownEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -22,7 +22,6 @@ export class Sample {
             grid1.addEventListener("gridKeydown", this.webGridEditingExcelStyle);
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/editing-excel-style/tsconfig.json b/samples/grids/grid/editing-excel-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/editing-excel-style/tsconfig.json
+++ b/samples/grids/grid/editing-excel-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/editing-excel-style/webpack.config.js b/samples/grids/grid/editing-excel-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/editing-excel-style/webpack.config.js
+++ b/samples/grids/grid/editing-excel-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/editing-lifecycle/package.json b/samples/grids/grid/editing-lifecycle/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/editing-lifecycle/package.json
+++ b/samples/grids/grid/editing-lifecycle/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/editing-lifecycle/sandbox.config.json b/samples/grids/grid/editing-lifecycle/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/editing-lifecycle/sandbox.config.json
+++ b/samples/grids/grid/editing-lifecycle/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/editing-lifecycle/src/index.css b/samples/grids/grid/editing-lifecycle/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/editing-lifecycle/src/index.css
+++ b/samples/grids/grid/editing-lifecycle/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/editing-lifecycle/src/index.ts b/samples/grids/grid/editing-lifecycle/src/index.ts
index e4e960d2cd..cb3253392f 100644
--- a/samples/grids/grid/editing-lifecycle/src/index.ts
+++ b/samples/grids/grid/editing-lifecycle/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcRowSelectionEventArgs, IgcGridEditEventArgs, IgcGridEditDoneEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -37,7 +37,6 @@ export class Sample {
             grid.addEventListener("cellEditExit", this.webGridCellEditExit);
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
@@ -45,7 +44,6 @@ export class Sample {
         return this._nwindData;
     }
 
-
     public webGridRendered(args:any): void {
         const grid = document.getElementById("grid");
         grid.parentElement.style.display = "flex";
diff --git a/samples/grids/grid/editing-lifecycle/tsconfig.json b/samples/grids/grid/editing-lifecycle/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/editing-lifecycle/tsconfig.json
+++ b/samples/grids/grid/editing-lifecycle/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/editing-lifecycle/webpack.config.js b/samples/grids/grid/editing-lifecycle/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/editing-lifecycle/webpack.config.js
+++ b/samples/grids/grid/editing-lifecycle/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/excel-exporting/package.json b/samples/grids/grid/excel-exporting/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/excel-exporting/package.json
+++ b/samples/grids/grid/excel-exporting/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/excel-exporting/sandbox.config.json b/samples/grids/grid/excel-exporting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/excel-exporting/sandbox.config.json
+++ b/samples/grids/grid/excel-exporting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/excel-exporting/src/index.css b/samples/grids/grid/excel-exporting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/excel-exporting/src/index.css
+++ b/samples/grids/grid/excel-exporting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/excel-exporting/src/index.ts b/samples/grids/grid/excel-exporting/src/index.ts
index c6faf23cc2..d34f0ba2de 100644
--- a/samples/grids/grid/excel-exporting/src/index.ts
+++ b/samples/grids/grid/excel-exporting/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -30,6 +30,7 @@ export class Sample {
         }
         return this._groupingExpression1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -40,7 +41,6 @@ export class Sample {
             grid.groupingExpressions = this.groupingExpression1;
         }
         this._bind();
-
     }
 
     private _invoicesData: InvoicesData = null;
diff --git a/samples/grids/grid/excel-exporting/tsconfig.json b/samples/grids/grid/excel-exporting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/excel-exporting/tsconfig.json
+++ b/samples/grids/grid/excel-exporting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/excel-exporting/webpack.config.js b/samples/grids/grid/excel-exporting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/excel-exporting/webpack.config.js
+++ b/samples/grids/grid/excel-exporting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/excel-style-filtering-sample-1/package.json b/samples/grids/grid/excel-style-filtering-sample-1/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/excel-style-filtering-sample-1/package.json
+++ b/samples/grids/grid/excel-style-filtering-sample-1/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/excel-style-filtering-sample-1/sandbox.config.json b/samples/grids/grid/excel-style-filtering-sample-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/excel-style-filtering-sample-1/sandbox.config.json
+++ b/samples/grids/grid/excel-style-filtering-sample-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/excel-style-filtering-sample-1/src/index.css b/samples/grids/grid/excel-style-filtering-sample-1/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/excel-style-filtering-sample-1/src/index.css
+++ b/samples/grids/grid/excel-style-filtering-sample-1/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/excel-style-filtering-sample-1/src/index.ts b/samples/grids/grid/excel-style-filtering-sample-1/src/index.ts
index 1660d0d7bf..114ed3f14b 100644
--- a/samples/grids/grid/excel-style-filtering-sample-1/src/index.ts
+++ b/samples/grids/grid/excel-style-filtering-sample-1/src/index.ts
@@ -7,11 +7,11 @@ import NwindData from './NwindData.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -39,6 +39,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private orderDate: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -51,6 +52,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private discontinued: IgcColumnComponent
     private _bind: () => void;
 
@@ -75,7 +77,6 @@ export class Sample {
             discontinued.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/excel-style-filtering-sample-1/tsconfig.json b/samples/grids/grid/excel-style-filtering-sample-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/excel-style-filtering-sample-1/tsconfig.json
+++ b/samples/grids/grid/excel-style-filtering-sample-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/excel-style-filtering-sample-1/webpack.config.js b/samples/grids/grid/excel-style-filtering-sample-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/excel-style-filtering-sample-1/webpack.config.js
+++ b/samples/grids/grid/excel-style-filtering-sample-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/excel-style-filtering-sample-2/package.json b/samples/grids/grid/excel-style-filtering-sample-2/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/excel-style-filtering-sample-2/package.json
+++ b/samples/grids/grid/excel-style-filtering-sample-2/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/excel-style-filtering-sample-2/sandbox.config.json b/samples/grids/grid/excel-style-filtering-sample-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/excel-style-filtering-sample-2/sandbox.config.json
+++ b/samples/grids/grid/excel-style-filtering-sample-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/excel-style-filtering-sample-2/src/index.css b/samples/grids/grid/excel-style-filtering-sample-2/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/excel-style-filtering-sample-2/src/index.css
+++ b/samples/grids/grid/excel-style-filtering-sample-2/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/excel-style-filtering-sample-2/src/index.ts b/samples/grids/grid/excel-style-filtering-sample-2/src/index.ts
index 20317f7f95..7c024bdf3c 100644
--- a/samples/grids/grid/excel-style-filtering-sample-2/src/index.ts
+++ b/samples/grids/grid/excel-style-filtering-sample-2/src/index.ts
@@ -5,12 +5,12 @@ import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteu
 import NwindData from './NwindData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -32,6 +32,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private orderDate: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -44,6 +45,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private discontinued: IgcColumnComponent
     private _bind: () => void;
 
@@ -62,7 +64,6 @@ export class Sample {
             discontinued.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/excel-style-filtering-sample-2/tsconfig.json b/samples/grids/grid/excel-style-filtering-sample-2/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/excel-style-filtering-sample-2/tsconfig.json
+++ b/samples/grids/grid/excel-style-filtering-sample-2/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/excel-style-filtering-sample-2/webpack.config.js b/samples/grids/grid/excel-style-filtering-sample-2/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/excel-style-filtering-sample-2/webpack.config.js
+++ b/samples/grids/grid/excel-style-filtering-sample-2/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/excel-style-filtering-sample-3/package.json b/samples/grids/grid/excel-style-filtering-sample-3/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/excel-style-filtering-sample-3/package.json
+++ b/samples/grids/grid/excel-style-filtering-sample-3/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/excel-style-filtering-sample-3/sandbox.config.json b/samples/grids/grid/excel-style-filtering-sample-3/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/excel-style-filtering-sample-3/sandbox.config.json
+++ b/samples/grids/grid/excel-style-filtering-sample-3/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/excel-style-filtering-sample-3/src/index.css b/samples/grids/grid/excel-style-filtering-sample-3/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/excel-style-filtering-sample-3/src/index.css
+++ b/samples/grids/grid/excel-style-filtering-sample-3/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/excel-style-filtering-sample-3/src/index.ts b/samples/grids/grid/excel-style-filtering-sample-3/src/index.ts
index b69584c5b9..b3049fd3e4 100644
--- a/samples/grids/grid/excel-style-filtering-sample-3/src/index.ts
+++ b/samples/grids/grid/excel-style-filtering-sample-3/src/index.ts
@@ -5,12 +5,12 @@ import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteu
 import NwindData from './NwindData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -32,6 +32,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private orderDate: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -44,6 +45,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private discontinued: IgcColumnComponent
     private _bind: () => void;
 
@@ -63,7 +65,6 @@ export class Sample {
             discontinued.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/excel-style-filtering-sample-3/tsconfig.json b/samples/grids/grid/excel-style-filtering-sample-3/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/excel-style-filtering-sample-3/tsconfig.json
+++ b/samples/grids/grid/excel-style-filtering-sample-3/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/excel-style-filtering-sample-3/webpack.config.js b/samples/grids/grid/excel-style-filtering-sample-3/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/excel-style-filtering-sample-3/webpack.config.js
+++ b/samples/grids/grid/excel-style-filtering-sample-3/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/excel-style-filtering-style/package.json b/samples/grids/grid/excel-style-filtering-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/excel-style-filtering-style/package.json
+++ b/samples/grids/grid/excel-style-filtering-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/excel-style-filtering-style/sandbox.config.json b/samples/grids/grid/excel-style-filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/excel-style-filtering-style/sandbox.config.json
+++ b/samples/grids/grid/excel-style-filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/excel-style-filtering-style/src/index.css b/samples/grids/grid/excel-style-filtering-style/src/index.css
index aa7a27b502..0fe9368715 100644
--- a/samples/grids/grid/excel-style-filtering-style/src/index.css
+++ b/samples/grids/grid/excel-style-filtering-style/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-grid-filtering-row-background: #ffcd0f;
-        --ig-button-background: #FFCD0F;
-        --ig-button-foreground: #292826;
-        --ig-button-hover-background: #292826;
-        --ig-button-hover-foreground: #ffcd0f;
-
-        --ig-list-background: #FFCD0F;
-        --ig-list-item-background: #FFCD0F;
-        --ig-list-item-background-hover: #c2b1b1bd;
-
-        --ig-checkbox-empty-color: #292826;
-        --ig-checkbox-fill-color: #292826;
-        --ig-checkbox-tick-color: #FFCD0F;
-        --ig-checkbox-label-color: #292826;
-
-        --ig-drop-down-background-color: #FFCD0F;
-        --ig-drop-down-item-text-color: #292826;
-        --ig-drop-down-item-background: #FFCD0F;
-        --ig-drop-down-item-text-color: #292826;
-        --ig-drop-down-focused-item-background: #c2b1b1bd;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/excel-style-filtering-style/src/index.ts b/samples/grids/grid/excel-style-filtering-style/src/index.ts
index 20317f7f95..7c024bdf3c 100644
--- a/samples/grids/grid/excel-style-filtering-style/src/index.ts
+++ b/samples/grids/grid/excel-style-filtering-style/src/index.ts
@@ -5,12 +5,12 @@ import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteu
 import NwindData from './NwindData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -32,6 +32,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private orderDate: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -44,6 +45,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private discontinued: IgcColumnComponent
     private _bind: () => void;
 
@@ -62,7 +64,6 @@ export class Sample {
             discontinued.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/excel-style-filtering-style/tsconfig.json b/samples/grids/grid/excel-style-filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/excel-style-filtering-style/tsconfig.json
+++ b/samples/grids/grid/excel-style-filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/excel-style-filtering-style/webpack.config.js b/samples/grids/grid/excel-style-filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/excel-style-filtering-style/webpack.config.js
+++ b/samples/grids/grid/excel-style-filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/external-advanced-filtering/package.json b/samples/grids/grid/external-advanced-filtering/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/external-advanced-filtering/package.json
+++ b/samples/grids/grid/external-advanced-filtering/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/external-advanced-filtering/sandbox.config.json b/samples/grids/grid/external-advanced-filtering/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/external-advanced-filtering/sandbox.config.json
+++ b/samples/grids/grid/external-advanced-filtering/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/external-advanced-filtering/src/index.css b/samples/grids/grid/external-advanced-filtering/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/external-advanced-filtering/src/index.css
+++ b/samples/grids/grid/external-advanced-filtering/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/external-advanced-filtering/src/index.ts b/samples/grids/grid/external-advanced-filtering/src/index.ts
index af9695c0ea..cb69a7bd62 100644
--- a/samples/grids/grid/external-advanced-filtering/src/index.ts
+++ b/samples/grids/grid/external-advanced-filtering/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -35,7 +35,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/external-advanced-filtering/tsconfig.json b/samples/grids/grid/external-advanced-filtering/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/external-advanced-filtering/tsconfig.json
+++ b/samples/grids/grid/external-advanced-filtering/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/external-advanced-filtering/webpack.config.js b/samples/grids/grid/external-advanced-filtering/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/external-advanced-filtering/webpack.config.js
+++ b/samples/grids/grid/external-advanced-filtering/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/filtering-options/package.json b/samples/grids/grid/filtering-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/filtering-options/package.json
+++ b/samples/grids/grid/filtering-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/filtering-options/sandbox.config.json b/samples/grids/grid/filtering-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/filtering-options/sandbox.config.json
+++ b/samples/grids/grid/filtering-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/filtering-options/src/index.css b/samples/grids/grid/filtering-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/filtering-options/src/index.css
+++ b/samples/grids/grid/filtering-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/filtering-options/src/index.ts b/samples/grids/grid/filtering-options/src/index.ts
index af9695c0ea..cb69a7bd62 100644
--- a/samples/grids/grid/filtering-options/src/index.ts
+++ b/samples/grids/grid/filtering-options/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -35,7 +35,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/filtering-options/tsconfig.json b/samples/grids/grid/filtering-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/filtering-options/tsconfig.json
+++ b/samples/grids/grid/filtering-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/filtering-options/webpack.config.js b/samples/grids/grid/filtering-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/filtering-options/webpack.config.js
+++ b/samples/grids/grid/filtering-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/filtering-strategy/package.json b/samples/grids/grid/filtering-strategy/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/filtering-strategy/package.json
+++ b/samples/grids/grid/filtering-strategy/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/filtering-strategy/sandbox.config.json b/samples/grids/grid/filtering-strategy/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/filtering-strategy/sandbox.config.json
+++ b/samples/grids/grid/filtering-strategy/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/filtering-strategy/src/index.css b/samples/grids/grid/filtering-strategy/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/filtering-strategy/src/index.css
+++ b/samples/grids/grid/filtering-strategy/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/filtering-strategy/src/index.ts b/samples/grids/grid/filtering-strategy/src/index.ts
index 995733edef..91133e55e2 100644
--- a/samples/grids/grid/filtering-strategy/src/index.ts
+++ b/samples/grids/grid/filtering-strategy/src/index.ts
@@ -3,11 +3,11 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import NwindData from './NwindData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -23,7 +23,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
@@ -31,7 +30,6 @@ export class Sample {
         return this._nwindData;
     }
 
-
         public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
             if (ctx.cell.value) {
                 return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
diff --git a/samples/grids/grid/filtering-strategy/tsconfig.json b/samples/grids/grid/filtering-strategy/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/filtering-strategy/tsconfig.json
+++ b/samples/grids/grid/filtering-strategy/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/filtering-strategy/webpack.config.js b/samples/grids/grid/filtering-strategy/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/filtering-strategy/webpack.config.js
+++ b/samples/grids/grid/filtering-strategy/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/filtering-style/package.json b/samples/grids/grid/filtering-style/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/filtering-style/package.json
+++ b/samples/grids/grid/filtering-style/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/filtering-style/sandbox.config.json b/samples/grids/grid/filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/filtering-style/sandbox.config.json
+++ b/samples/grids/grid/filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/filtering-style/src/index.css b/samples/grids/grid/filtering-style/src/index.css
index 0becabe1f6..0fe9368715 100644
--- a/samples/grids/grid/filtering-style/src/index.css
+++ b/samples/grids/grid/filtering-style/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-filtering-row-text-color: #292826;
-    --ig-grid-filtering-row-background: #ffcd0f;
-    --ig-grid-filtering-header-text-color: #292826;
-    --ig-grid-filtering-header-background: #ffcd0f;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/filtering-style/src/index.ts b/samples/grids/grid/filtering-style/src/index.ts
index 1660d0d7bf..114ed3f14b 100644
--- a/samples/grids/grid/filtering-style/src/index.ts
+++ b/samples/grids/grid/filtering-style/src/index.ts
@@ -7,11 +7,11 @@ import NwindData from './NwindData.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -39,6 +39,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private orderDate: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -51,6 +52,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private discontinued: IgcColumnComponent
     private _bind: () => void;
 
@@ -75,7 +77,6 @@ export class Sample {
             discontinued.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/filtering-style/tsconfig.json b/samples/grids/grid/filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/filtering-style/tsconfig.json
+++ b/samples/grids/grid/filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/filtering-style/webpack.config.js b/samples/grids/grid/filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/filtering-style/webpack.config.js
+++ b/samples/grids/grid/filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/finjs/package.json b/samples/grids/grid/finjs/package.json
index 93b946e25b..1716e5ddfb 100644
--- a/samples/grids/grid/finjs/package.json
+++ b/samples/grids/grid/finjs/package.json
@@ -26,11 +26,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/finjs/sandbox.config.json b/samples/grids/grid/finjs/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/finjs/sandbox.config.json
+++ b/samples/grids/grid/finjs/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/finjs/src/index.css b/samples/grids/grid/finjs/src/index.css
index b2ddbc6a23..0fe9368715 100644
--- a/samples/grids/grid/finjs/src/index.css
+++ b/samples/grids/grid/finjs/src/index.css
@@ -1,122 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.controls-holder {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 15px;
-}
-
-.control-item {
-    flex-grow: 1;
-}
-
-.toast {
-    z-index: 2;
-}
-
-.switch-control-item {
-    flex-basis: fit-content;
-}
-
-.switches {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1 0 0%;
-    padding-inline-end: 20px;
-    font-size: 0.9rem;
-    gap: 20px;
-}
-
-.finjs-play-controls {
-    display: flex;
-    gap: 10px;
-    flex: 1 0 0%;
-}
-
-.finjs-play-controls > igc-button {
-    flex-grow: 1;
-}
-
-.finjs-slider {
-    width: 100%;
-    min-width: 145px;
-}
-
-.finjs-icons {
-    display: flex;
-    align-items: center;
-}
-
-.finjs-icons>igc-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-    margin-inline-start: 4px;
-}
-
-.changePos,
-.changeNeg,
-.strongPositive,
-.strongNegative {
-    color: rgb(0, 0, 0);
-}
-
-.changePos>.igx-grid__td-text {
-    border-inline-end: 4px solid rgb(76, 184, 96);
-    padding-inline-end: 15px;
-}
-
-.changePos1 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(76, 184, 96);
-    padding-inline-end: 15px;
-}
-
-.changePos2 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(76, 184, 96);
-    padding-inline-end: 15px;
-}
-
-.changeNeg > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(255, 20, 75);
-    padding-inline-end: 9px;
-}
-
-.changeNeg1 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(255, 20, 75);
-    padding-inline-end: 9px;
-}
-
-.changeNeg2 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(255, 20, 75);
-    padding-inline-end: 15px;
-}
-
-.positive {
-    color: rgb(76, 184, 96);
-}
-
-.strongPositive2 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(76, 184, 96);
-    padding-inline-end: 15px;
-}
-
-.negative {
-    color: rgb(255, 20, 75);
-}
-
-.strongNegative2 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(255, 20, 75);
-    padding-inline-end: 15px;
-}
-
-.gridSize {
-    --ig-size: var(--ig-size-medium);
-}
-
-.size-small {
-    --ig-size: var(--ig-size-small);
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/finjs/src/index.ts b/samples/grids/grid/finjs/src/index.ts
index c592d791a4..f1d5ba80e2 100644
--- a/samples/grids/grid/finjs/src/index.ts
+++ b/samples/grids/grid/finjs/src/index.ts
@@ -16,7 +16,6 @@ ModuleManager.register(
 
 export class Sample {
 
-
     private grid1: IgcGridComponent;
     private chart: IgcCategoryChartComponent;
     private _timer: ReturnType<typeof setInterval>;
@@ -70,7 +69,6 @@ export class Sample {
         this.stopUpdate = this.stopUpdate.bind(this);
         document.getElementById('stopButton').addEventListener("click", this.stopUpdate);
 
-
         const sliderRecValueSpan = document.getElementById('slider-rec-value') as HTMLElement;
         const recordsSlider = document.getElementById('records') as IgcSliderComponent;
         recordsSlider.value = 1000;
@@ -80,7 +78,6 @@ export class Sample {
             this.grid1.data = this.data;
         });
 
-
         const sliderFreqValueSpan = document.getElementById('slider-freq-value') as HTMLElement;
         const freqSlider = document.getElementById('frequency') as IgcSliderComponent;
         freqSlider.value = 500;
@@ -88,7 +85,6 @@ export class Sample {
             sliderFreqValueSpan.innerHTML = ev.detail;
         });
 
-
         const groupingSwitch = document.getElementById('groupSwitch') as IgcSwitchComponent;
         groupingSwitch.addEventListener('igcChange', (ev: CustomEvent) => {
            if (ev.detail.checked) {
@@ -181,7 +177,6 @@ export class Sample {
         this.chart.yAxisAbbreviateLargeNumbers = true;
     }
 
-
     public openDialogForRow(e: any, rowData: any) {
         const chart = document.getElementById('chart1') as IgcCategoryChartComponent;
         const chartData = this.grid1.data.filter(item => item.region === rowData.region &&
@@ -196,7 +191,6 @@ export class Sample {
         chartDialog.show();
     }
 
-
     public priceTemplate = (ctx: IgcCellTemplateContext) => {
         const cell = ctx.cell;
         const rowData = this.grid1.getRowData(cell.id.rowID);
diff --git a/samples/grids/grid/finjs/tsconfig.json b/samples/grids/grid/finjs/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/finjs/tsconfig.json
+++ b/samples/grids/grid/finjs/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/groupby-custom/package.json b/samples/grids/grid/groupby-custom/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/groupby-custom/package.json
+++ b/samples/grids/grid/groupby-custom/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/groupby-custom/sandbox.config.json b/samples/grids/grid/groupby-custom/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/groupby-custom/sandbox.config.json
+++ b/samples/grids/grid/groupby-custom/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-custom/src/index.css b/samples/grids/grid/groupby-custom/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/groupby-custom/src/index.css
+++ b/samples/grids/grid/groupby-custom/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-custom/src/index.ts b/samples/grids/grid/groupby-custom/src/index.ts
index 312010cd2b..c3431761bf 100644
--- a/samples/grids/grid/groupby-custom/src/index.ts
+++ b/samples/grids/grid/groupby-custom/src/index.ts
@@ -23,6 +23,7 @@ export class Sample {
             year: date.getFullYear(),
         };
     }
+
     public getWeekOfDate(date:any) {
         const onejan = new Date(date.getFullYear(), 0, 1);
         const week = Math.ceil((((date.getTime() - onejan.getTime()) / 86400000) + onejan.getDay() + 1) / 7);
diff --git a/samples/grids/grid/groupby-custom/tsconfig.json b/samples/grids/grid/groupby-custom/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/groupby-custom/tsconfig.json
+++ b/samples/grids/grid/groupby-custom/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/groupby-expressions/package.json b/samples/grids/grid/groupby-expressions/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/groupby-expressions/package.json
+++ b/samples/grids/grid/groupby-expressions/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/groupby-expressions/sandbox.config.json b/samples/grids/grid/groupby-expressions/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/groupby-expressions/sandbox.config.json
+++ b/samples/grids/grid/groupby-expressions/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-expressions/src/index.css b/samples/grids/grid/groupby-expressions/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/groupby-expressions/src/index.css
+++ b/samples/grids/grid/groupby-expressions/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-expressions/src/index.ts b/samples/grids/grid/groupby-expressions/src/index.ts
index fc34d5b498..250d757a33 100644
--- a/samples/grids/grid/groupby-expressions/src/index.ts
+++ b/samples/grids/grid/groupby-expressions/src/index.ts
@@ -3,11 +3,11 @@ import { IgcGridComponent, IgcGroupingExpression, SortingDirection, IgcColumnCom
 import { InvoicesWorldDataItem, InvoicesWorldData } from './InvoicesWorldData';
 import { IgcGroupByRecord, IgcGroupByRowTemplateContext, IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -32,6 +32,7 @@ export class Sample {
         }
         return this._groupingExpression1;
     }
+
     private column1: IgcColumnComponent
     private _bind: () => void;
 
@@ -46,7 +47,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _invoicesWorldData: InvoicesWorldData = null;
@@ -58,7 +58,6 @@ export class Sample {
         return this._invoicesWorldData;
     }
 
-
         public webGridGroupByRowTemplate = (ctx: IgcGroupByRowTemplateContext) => {
 
             const groupRow: IgcGroupByRecord = ctx.implicit;
@@ -74,7 +73,6 @@ export class Sample {
     <igc-badge>${groupRow.records.length}</igc-badge>
     <span style="color:#09f;"> Ordered in 2017:</span><span>${calc2017}</span>
     </div>`;
-
         };
 
         public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
diff --git a/samples/grids/grid/groupby-expressions/tsconfig.json b/samples/grids/grid/groupby-expressions/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/groupby-expressions/tsconfig.json
+++ b/samples/grids/grid/groupby-expressions/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/groupby-expressions/webpack.config.js b/samples/grids/grid/groupby-expressions/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/groupby-expressions/webpack.config.js
+++ b/samples/grids/grid/groupby-expressions/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/groupby-paging/package.json b/samples/grids/grid/groupby-paging/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/groupby-paging/package.json
+++ b/samples/grids/grid/groupby-paging/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/groupby-paging/sandbox.config.json b/samples/grids/grid/groupby-paging/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/groupby-paging/sandbox.config.json
+++ b/samples/grids/grid/groupby-paging/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-paging/src/index.css b/samples/grids/grid/groupby-paging/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/groupby-paging/src/index.css
+++ b/samples/grids/grid/groupby-paging/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-paging/src/index.ts b/samples/grids/grid/groupby-paging/src/index.ts
index 320d2ac7bc..74413b6502 100644
--- a/samples/grids/grid/groupby-paging/src/index.ts
+++ b/samples/grids/grid/groupby-paging/src/index.ts
@@ -3,11 +3,11 @@ import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'ignit
 import { InvoicesWorldDataItem, InvoicesWorldData } from './InvoicesWorldData';
 import { IgcGroupByRecord, IgcGroupByRowTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -26,6 +26,7 @@ export class Sample {
         }
         return this._groupingExpression1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -37,7 +38,6 @@ export class Sample {
             grid.groupRowTemplate = this.webGridGroupByRowTemplate;
         }
         this._bind();
-
     }
 
     private _invoicesWorldData: InvoicesWorldData = null;
@@ -49,7 +49,6 @@ export class Sample {
         return this._invoicesWorldData;
     }
 
-
         public webGridGroupByRowTemplate = (ctx: IgcGroupByRowTemplateContext) => {
 
             const groupRow: IgcGroupByRecord = ctx.implicit;
@@ -65,7 +64,6 @@ export class Sample {
     <igc-badge>${groupRow.records.length}</igc-badge>
     <span style="color:#09f;"> Ordered in 2017:</span><span>${calc2017}</span>
     </div>`;
-
         };
 
 }
diff --git a/samples/grids/grid/groupby-paging/tsconfig.json b/samples/grids/grid/groupby-paging/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/groupby-paging/tsconfig.json
+++ b/samples/grids/grid/groupby-paging/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/groupby-paging/webpack.config.js b/samples/grids/grid/groupby-paging/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/groupby-paging/webpack.config.js
+++ b/samples/grids/grid/groupby-paging/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/groupby-styling/package.json b/samples/grids/grid/groupby-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/groupby-styling/package.json
+++ b/samples/grids/grid/groupby-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/groupby-styling/sandbox.config.json b/samples/grids/grid/groupby-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/groupby-styling/sandbox.config.json
+++ b/samples/grids/grid/groupby-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-styling/src/index.css b/samples/grids/grid/groupby-styling/src/index.css
index 16ec1e174e..0fe9368715 100644
--- a/samples/grids/grid/groupby-styling/src/index.css
+++ b/samples/grids/grid/groupby-styling/src/index.css
@@ -1,21 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-chip-text-color: rgb(248, 248, 248);
-    --ig-chip-hover-text-color: rgb(225, 225, 225);
-    --ig-chip-background: rgb(73, 73, 73);
-    --ig-chip-hover-background: rgb(56, 56, 56);
-    --ig-chip-focus-background: rgb(223, 181, 13);
-    --ig-chip-selected-background: rgb(223, 181, 13);
-    --ig-chip-focus-selected-background: rgb(223, 181, 13);
-    --ig-grid-group-row-background: rgb(73, 73, 73);
-    --ig-grid-group-row-selected-background: rgb(56, 56, 56);
-    --ig-grid-group-label-column-name-text: rgb(248, 248, 248);
-    --ig-grid-group-label-text: rgb(248, 248, 248);
-    --ig-grid-group-count-background: rgb(255, 205, 15);
-    --ig-grid-group-count-text-color: rgb(34, 34, 34);
-    --ig-grid-expand-icon-color: rgb(255, 205, 15);
-    --ig-grid-expand-icon-hover-color: rgb(223, 181, 13);
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-styling/src/index.ts b/samples/grids/grid/groupby-styling/src/index.ts
index 1acf86ef2c..9550ee4a86 100644
--- a/samples/grids/grid/groupby-styling/src/index.ts
+++ b/samples/grids/grid/groupby-styling/src/index.ts
@@ -4,11 +4,11 @@ import { IgcGridComponent, IgcGroupingExpression, SortingDirection, IgcColumnCom
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -33,6 +33,7 @@ export class Sample {
         }
         return this._groupingExpression1;
     }
+
     private orderID: IgcColumnComponent
     private shipCountry: IgcColumnComponent
     private orderDate: IgcColumnComponent
@@ -54,6 +55,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private quantity: IgcColumnComponent
     private _bind: () => void;
 
@@ -78,7 +80,6 @@ export class Sample {
             unitPrice.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _invoicesData: InvoicesData = null;
diff --git a/samples/grids/grid/groupby-styling/tsconfig.json b/samples/grids/grid/groupby-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/groupby-styling/tsconfig.json
+++ b/samples/grids/grid/groupby-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/groupby-styling/webpack.config.js b/samples/grids/grid/groupby-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/groupby-styling/webpack.config.js
+++ b/samples/grids/grid/groupby-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/groupby-summary-options/package.json b/samples/grids/grid/groupby-summary-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/groupby-summary-options/package.json
+++ b/samples/grids/grid/groupby-summary-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/groupby-summary-options/sandbox.config.json b/samples/grids/grid/groupby-summary-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/groupby-summary-options/sandbox.config.json
+++ b/samples/grids/grid/groupby-summary-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-summary-options/src/index.css b/samples/grids/grid/groupby-summary-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/groupby-summary-options/src/index.css
+++ b/samples/grids/grid/groupby-summary-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-summary-options/src/index.ts b/samples/grids/grid/groupby-summary-options/src/index.ts
index da7a25a87f..5f05e747f4 100644
--- a/samples/grids/grid/groupby-summary-options/src/index.ts
+++ b/samples/grids/grid/groupby-summary-options/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescrip
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent, IgcGroupingExpression, SortingDirection, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -39,6 +39,7 @@ export class Sample {
         }
         return this._groupingExpression1;
     }
+
     private column1: IgcColumnComponent
     private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs1(): IgcColumnPipeArgs {
@@ -52,6 +53,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -70,7 +72,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _invoicesData: InvoicesData = null;
diff --git a/samples/grids/grid/groupby-summary-options/tsconfig.json b/samples/grids/grid/groupby-summary-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/groupby-summary-options/tsconfig.json
+++ b/samples/grids/grid/groupby-summary-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/groupby-summary-options/webpack.config.js b/samples/grids/grid/groupby-summary-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/groupby-summary-options/webpack.config.js
+++ b/samples/grids/grid/groupby-summary-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/groupby-summary-styling/package.json b/samples/grids/grid/groupby-summary-styling/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/groupby-summary-styling/package.json
+++ b/samples/grids/grid/groupby-summary-styling/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/groupby-summary-styling/sandbox.config.json b/samples/grids/grid/groupby-summary-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/groupby-summary-styling/sandbox.config.json
+++ b/samples/grids/grid/groupby-summary-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-summary-styling/src/index.css b/samples/grids/grid/groupby-summary-styling/src/index.css
index d303322bf9..0fe9368715 100644
--- a/samples/grids/grid/groupby-summary-styling/src/index.css
+++ b/samples/grids/grid/groupby-summary-styling/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-summary-background-color:#e0f3ff;
-    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
-    --ig-grid-summary-label-color: rgb(228, 27, 117);
-    --ig-grid-summary-result-color: black;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/groupby-summary-styling/src/index.ts b/samples/grids/grid/groupby-summary-styling/src/index.ts
index b31b75404e..45af7fad30 100644
--- a/samples/grids/grid/groupby-summary-styling/src/index.ts
+++ b/samples/grids/grid/groupby-summary-styling/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescrip
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent, IgcGroupingExpression, SortingDirection, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -38,6 +38,7 @@ export class Sample {
         }
         return this._groupingExpression1;
     }
+
     private column1: IgcColumnComponent
     private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs1(): IgcColumnPipeArgs {
@@ -51,6 +52,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -68,7 +70,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _invoicesData: InvoicesData = null;
diff --git a/samples/grids/grid/groupby-summary-styling/tsconfig.json b/samples/grids/grid/groupby-summary-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/groupby-summary-styling/tsconfig.json
+++ b/samples/grids/grid/groupby-summary-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/groupby-summary-styling/webpack.config.js b/samples/grids/grid/groupby-summary-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/groupby-summary-styling/webpack.config.js
+++ b/samples/grids/grid/groupby-summary-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/infinite-scroll/package.json b/samples/grids/grid/infinite-scroll/package.json
index adb19e0cf0..b4a62c28b8 100644
--- a/samples/grids/grid/infinite-scroll/package.json
+++ b/samples/grids/grid/infinite-scroll/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "rxjs": "7.8.1",
     "tslib": "^2.0.0"
diff --git a/samples/grids/grid/infinite-scroll/sandbox.config.json b/samples/grids/grid/infinite-scroll/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/infinite-scroll/sandbox.config.json
+++ b/samples/grids/grid/infinite-scroll/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/infinite-scroll/src/index.ts b/samples/grids/grid/infinite-scroll/src/index.ts
index 3c854e94a6..ad117e4317 100644
--- a/samples/grids/grid/infinite-scroll/src/index.ts
+++ b/samples/grids/grid/infinite-scroll/src/index.ts
@@ -3,11 +3,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent, IgcForOfState } from 'igniteui-webcomponents-grids/grids';
 import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
 import { RemoteNwindService } from './NwindService';
 
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
diff --git a/samples/grids/grid/infinite-scroll/tsconfig.json b/samples/grids/grid/infinite-scroll/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/infinite-scroll/tsconfig.json
+++ b/samples/grids/grid/infinite-scroll/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/keyboard-custom-navigation/package.json b/samples/grids/grid/keyboard-custom-navigation/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/keyboard-custom-navigation/package.json
+++ b/samples/grids/grid/keyboard-custom-navigation/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/keyboard-custom-navigation/sandbox.config.json b/samples/grids/grid/keyboard-custom-navigation/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/keyboard-custom-navigation/sandbox.config.json
+++ b/samples/grids/grid/keyboard-custom-navigation/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/keyboard-custom-navigation/src/index.css b/samples/grids/grid/keyboard-custom-navigation/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/grid/keyboard-custom-navigation/src/index.css
+++ b/samples/grids/grid/keyboard-custom-navigation/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/keyboard-custom-navigation/src/index.ts b/samples/grids/grid/keyboard-custom-navigation/src/index.ts
index 44451a1ff9..03e8b27565 100644
--- a/samples/grids/grid/keyboard-custom-navigation/src/index.ts
+++ b/samples/grids/grid/keyboard-custom-navigation/src/index.ts
@@ -4,12 +4,12 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescrip
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcGridKeydownEventArgs, GridKeydownTargetType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -40,7 +40,6 @@ export class Sample {
             grid.addEventListener("gridKeydown", this.webGridCustomKBNav);
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/keyboard-custom-navigation/tsconfig.json b/samples/grids/grid/keyboard-custom-navigation/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/keyboard-custom-navigation/tsconfig.json
+++ b/samples/grids/grid/keyboard-custom-navigation/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/keyboard-custom-navigation/webpack.config.js b/samples/grids/grid/keyboard-custom-navigation/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/keyboard-custom-navigation/webpack.config.js
+++ b/samples/grids/grid/keyboard-custom-navigation/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/keyboard-mrl-navigation/package.json b/samples/grids/grid/keyboard-mrl-navigation/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/keyboard-mrl-navigation/package.json
+++ b/samples/grids/grid/keyboard-mrl-navigation/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/keyboard-mrl-navigation/sandbox.config.json b/samples/grids/grid/keyboard-mrl-navigation/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/keyboard-mrl-navigation/sandbox.config.json
+++ b/samples/grids/grid/keyboard-mrl-navigation/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/keyboard-mrl-navigation/src/index.css b/samples/grids/grid/keyboard-mrl-navigation/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/grid/keyboard-mrl-navigation/src/index.css
+++ b/samples/grids/grid/keyboard-mrl-navigation/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/keyboard-mrl-navigation/src/index.ts b/samples/grids/grid/keyboard-mrl-navigation/src/index.ts
index 0c628cc208..37d83bf9e3 100644
--- a/samples/grids/grid/keyboard-mrl-navigation/src/index.ts
+++ b/samples/grids/grid/keyboard-mrl-navigation/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebGridDescriptionModule, WebColumnLayoutDescription
 import { IgcGridComponent, IgcColumnLayoutComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { CompanyDataItem, CompanyData } from './CompanyData';
 import { IgcGridKeydownEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -52,7 +52,6 @@ export class Sample {
             grid.addEventListener("gridKeydown", this.webGridMRLCustomNavigationEvent);
         }
         this._bind();
-
     }
 
     private _companyData: CompanyData = null;
diff --git a/samples/grids/grid/keyboard-mrl-navigation/tsconfig.json b/samples/grids/grid/keyboard-mrl-navigation/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/keyboard-mrl-navigation/tsconfig.json
+++ b/samples/grids/grid/keyboard-mrl-navigation/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/keyboard-mrl-navigation/webpack.config.js b/samples/grids/grid/keyboard-mrl-navigation/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/keyboard-mrl-navigation/webpack.config.js
+++ b/samples/grids/grid/keyboard-mrl-navigation/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/keyboard-navigation-guide/package.json b/samples/grids/grid/keyboard-navigation-guide/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/keyboard-navigation-guide/package.json
+++ b/samples/grids/grid/keyboard-navigation-guide/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/keyboard-navigation-guide/sandbox.config.json b/samples/grids/grid/keyboard-navigation-guide/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/keyboard-navigation-guide/sandbox.config.json
+++ b/samples/grids/grid/keyboard-navigation-guide/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/keyboard-navigation-guide/src/index.css b/samples/grids/grid/keyboard-navigation-guide/src/index.css
index 04aaff09bf..0fe9368715 100644
--- a/samples/grids/grid/keyboard-navigation-guide/src/index.css
+++ b/samples/grids/grid/keyboard-navigation-guide/src/index.css
@@ -1,33 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.gridSize {
-    --ig-size: var(--ig-size-small);
-}
-
-.grid_wrapper {
-    width: 75%;
-}
-
-.list_wrapper {
-    width: 20%;
-}
-
-.container {
-    display: flex;
-    flex-direction: row;
-}
-
-.empty-list > h6 {
-    padding: 15px;
-    font-size: 15px;
-}
-
-.empty-list > ul {
-    margin-left: 15px;
-    font-weight: 400;
-}
-
-.disabled {
-    opacity: .4;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/keyboard-navigation-guide/src/index.ts b/samples/grids/grid/keyboard-navigation-guide/src/index.ts
index 8d9d0b0ef1..bcd204963f 100644
--- a/samples/grids/grid/keyboard-navigation-guide/src/index.ts
+++ b/samples/grids/grid/keyboard-navigation-guide/src/index.ts
@@ -34,7 +34,6 @@ const summaryCombinations: Item[] = [
     new Item('End', 'navigates to the last summary cell', false, ItemAction.Always)
 ];
 
-
 export class Sample {
 
     private grid: IgcGridComponent
@@ -64,7 +63,6 @@ export class Sample {
             grid.addEventListener("keydown", this.keydown);
         }
         this._bind();
-
     }
 
     public masterDetailTemplate = (ctx: IgcGridMasterDetailContext) => {
@@ -265,7 +263,6 @@ export class Sample {
        this.keydown(evt);
     }
 
-
     public listTemplate = () => {
         let htmlContent = "";
         (window as any).onChangeHandler = (i: number) => {
diff --git a/samples/grids/grid/keyboard-navigation-guide/tsconfig.json b/samples/grids/grid/keyboard-navigation-guide/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/keyboard-navigation-guide/tsconfig.json
+++ b/samples/grids/grid/keyboard-navigation-guide/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/layout-display-density/package.json b/samples/grids/grid/layout-display-density/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/layout-display-density/package.json
+++ b/samples/grids/grid/layout-display-density/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/layout-display-density/sandbox.config.json b/samples/grids/grid/layout-display-density/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/layout-display-density/sandbox.config.json
+++ b/samples/grids/grid/layout-display-density/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/layout-display-density/src/index.css b/samples/grids/grid/layout-display-density/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/layout-display-density/src/index.css
+++ b/samples/grids/grid/layout-display-density/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/layout-display-density/src/index.ts b/samples/grids/grid/layout-display-density/src/index.ts
index 059f03a3f2..2e26dcc903 100644
--- a/samples/grids/grid/layout-display-density/src/index.ts
+++ b/samples/grids/grid/layout-display-density/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -38,7 +38,6 @@ export class Sample {
             grid.data = this.invoicesData;
         }
         this._bind();
-
     }
 
     private _invoicesData: InvoicesData = null;
diff --git a/samples/grids/grid/layout-display-density/tsconfig.json b/samples/grids/grid/layout-display-density/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/layout-display-density/tsconfig.json
+++ b/samples/grids/grid/layout-display-density/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/layout-display-density/webpack.config.js b/samples/grids/grid/layout-display-density/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/layout-display-density/webpack.config.js
+++ b/samples/grids/grid/layout-display-density/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/master-detail/package.json b/samples/grids/grid/master-detail/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/master-detail/package.json
+++ b/samples/grids/grid/master-detail/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/master-detail/sandbox.config.json b/samples/grids/grid/master-detail/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/master-detail/sandbox.config.json
+++ b/samples/grids/grid/master-detail/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/master-detail/src/index.css b/samples/grids/grid/master-detail/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/master-detail/src/index.css
+++ b/samples/grids/grid/master-detail/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/master-detail/src/index.ts b/samples/grids/grid/master-detail/src/index.ts
index 7481e0acbf..0d2d3c46ae 100644
--- a/samples/grids/grid/master-detail/src/index.ts
+++ b/samples/grids/grid/master-detail/src/index.ts
@@ -3,11 +3,11 @@ import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcGridMasterDetailContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -21,7 +21,6 @@ export class Sample {
             grid.detailTemplate = this.webGridMasterDetailTemplate;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
@@ -33,7 +32,6 @@ export class Sample {
         return this._customersData;
     }
 
-
     public webGridMasterDetailTemplate = (ctx: IgcGridMasterDetailContext) => {
         var data = ctx.implicit;
         return html` <div class="contact-container">
diff --git a/samples/grids/grid/master-detail/tsconfig.json b/samples/grids/grid/master-detail/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/master-detail/tsconfig.json
+++ b/samples/grids/grid/master-detail/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/master-detail/webpack.config.js b/samples/grids/grid/master-detail/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/master-detail/webpack.config.js
+++ b/samples/grids/grid/master-detail/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/multi-cell-selection-mode/package.json b/samples/grids/grid/multi-cell-selection-mode/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/multi-cell-selection-mode/package.json
+++ b/samples/grids/grid/multi-cell-selection-mode/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/multi-cell-selection-mode/src/index.ts b/samples/grids/grid/multi-cell-selection-mode/src/index.ts
index c568349d5f..88c0207c86 100644
--- a/samples/grids/grid/multi-cell-selection-mode/src/index.ts
+++ b/samples/grids/grid/multi-cell-selection-mode/src/index.ts
@@ -1,9 +1,9 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesData } from './InvoicesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 
+
 export class Sample {
 
     private leftGrid: IgcGridComponent;
@@ -14,22 +14,22 @@ export class Sample {
     private _bind: () => void;
 
     constructor() {
-        var leftGrid = this.leftGrid = document.getElementById('leftGrid') as IgcGridComponent;        
-        var rightGrid = this.rightGrid = document.getElementById('rightGrid') as IgcGridComponent;     
-        
+        var leftGrid = this.leftGrid = document.getElementById('leftGrid') as IgcGridComponent;
+        var rightGrid = this.rightGrid = document.getElementById('rightGrid') as IgcGridComponent;
+
         this.onGridRangeSelected = this.onGridRangeSelected.bind(this);
 
         this.leftGridData = new InvoicesData();
 
         this._bind = () => {
-            leftGrid.data = this.leftGridData;            
+            leftGrid.data = this.leftGridData;
             leftGrid.addEventListener("rangeSelected", this.onGridRangeSelected);
         }
         this._bind();
     }
 
-    public onGridRangeSelected(): void {        
-        this.rightGrid.data = this.leftGrid.getSelectedData();        
+    public onGridRangeSelected(): void {
+        this.rightGrid.data = this.leftGrid.getSelectedData();
     }
 }
 
diff --git a/samples/grids/grid/multi-cell-selection-mode/tsconfig.json b/samples/grids/grid/multi-cell-selection-mode/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/multi-cell-selection-mode/tsconfig.json
+++ b/samples/grids/grid/multi-cell-selection-mode/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/multi-column-headers-export/package.json b/samples/grids/grid/multi-column-headers-export/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/multi-column-headers-export/package.json
+++ b/samples/grids/grid/multi-column-headers-export/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/multi-column-headers-export/sandbox.config.json b/samples/grids/grid/multi-column-headers-export/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/multi-column-headers-export/sandbox.config.json
+++ b/samples/grids/grid/multi-column-headers-export/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/multi-column-headers-export/src/index.css b/samples/grids/grid/multi-column-headers-export/src/index.css
index db87b63a60..0fe9368715 100644
--- a/samples/grids/grid/multi-column-headers-export/src/index.css
+++ b/samples/grids/grid/multi-column-headers-export/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-small);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/multi-column-headers-export/src/index.ts b/samples/grids/grid/multi-column-headers-export/src/index.ts
index 6c0c15d7b9..888cd328b8 100644
--- a/samples/grids/grid/multi-column-headers-export/src/index.ts
+++ b/samples/grids/grid/multi-column-headers-export/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebGridDescriptionModule, WebGridToolbarDescriptionM
 import { IgcGridComponent, IgcGridToolbarExporterComponent, IgcColumnComponent, IgcColumnGroupComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcExporterEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -56,7 +56,6 @@ export class Sample {
             gridToolbarExporter1.addEventListener("exportStarted", this.webGridExportEventMultiColumnHeaders);
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/multi-column-headers-export/tsconfig.json b/samples/grids/grid/multi-column-headers-export/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/multi-column-headers-export/tsconfig.json
+++ b/samples/grids/grid/multi-column-headers-export/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/multi-column-headers-export/webpack.config.js b/samples/grids/grid/multi-column-headers-export/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/multi-column-headers-export/webpack.config.js
+++ b/samples/grids/grid/multi-column-headers-export/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/multi-column-headers-overview/package.json b/samples/grids/grid/multi-column-headers-overview/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/multi-column-headers-overview/package.json
+++ b/samples/grids/grid/multi-column-headers-overview/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/multi-column-headers-overview/sandbox.config.json b/samples/grids/grid/multi-column-headers-overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/multi-column-headers-overview/sandbox.config.json
+++ b/samples/grids/grid/multi-column-headers-overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/multi-column-headers-overview/src/index.css b/samples/grids/grid/multi-column-headers-overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/multi-column-headers-overview/src/index.css
+++ b/samples/grids/grid/multi-column-headers-overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/multi-column-headers-overview/src/index.ts b/samples/grids/grid/multi-column-headers-overview/src/index.ts
index 6002cac572..cf93180510 100644
--- a/samples/grids/grid/multi-column-headers-overview/src/index.ts
+++ b/samples/grids/grid/multi-column-headers-overview/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -42,7 +42,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/multi-column-headers-overview/tsconfig.json b/samples/grids/grid/multi-column-headers-overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/multi-column-headers-overview/tsconfig.json
+++ b/samples/grids/grid/multi-column-headers-overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/multi-column-headers-overview/webpack.config.js b/samples/grids/grid/multi-column-headers-overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/multi-column-headers-overview/webpack.config.js
+++ b/samples/grids/grid/multi-column-headers-overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/multi-column-headers-styling/package.json b/samples/grids/grid/multi-column-headers-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/multi-column-headers-styling/package.json
+++ b/samples/grids/grid/multi-column-headers-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/multi-column-headers-styling/sandbox.config.json b/samples/grids/grid/multi-column-headers-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/multi-column-headers-styling/sandbox.config.json
+++ b/samples/grids/grid/multi-column-headers-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/multi-column-headers-styling/src/index.css b/samples/grids/grid/multi-column-headers-styling/src/index.css
index eb64922daf..0fe9368715 100644
--- a/samples/grids/grid/multi-column-headers-styling/src/index.css
+++ b/samples/grids/grid/multi-column-headers-styling/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-header-background: #e0f3ff;
-    --ig-grid-header-text-color: #e41c77;
-    --ig-grid-header-border-width: 1px;
-    --ig-grid-header-border-style: solid;
-    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/multi-column-headers-styling/src/index.ts b/samples/grids/grid/multi-column-headers-styling/src/index.ts
index 9a2e3a243f..8c120b22e2 100644
--- a/samples/grids/grid/multi-column-headers-styling/src/index.ts
+++ b/samples/grids/grid/multi-column-headers-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule, WebColumnGroupDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/multi-column-headers-styling/tsconfig.json b/samples/grids/grid/multi-column-headers-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/multi-column-headers-styling/tsconfig.json
+++ b/samples/grids/grid/multi-column-headers-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/multi-column-headers-styling/webpack.config.js b/samples/grids/grid/multi-column-headers-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/multi-column-headers-styling/webpack.config.js
+++ b/samples/grids/grid/multi-column-headers-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/multi-column-headers-template/package.json b/samples/grids/grid/multi-column-headers-template/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/multi-column-headers-template/package.json
+++ b/samples/grids/grid/multi-column-headers-template/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/multi-column-headers-template/sandbox.config.json b/samples/grids/grid/multi-column-headers-template/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/multi-column-headers-template/sandbox.config.json
+++ b/samples/grids/grid/multi-column-headers-template/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/multi-column-headers-template/src/index.css b/samples/grids/grid/multi-column-headers-template/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/multi-column-headers-template/src/index.css
+++ b/samples/grids/grid/multi-column-headers-template/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/multi-column-headers-template/src/index.ts b/samples/grids/grid/multi-column-headers-template/src/index.ts
index a77c0706e5..332196626b 100644
--- a/samples/grids/grid/multi-column-headers-template/src/index.ts
+++ b/samples/grids/grid/multi-column-headers-template/src/index.ts
@@ -4,11 +4,11 @@ import { IgcGridComponent, IgcColumnGroupComponent } from 'igniteui-webcomponent
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcColumnTemplateContext, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -27,7 +27,6 @@ export class Sample {
             columnGroup2.headerTemplate = this.webGridColumnGroupHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/multi-column-headers-template/tsconfig.json b/samples/grids/grid/multi-column-headers-template/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/multi-column-headers-template/tsconfig.json
+++ b/samples/grids/grid/multi-column-headers-template/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/multi-column-headers-template/webpack.config.js b/samples/grids/grid/multi-column-headers-template/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/multi-column-headers-template/webpack.config.js
+++ b/samples/grids/grid/multi-column-headers-template/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/multi-row-layout-options/package.json b/samples/grids/grid/multi-row-layout-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/multi-row-layout-options/package.json
+++ b/samples/grids/grid/multi-row-layout-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/multi-row-layout-options/sandbox.config.json b/samples/grids/grid/multi-row-layout-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/multi-row-layout-options/sandbox.config.json
+++ b/samples/grids/grid/multi-row-layout-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/multi-row-layout-options/src/index.css b/samples/grids/grid/multi-row-layout-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/multi-row-layout-options/src/index.css
+++ b/samples/grids/grid/multi-row-layout-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/multi-row-layout-options/src/index.ts b/samples/grids/grid/multi-row-layout-options/src/index.ts
index 27cba6fe86..fc7536ddef 100644
--- a/samples/grids/grid/multi-row-layout-options/src/index.ts
+++ b/samples/grids/grid/multi-row-layout-options/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -25,6 +25,7 @@ export class Sample {
         }
         return this._groupingExpression1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -35,7 +36,6 @@ export class Sample {
             grid.groupingExpressions = this.groupingExpression1;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/multi-row-layout-options/tsconfig.json b/samples/grids/grid/multi-row-layout-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/multi-row-layout-options/tsconfig.json
+++ b/samples/grids/grid/multi-row-layout-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/multi-row-layout-options/webpack.config.js b/samples/grids/grid/multi-row-layout-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/multi-row-layout-options/webpack.config.js
+++ b/samples/grids/grid/multi-row-layout-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/multi-row-layout-style/package.json b/samples/grids/grid/multi-row-layout-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/multi-row-layout-style/package.json
+++ b/samples/grids/grid/multi-row-layout-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/multi-row-layout-style/sandbox.config.json b/samples/grids/grid/multi-row-layout-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/multi-row-layout-style/sandbox.config.json
+++ b/samples/grids/grid/multi-row-layout-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/multi-row-layout-style/src/index.css b/samples/grids/grid/multi-row-layout-style/src/index.css
index 9ceb614ee8..0fe9368715 100644
--- a/samples/grids/grid/multi-row-layout-style/src/index.css
+++ b/samples/grids/grid/multi-row-layout-style/src/index.css
@@ -1,12 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-cell-active-border-color: #ffcd0f;
-    --ig-grid-cell-selected-background: #6f6f6f;
-    --ig-grid-row-hover-background: #fde069;
-    --ig-grid-row-selected-background: #8d8d8d;
-    --ig-grid-header-background: #494949;
-    --ig-grid-header-text-color: #fff;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/multi-row-layout-style/src/index.ts b/samples/grids/grid/multi-row-layout-style/src/index.ts
index 8070367ccc..f33fc1fd1d 100644
--- a/samples/grids/grid/multi-row-layout-style/src/index.ts
+++ b/samples/grids/grid/multi-row-layout-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.customersData;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/multi-row-layout-style/tsconfig.json b/samples/grids/grid/multi-row-layout-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/multi-row-layout-style/tsconfig.json
+++ b/samples/grids/grid/multi-row-layout-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/multi-row-layout-style/webpack.config.js b/samples/grids/grid/multi-row-layout-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/multi-row-layout-style/webpack.config.js
+++ b/samples/grids/grid/multi-row-layout-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/overview/package.json b/samples/grids/grid/overview/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/overview/package.json
+++ b/samples/grids/grid/overview/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/overview/sandbox.config.json b/samples/grids/grid/overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/overview/sandbox.config.json
+++ b/samples/grids/grid/overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/overview/src/index.css b/samples/grids/grid/overview/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/grid/overview/src/index.css
+++ b/samples/grids/grid/overview/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/overview/src/index.ts b/samples/grids/grid/overview/src/index.ts
index 995733edef..91133e55e2 100644
--- a/samples/grids/grid/overview/src/index.ts
+++ b/samples/grids/grid/overview/src/index.ts
@@ -3,11 +3,11 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import NwindData from './NwindData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -23,7 +23,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
@@ -31,7 +30,6 @@ export class Sample {
         return this._nwindData;
     }
 
-
         public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
             if (ctx.cell.value) {
                 return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
diff --git a/samples/grids/grid/overview/tsconfig.json b/samples/grids/grid/overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/overview/tsconfig.json
+++ b/samples/grids/grid/overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/overview/webpack.config.js b/samples/grids/grid/overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/overview/webpack.config.js
+++ b/samples/grids/grid/overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/paste/package.json b/samples/grids/grid/paste/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/paste/package.json
+++ b/samples/grids/grid/paste/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/paste/sandbox.config.json b/samples/grids/grid/paste/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/paste/sandbox.config.json
+++ b/samples/grids/grid/paste/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/paste/src/index.css b/samples/grids/grid/paste/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/paste/src/index.css
+++ b/samples/grids/grid/paste/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/paste/src/index.ts b/samples/grids/grid/paste/src/index.ts
index d1d29c689a..46afbef599 100644
--- a/samples/grids/grid/paste/src/index.ts
+++ b/samples/grids/grid/paste/src/index.ts
@@ -6,11 +6,11 @@ import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcGridKeydownEventArgs, GridKeydownTargetType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -40,7 +40,6 @@ export class Sample {
             grid.addEventListener("rendered", this.webGridPasteFromExcel);
         }
         this._bind();
-
     }
 
     private _invoicesData: InvoicesData = null;
@@ -74,6 +73,7 @@ export class Sample {
         this.onKeyDown = this.onKeyDown.bind(this);
         grid.addEventListener("keydown", this.onKeyDown);
     }
+
     public onKeyDown(eventArgs: any): void {
         const ctrl = eventArgs.ctrlKey;
         const key = eventArgs.keyCode;
@@ -99,7 +99,6 @@ export class Sample {
             style.width = "0px";
             style.overflow = "hidden";
             div.appendChild(this.txtArea);
-
             this.txtArea.addEventListener("paste", (eventArgs: any) => { this.onPaste(eventArgs); });
         }
         return this.txtArea;
@@ -157,6 +156,7 @@ export class Sample {
                 }
             });
         }
+
         public updateRecords(processedData: any[]) {
             const grid = this.grid as any;
             const cell = grid.selectedCells[0];
diff --git a/samples/grids/grid/paste/tsconfig.json b/samples/grids/grid/paste/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/paste/tsconfig.json
+++ b/samples/grids/grid/paste/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/paste/webpack.config.js b/samples/grids/grid/paste/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/paste/webpack.config.js
+++ b/samples/grids/grid/paste/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/remote-paging-data/package.json b/samples/grids/grid/remote-paging-data/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/remote-paging-data/package.json
+++ b/samples/grids/grid/remote-paging-data/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/remote-paging-data/sandbox.config.json b/samples/grids/grid/remote-paging-data/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/remote-paging-data/sandbox.config.json
+++ b/samples/grids/grid/remote-paging-data/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/remote-paging-data/src/index.css b/samples/grids/grid/remote-paging-data/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/remote-paging-data/src/index.css
+++ b/samples/grids/grid/remote-paging-data/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/remote-paging-data/src/index.ts b/samples/grids/grid/remote-paging-data/src/index.ts
index a3c2ff02e3..841d3e46d0 100644
--- a/samples/grids/grid/remote-paging-data/src/index.ts
+++ b/samples/grids/grid/remote-paging-data/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -37,7 +37,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/remote-paging-data/tsconfig.json b/samples/grids/grid/remote-paging-data/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/remote-paging-data/tsconfig.json
+++ b/samples/grids/grid/remote-paging-data/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/remote-paging-data/webpack.config.js b/samples/grids/grid/remote-paging-data/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/remote-paging-data/webpack.config.js
+++ b/samples/grids/grid/remote-paging-data/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/remote-paging-grid/package.json b/samples/grids/grid/remote-paging-grid/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/remote-paging-grid/package.json
+++ b/samples/grids/grid/remote-paging-grid/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/remote-paging-grid/sandbox.config.json b/samples/grids/grid/remote-paging-grid/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/remote-paging-grid/sandbox.config.json
+++ b/samples/grids/grid/remote-paging-grid/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/remote-paging-grid/src/index.css b/samples/grids/grid/remote-paging-grid/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/remote-paging-grid/src/index.css
+++ b/samples/grids/grid/remote-paging-grid/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/remote-paging-grid/src/index.ts b/samples/grids/grid/remote-paging-grid/src/index.ts
index 476ad72872..148ed763e3 100644
--- a/samples/grids/grid/remote-paging-grid/src/index.ts
+++ b/samples/grids/grid/remote-paging-grid/src/index.ts
@@ -4,7 +4,6 @@ import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import "./index.css";
 import { RemotePagingService } from './RemotePagingService';
 
-
 export class Sample {
 
     public data: any[] = [];
@@ -30,11 +29,11 @@ export class Sample {
     this._totalRecordsCount = value;
     this.grid.totalRecords = value;
     }
-  
+
     constructor() {
       this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
       this.grid = document.getElementById('grid') as IgcGridComponent;
-      
+
       this._bind = () => {
         this.remotePagingService.getDataLength().then((length) => {
             this.totalRecordsCount = length;
@@ -57,7 +56,7 @@ export class Sample {
         this.page = page;
         const skip = this.page * this.perPage;
         const top = this.perPage;
-    
+
         this.remotePagingService.getData(skip, top).then((data)=> {
           this.data = data; // Assign received data to this.data
           this.grid.isLoading = false;
@@ -75,8 +74,7 @@ export class Sample {
           this.grid.data = this.data;
       }
   }
-    
+
 }
 
 new Sample();
-  
\ No newline at end of file
diff --git a/samples/grids/grid/remote-paging-grid/tsconfig.json b/samples/grids/grid/remote-paging-grid/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/remote-paging-grid/tsconfig.json
+++ b/samples/grids/grid/remote-paging-grid/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-adding/package.json b/samples/grids/grid/row-adding/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-adding/package.json
+++ b/samples/grids/grid/row-adding/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-adding/sandbox.config.json b/samples/grids/grid/row-adding/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-adding/sandbox.config.json
+++ b/samples/grids/grid/row-adding/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-adding/src/index.css b/samples/grids/grid/row-adding/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/row-adding/src/index.css
+++ b/samples/grids/grid/row-adding/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-adding/src/index.ts b/samples/grids/grid/row-adding/src/index.ts
index d0492118e8..ad2bdf62a8 100644
--- a/samples/grids/grid/row-adding/src/index.ts
+++ b/samples/grids/grid/row-adding/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -33,7 +33,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/row-adding/tsconfig.json b/samples/grids/grid/row-adding/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-adding/tsconfig.json
+++ b/samples/grids/grid/row-adding/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-adding/webpack.config.js b/samples/grids/grid/row-adding/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-adding/webpack.config.js
+++ b/samples/grids/grid/row-adding/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-classes/package.json b/samples/grids/grid/row-classes/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-classes/package.json
+++ b/samples/grids/grid/row-classes/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-classes/sandbox.config.json b/samples/grids/grid/row-classes/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-classes/sandbox.config.json
+++ b/samples/grids/grid/row-classes/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-classes/src/index.css b/samples/grids/grid/row-classes/src/index.css
index de13be7ed3..0fe9368715 100644
--- a/samples/grids/grid/row-classes/src/index.css
+++ b/samples/grids/grid/row-classes/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    .activeRow {
-        border-top: 2px solid #fc81b8;
-        border-left: 3px solid #e41c77;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-classes/src/index.ts b/samples/grids/grid/row-classes/src/index.ts
index 79410f6806..4e831dfa1d 100644
--- a/samples/grids/grid/row-classes/src/index.ts
+++ b/samples/grids/grid/row-classes/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcRowType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -32,7 +32,6 @@ export class Sample {
             grid1.rowClasses = this.webGridRowClassesHandler;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
@@ -40,7 +39,6 @@ export class Sample {
         return this._nwindData;
     }
 
-
     public webGridRowClassesHandler = {
       activeRow: (row: IgcRowType) => row.index % 2 === 0
     };
diff --git a/samples/grids/grid/row-classes/tsconfig.json b/samples/grids/grid/row-classes/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-classes/tsconfig.json
+++ b/samples/grids/grid/row-classes/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-classes/webpack.config.js b/samples/grids/grid/row-classes/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-classes/webpack.config.js
+++ b/samples/grids/grid/row-classes/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-drag-base/package.json b/samples/grids/grid/row-drag-base/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/row-drag-base/package.json
+++ b/samples/grids/grid/row-drag-base/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-drag-base/src/index.ts b/samples/grids/grid/row-drag-base/src/index.ts
index f1808323fd..dae3df54cb 100644
--- a/samples/grids/grid/row-drag-base/src/index.ts
+++ b/samples/grids/grid/row-drag-base/src/index.ts
@@ -1,28 +1,28 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersData } from './CustomersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 
+
 export class Sample {
 
     private leftGrid: IgcGridComponent;
     private rightGrid: IgcGridComponent;
 
-    private leftGridData: CustomersData;    
+    private leftGridData: CustomersData;
 
     private _bind: () => void;
 
     constructor() {
-        var leftGrid = this.leftGrid = document.getElementById('leftGrid') as IgcGridComponent;        
-        var rightGrid = this.rightGrid = document.getElementById('rightGrid') as IgcGridComponent;     
-        
+        var leftGrid = this.leftGrid = document.getElementById('leftGrid') as IgcGridComponent;
+        var rightGrid = this.rightGrid = document.getElementById('rightGrid') as IgcGridComponent;
+
         this.onGridRowDragEnd = this.onGridRowDragEnd.bind(this);
 
-        this.leftGridData = new CustomersData();        
+        this.leftGridData = new CustomersData();
 
         this._bind = () => {
-            leftGrid.data = this.leftGridData;            
+            leftGrid.data = this.leftGridData;
             rightGrid.data = [];
             leftGrid.addEventListener("rowDragEnd", this.onGridRowDragEnd);
         }
diff --git a/samples/grids/grid/row-drag-base/tsconfig.json b/samples/grids/grid/row-drag-base/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/row-drag-base/tsconfig.json
+++ b/samples/grids/grid/row-drag-base/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-editing-options/package.json b/samples/grids/grid/row-editing-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-editing-options/package.json
+++ b/samples/grids/grid/row-editing-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-editing-options/sandbox.config.json b/samples/grids/grid/row-editing-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-editing-options/sandbox.config.json
+++ b/samples/grids/grid/row-editing-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-editing-options/src/index.css b/samples/grids/grid/row-editing-options/src/index.css
index db87b63a60..0fe9368715 100644
--- a/samples/grids/grid/row-editing-options/src/index.css
+++ b/samples/grids/grid/row-editing-options/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-small);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-editing-options/src/index.ts b/samples/grids/grid/row-editing-options/src/index.ts
index 0f3d026758..3011788fd1 100644
--- a/samples/grids/grid/row-editing-options/src/index.ts
+++ b/samples/grids/grid/row-editing-options/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -21,6 +21,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -32,7 +33,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/row-editing-options/tsconfig.json b/samples/grids/grid/row-editing-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-editing-options/tsconfig.json
+++ b/samples/grids/grid/row-editing-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-editing-options/webpack.config.js b/samples/grids/grid/row-editing-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-editing-options/webpack.config.js
+++ b/samples/grids/grid/row-editing-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-editing-style/package.json b/samples/grids/grid/row-editing-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-editing-style/package.json
+++ b/samples/grids/grid/row-editing-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-editing-style/sandbox.config.json b/samples/grids/grid/row-editing-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-editing-style/sandbox.config.json
+++ b/samples/grids/grid/row-editing-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-editing-style/src/index.css b/samples/grids/grid/row-editing-style/src/index.css
index cc7b8709b5..0fe9368715 100644
--- a/samples/grids/grid/row-editing-style/src/index.css
+++ b/samples/grids/grid/row-editing-style/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-banner-banner-background: #292826;
-    --ig-banner-banner-message-color: #ffcd0f;
-    --ig-button-foreground: #ffcd0f;
-    --ig-button-hover-foreground: white;
-    --ig-button-font-weight: 600;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-editing-style/src/index.ts b/samples/grids/grid/row-editing-style/src/index.ts
index 0f3d026758..3011788fd1 100644
--- a/samples/grids/grid/row-editing-style/src/index.ts
+++ b/samples/grids/grid/row-editing-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -21,6 +21,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -32,7 +33,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/grid/row-editing-style/tsconfig.json b/samples/grids/grid/row-editing-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-editing-style/tsconfig.json
+++ b/samples/grids/grid/row-editing-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-editing-style/webpack.config.js b/samples/grids/grid/row-editing-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-editing-style/webpack.config.js
+++ b/samples/grids/grid/row-editing-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-paging-basic/package.json b/samples/grids/grid/row-paging-basic/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/row-paging-basic/package.json
+++ b/samples/grids/grid/row-paging-basic/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-paging-basic/sandbox.config.json b/samples/grids/grid/row-paging-basic/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-paging-basic/sandbox.config.json
+++ b/samples/grids/grid/row-paging-basic/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-paging-basic/src/index.css b/samples/grids/grid/row-paging-basic/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/row-paging-basic/src/index.css
+++ b/samples/grids/grid/row-paging-basic/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-paging-basic/src/index.ts b/samples/grids/grid/row-paging-basic/src/index.ts
index 22e4871731..db020da707 100644
--- a/samples/grids/grid/row-paging-basic/src/index.ts
+++ b/samples/grids/grid/row-paging-basic/src/index.ts
@@ -3,10 +3,10 @@ import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteu
 import { AthletesDataItem, AthletesData } from './AthletesData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -26,6 +26,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private column2: IgcColumnComponent
     private column3: IgcColumnComponent
     private _bind: () => void;
@@ -43,7 +44,6 @@ export class Sample {
             column3.bodyTemplate = this.webGridImageCellTemplate;
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
@@ -55,7 +55,6 @@ export class Sample {
         return this._athletesData;
     }
 
-
     public webGridProgressCellTemplate = (ctx: IgcCellTemplateContext) => {
         return html`<div style="width: 4rem">
             <igc-linear-progress value="${ctx.cell.value}"></igc-linear-progress>
diff --git a/samples/grids/grid/row-paging-basic/tsconfig.json b/samples/grids/grid/row-paging-basic/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-paging-basic/tsconfig.json
+++ b/samples/grids/grid/row-paging-basic/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-paging-basic/webpack.config.js b/samples/grids/grid/row-paging-basic/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-paging-basic/webpack.config.js
+++ b/samples/grids/grid/row-paging-basic/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-paging-options/package.json b/samples/grids/grid/row-paging-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/row-paging-options/package.json
+++ b/samples/grids/grid/row-paging-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-paging-options/sandbox.config.json b/samples/grids/grid/row-paging-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-paging-options/sandbox.config.json
+++ b/samples/grids/grid/row-paging-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-paging-options/src/index.css b/samples/grids/grid/row-paging-options/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/grid/row-paging-options/src/index.css
+++ b/samples/grids/grid/row-paging-options/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-paging-options/src/index.ts b/samples/grids/grid/row-paging-options/src/index.ts
index 64e8ebf441..3c9108b73c 100644
--- a/samples/grids/grid/row-paging-options/src/index.ts
+++ b/samples/grids/grid/row-paging-options/src/index.ts
@@ -5,11 +5,11 @@ import { IgcGridComponent, IgcPaginatorComponent, IgcPaginatorResourceStrings, I
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { AthletesDataItem, AthletesData } from './AthletesData';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -33,6 +33,7 @@ export class Sample {
         }
         return this._paginatorResourceStrings1;
     }
+
     private column1: IgcColumnComponent
     private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs1(): IgcColumnPipeArgs {
@@ -45,6 +46,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private propertyEditor: IgcPropertyEditorPanelComponent
     private sizeEditor: IgcPropertyEditorPropertyDescriptionComponent
     private _bind: () => void;
@@ -66,7 +68,6 @@ export class Sample {
             sizeEditor.changed = this.webGridSetGridSize;
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
diff --git a/samples/grids/grid/row-paging-options/tsconfig.json b/samples/grids/grid/row-paging-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-paging-options/tsconfig.json
+++ b/samples/grids/grid/row-paging-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-paging-options/webpack.config.js b/samples/grids/grid/row-paging-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-paging-options/webpack.config.js
+++ b/samples/grids/grid/row-paging-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-pinning-drag/package.json b/samples/grids/grid/row-pinning-drag/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-pinning-drag/package.json
+++ b/samples/grids/grid/row-pinning-drag/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-pinning-drag/sandbox.config.json b/samples/grids/grid/row-pinning-drag/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-pinning-drag/sandbox.config.json
+++ b/samples/grids/grid/row-pinning-drag/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-pinning-drag/src/index.css b/samples/grids/grid/row-pinning-drag/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/row-pinning-drag/src/index.css
+++ b/samples/grids/grid/row-pinning-drag/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-pinning-drag/src/index.ts b/samples/grids/grid/row-pinning-drag/src/index.ts
index 1bc71a9435..776c8e3a5a 100644
--- a/samples/grids/grid/row-pinning-drag/src/index.ts
+++ b/samples/grids/grid/row-pinning-drag/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcPinningConfig, RowPinningPosition } from 'igniteui-webcomponents-grids/grids';
 import CustomersDataLocal from './CustomersDataLocal.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -27,6 +27,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -37,7 +38,6 @@ export class Sample {
             grid.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _customersDataLocal: any[] = CustomersDataLocal;
diff --git a/samples/grids/grid/row-pinning-drag/tsconfig.json b/samples/grids/grid/row-pinning-drag/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-pinning-drag/tsconfig.json
+++ b/samples/grids/grid/row-pinning-drag/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-pinning-drag/webpack.config.js b/samples/grids/grid/row-pinning-drag/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-pinning-drag/webpack.config.js
+++ b/samples/grids/grid/row-pinning-drag/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-pinning-extra-column/package.json b/samples/grids/grid/row-pinning-extra-column/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-pinning-extra-column/package.json
+++ b/samples/grids/grid/row-pinning-extra-column/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-pinning-extra-column/sandbox.config.json b/samples/grids/grid/row-pinning-extra-column/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-pinning-extra-column/sandbox.config.json
+++ b/samples/grids/grid/row-pinning-extra-column/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-pinning-extra-column/src/index.css b/samples/grids/grid/row-pinning-extra-column/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/row-pinning-extra-column/src/index.css
+++ b/samples/grids/grid/row-pinning-extra-column/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-pinning-extra-column/src/index.ts b/samples/grids/grid/row-pinning-extra-column/src/index.ts
index 39d3d371d4..0bdf2c79e0 100644
--- a/samples/grids/grid/row-pinning-extra-column/src/index.ts
+++ b/samples/grids/grid/row-pinning-extra-column/src/index.ts
@@ -5,12 +5,12 @@ import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-gri
 import CustomersDataLocal from './CustomersDataLocal.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -30,7 +30,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridRowPinCellTemplate;
         }
         this._bind();
-
     }
 
     private _customersDataLocal: any[] = CustomersDataLocal;
diff --git a/samples/grids/grid/row-pinning-extra-column/tsconfig.json b/samples/grids/grid/row-pinning-extra-column/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-pinning-extra-column/tsconfig.json
+++ b/samples/grids/grid/row-pinning-extra-column/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-pinning-extra-column/webpack.config.js b/samples/grids/grid/row-pinning-extra-column/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-pinning-extra-column/webpack.config.js
+++ b/samples/grids/grid/row-pinning-extra-column/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-pinning-options/package.json b/samples/grids/grid/row-pinning-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/row-pinning-options/package.json
+++ b/samples/grids/grid/row-pinning-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-pinning-options/sandbox.config.json b/samples/grids/grid/row-pinning-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-pinning-options/sandbox.config.json
+++ b/samples/grids/grid/row-pinning-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-pinning-options/src/index.css b/samples/grids/grid/row-pinning-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/row-pinning-options/src/index.css
+++ b/samples/grids/grid/row-pinning-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-pinning-options/src/index.ts b/samples/grids/grid/row-pinning-options/src/index.ts
index a3cc5dcc8c..57abb93ae3 100644
--- a/samples/grids/grid/row-pinning-options/src/index.ts
+++ b/samples/grids/grid/row-pinning-options/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent } from 'igniteui-webcomponents-grids/grids';
 import CustomersDataLocal from './CustomersDataLocal.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -34,6 +34,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private actionStrip: IgcActionStripComponent
     private _bind: () => void;
 
@@ -52,7 +53,6 @@ export class Sample {
             grid.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _customersDataLocal: any[] = CustomersDataLocal;
diff --git a/samples/grids/grid/row-pinning-options/tsconfig.json b/samples/grids/grid/row-pinning-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-pinning-options/tsconfig.json
+++ b/samples/grids/grid/row-pinning-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-pinning-options/webpack.config.js b/samples/grids/grid/row-pinning-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-pinning-options/webpack.config.js
+++ b/samples/grids/grid/row-pinning-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-pinning-style/package.json b/samples/grids/grid/row-pinning-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-pinning-style/package.json
+++ b/samples/grids/grid/row-pinning-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-pinning-style/sandbox.config.json b/samples/grids/grid/row-pinning-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-pinning-style/sandbox.config.json
+++ b/samples/grids/grid/row-pinning-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-pinning-style/src/index.css b/samples/grids/grid/row-pinning-style/src/index.css
index e8c11e3bf1..0fe9368715 100644
--- a/samples/grids/grid/row-pinning-style/src/index.css
+++ b/samples/grids/grid/row-pinning-style/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-grid-pinned-border-width: 5px;
-        --ig-grid-pinned-border-style: double;
-        --ig-grid-pinned-border-color: #FFCD0F;
-        --ig-grid-cell-active-border-color: #FFCD0F;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-pinning-style/src/index.ts b/samples/grids/grid/row-pinning-style/src/index.ts
index ab4b5bd49c..da999ceba6 100644
--- a/samples/grids/grid/row-pinning-style/src/index.ts
+++ b/samples/grids/grid/row-pinning-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule, WebActionStripDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import CustomersDataLocal from './CustomersDataLocal.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -21,6 +21,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private company: IgcColumnComponent
     private contactName: IgcColumnComponent
     private contactTitle: IgcColumnComponent
@@ -49,7 +50,6 @@ export class Sample {
             grid.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _customersDataLocal: any[] = CustomersDataLocal;
diff --git a/samples/grids/grid/row-pinning-style/tsconfig.json b/samples/grids/grid/row-pinning-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-pinning-style/tsconfig.json
+++ b/samples/grids/grid/row-pinning-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-pinning-style/webpack.config.js b/samples/grids/grid/row-pinning-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-pinning-style/webpack.config.js
+++ b/samples/grids/grid/row-pinning-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-reorder/package.json b/samples/grids/grid/row-reorder/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-reorder/package.json
+++ b/samples/grids/grid/row-reorder/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-reorder/sandbox.config.json b/samples/grids/grid/row-reorder/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-reorder/sandbox.config.json
+++ b/samples/grids/grid/row-reorder/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-reorder/src/index.css b/samples/grids/grid/row-reorder/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/row-reorder/src/index.css
+++ b/samples/grids/grid/row-reorder/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-reorder/src/index.ts b/samples/grids/grid/row-reorder/src/index.ts
index 081ec8e8ad..2314002299 100644
--- a/samples/grids/grid/row-reorder/src/index.ts
+++ b/samples/grids/grid/row-reorder/src/index.ts
@@ -4,12 +4,12 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescrip
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcRowDragEndEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -28,7 +28,6 @@ export class Sample {
             grid.addEventListener("rowDragEnd", this.webGridReorderRowHandler);
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/row-reorder/tsconfig.json b/samples/grids/grid/row-reorder/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-reorder/tsconfig.json
+++ b/samples/grids/grid/row-reorder/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-reorder/webpack.config.js b/samples/grids/grid/row-reorder/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-reorder/webpack.config.js
+++ b/samples/grids/grid/row-reorder/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-selection-mode/package.json b/samples/grids/grid/row-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/row-selection-mode/package.json
+++ b/samples/grids/grid/row-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-selection-mode/sandbox.config.json b/samples/grids/grid/row-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-selection-mode/sandbox.config.json
+++ b/samples/grids/grid/row-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-selection-mode/src/index.css b/samples/grids/grid/row-selection-mode/src/index.css
index 77958e8090..0fe9368715 100644
--- a/samples/grids/grid/row-selection-mode/src/index.css
+++ b/samples/grids/grid/row-selection-mode/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cellAlignStyle {
-    text-align: right;
-    float:right;
-}
-.cellAlignStyle > span {
-    float:right;
-}
-.up {
-    color: green;
-}
-.down {
-    color: red;
-}
-.grid__wrapper {
-  padding: 16px;
-}
-.currency-badge-container {
-    width: 80px;
-    float: right;
-}
-.badge-left {
-    float: left;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-selection-mode/src/index.ts b/samples/grids/grid/row-selection-mode/src/index.ts
index 9c4866c47c..4a5c8a6730 100644
--- a/samples/grids/grid/row-selection-mode/src/index.ts
+++ b/samples/grids/grid/row-selection-mode/src/index.ts
@@ -7,11 +7,11 @@ import { FinancialDataAllItem, FinancialDataAll } from './FinancialDataAll';
 import { IgcBadgeComponent } from 'igniteui-webcomponents';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -39,6 +39,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private column2: IgcColumnComponent
     private _columnPipeArgs2: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs2(): IgcColumnPipeArgs {
@@ -52,6 +53,7 @@ export class Sample {
         }
         return this._columnPipeArgs2;
     }
+
     private column3: IgcColumnComponent
     private _columnPipeArgs3: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs3(): IgcColumnPipeArgs {
@@ -65,6 +67,7 @@ export class Sample {
         }
         return this._columnPipeArgs3;
     }
+
     private column4: IgcColumnComponent
     private column5: IgcColumnComponent
     private column6: IgcColumnComponent
@@ -94,7 +97,6 @@ export class Sample {
             column6.bodyTemplate = this.webGridCurrencyCellTemplate;
         }
         this._bind();
-
     }
 
     private _financialDataAll: FinancialDataAll = null;
diff --git a/samples/grids/grid/row-selection-mode/tsconfig.json b/samples/grids/grid/row-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-selection-mode/tsconfig.json
+++ b/samples/grids/grid/row-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-selection-mode/webpack.config.js b/samples/grids/grid/row-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-selection-mode/webpack.config.js
+++ b/samples/grids/grid/row-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-selection-template-excel/package.json b/samples/grids/grid/row-selection-template-excel/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/row-selection-template-excel/package.json
+++ b/samples/grids/grid/row-selection-template-excel/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-selection-template-excel/sandbox.config.json b/samples/grids/grid/row-selection-template-excel/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-selection-template-excel/sandbox.config.json
+++ b/samples/grids/grid/row-selection-template-excel/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-selection-template-excel/src/index.css b/samples/grids/grid/row-selection-template-excel/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/grid/row-selection-template-excel/src/index.css
+++ b/samples/grids/grid/row-selection-template-excel/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-selection-template-excel/src/index.ts b/samples/grids/grid/row-selection-template-excel/src/index.ts
index a958f652ef..f680b74cf1 100644
--- a/samples/grids/grid/row-selection-template-excel/src/index.ts
+++ b/samples/grids/grid/row-selection-template-excel/src/index.ts
@@ -5,12 +5,12 @@ import { IgcGridComponent, IgcPaginatorComponent, IgcPaginatorResourceStrings }
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcRowSelectorTemplateContext, IgcHeadSelectorTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -30,6 +30,7 @@ export class Sample {
         }
         return this._paginatorResourceStrings1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -43,7 +44,6 @@ export class Sample {
             paginator.resourceStrings = this.paginatorResourceStrings1;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/row-selection-template-excel/tsconfig.json b/samples/grids/grid/row-selection-template-excel/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-selection-template-excel/tsconfig.json
+++ b/samples/grids/grid/row-selection-template-excel/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-selection-template-excel/webpack.config.js b/samples/grids/grid/row-selection-template-excel/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-selection-template-excel/webpack.config.js
+++ b/samples/grids/grid/row-selection-template-excel/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-selection-template-numbers/package.json b/samples/grids/grid/row-selection-template-numbers/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/row-selection-template-numbers/package.json
+++ b/samples/grids/grid/row-selection-template-numbers/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-selection-template-numbers/sandbox.config.json b/samples/grids/grid/row-selection-template-numbers/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-selection-template-numbers/sandbox.config.json
+++ b/samples/grids/grid/row-selection-template-numbers/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-selection-template-numbers/src/index.css b/samples/grids/grid/row-selection-template-numbers/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/row-selection-template-numbers/src/index.css
+++ b/samples/grids/grid/row-selection-template-numbers/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-selection-template-numbers/src/index.ts b/samples/grids/grid/row-selection-template-numbers/src/index.ts
index 436a2ded2a..6e5cdd603a 100644
--- a/samples/grids/grid/row-selection-template-numbers/src/index.ts
+++ b/samples/grids/grid/row-selection-template-numbers/src/index.ts
@@ -4,10 +4,10 @@ import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgcRowSelectorTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -26,7 +26,6 @@ export class Sample {
             grid.headSelectorTemplate = this.webGridHeaderRowSelectorTemplate;
         }
         this._bind();
-
     }
 
     private _customersData: CustomersData = null;
diff --git a/samples/grids/grid/row-selection-template-numbers/tsconfig.json b/samples/grids/grid/row-selection-template-numbers/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-selection-template-numbers/tsconfig.json
+++ b/samples/grids/grid/row-selection-template-numbers/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-selection-template-numbers/webpack.config.js b/samples/grids/grid/row-selection-template-numbers/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-selection-template-numbers/webpack.config.js
+++ b/samples/grids/grid/row-selection-template-numbers/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/row-styles/package.json b/samples/grids/grid/row-styles/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/grid/row-styles/package.json
+++ b/samples/grids/grid/row-styles/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/row-styles/sandbox.config.json b/samples/grids/grid/row-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/row-styles/sandbox.config.json
+++ b/samples/grids/grid/row-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/row-styles/src/index.css b/samples/grids/grid/row-styles/src/index.css
index 77958e8090..0fe9368715 100644
--- a/samples/grids/grid/row-styles/src/index.css
+++ b/samples/grids/grid/row-styles/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cellAlignStyle {
-    text-align: right;
-    float:right;
-}
-.cellAlignStyle > span {
-    float:right;
-}
-.up {
-    color: green;
-}
-.down {
-    color: red;
-}
-.grid__wrapper {
-  padding: 16px;
-}
-.currency-badge-container {
-    width: 80px;
-    float: right;
-}
-.badge-left {
-    float: left;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/row-styles/src/index.ts b/samples/grids/grid/row-styles/src/index.ts
index 6b6fa7e82f..a0568ed40b 100644
--- a/samples/grids/grid/row-styles/src/index.ts
+++ b/samples/grids/grid/row-styles/src/index.ts
@@ -6,10 +6,10 @@ import { IgcRowType } from 'igniteui-webcomponents-grids/grids';
 import { IgcBadgeComponent } from 'igniteui-webcomponents';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -33,7 +33,6 @@ export class Sample {
             column2.bodyTemplate = this.webGridCurrencyCellTemplate;
         }
         this._bind();
-
     }
 
     private _financialDataAll: FinancialDataAll = null;
@@ -45,7 +44,6 @@ export class Sample {
         return this._financialDataAll;
     }
 
-
     public webGridRowStylesHandler = {
         'background': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['YearlyChange'] < 0) ? '#FF000088' : '#00000000',
         'border': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['YearlyChange'] < 0) ? '2px solid' : '1px solid',
diff --git a/samples/grids/grid/row-styles/tsconfig.json b/samples/grids/grid/row-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/row-styles/tsconfig.json
+++ b/samples/grids/grid/row-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/row-styles/webpack.config.js b/samples/grids/grid/row-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/row-styles/webpack.config.js
+++ b/samples/grids/grid/row-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/state-persistence-about/package.json b/samples/grids/grid/state-persistence-about/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/grid/state-persistence-about/package.json
+++ b/samples/grids/grid/state-persistence-about/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/state-persistence-about/src/index.ts b/samples/grids/grid/state-persistence-about/src/index.ts
index 5bdb652214..28d8d133d7 100644
--- a/samples/grids/grid/state-persistence-about/src/index.ts
+++ b/samples/grids/grid/state-persistence-about/src/index.ts
@@ -8,7 +8,7 @@ export class Sample {
 
     constructor() {
         var backBtn = document.getElementById("backBtn") as IgcButtonComponent;
-        
+
         this._bind = () => {
             backBtn.addEventListener("click", () => { window.location.replace("./grids/grid/state-persistence-main");});
         }
diff --git a/samples/grids/grid/state-persistence-about/tsconfig.json b/samples/grids/grid/state-persistence-about/tsconfig.json
index 2c74e00627..de23257dd8 100644
--- a/samples/grids/grid/state-persistence-about/tsconfig.json
+++ b/samples/grids/grid/state-persistence-about/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/state-persistence-about/webpack.config.js b/samples/grids/grid/state-persistence-about/webpack.config.js
index 4f82e885b8..9d11a6155c 100644
--- a/samples/grids/grid/state-persistence-about/webpack.config.js
+++ b/samples/grids/grid/state-persistence-about/webpack.config.js
@@ -35,7 +35,7 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: '[name].[fullhash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
             globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
@@ -96,8 +96,8 @@ module.exports = env => {
                 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: 'index-cs',
-                template: 'index.html',
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/grid/state-persistence-main/package.json b/samples/grids/grid/state-persistence-main/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/grid/state-persistence-main/package.json
+++ b/samples/grids/grid/state-persistence-main/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/state-persistence-main/src/index.css b/samples/grids/grid/state-persistence-main/src/index.css
index 9e0f296aa9..0fe9368715 100644
--- a/samples/grids/grid/state-persistence-main/src/index.css
+++ b/samples/grids/grid/state-persistence-main/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.horizontal {
-    gap: 10px;
-    flex-basis: fit-content;
-    flex-wrap: wrap;
-}
-.sampleContainer {
-  padding: 0.5rem
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/state-persistence-main/src/index.ts b/samples/grids/grid/state-persistence-main/src/index.ts
index f37ae6f5bc..2c6aab0088 100644
--- a/samples/grids/grid/state-persistence-main/src/index.ts
+++ b/samples/grids/grid/state-persistence-main/src/index.ts
@@ -62,7 +62,6 @@ export class Sample {
         grid.filterMode = 'excelStyleFilter';
         grid.columnSelection = 'multiple';
         grid.rowSelection = 'multiple';
-        
         grid.addEventListener("columnInit", (ev: any) => { this.onColumnInit(ev); });
         saveStateBtn.addEventListener('click', (ev: any) => { this.saveGridState(); });
         restoreStateBtn.addEventListener('click', (ev: any) => { this.restoreGridState(); });
@@ -76,9 +75,9 @@ export class Sample {
             cb.addEventListener("igcChange", (ev: CustomEvent) => { this.onChange(ev, cb.id); });
         });
 
-        window.addEventListener("load", async () => { 
+        window.addEventListener("load", async () => {
             await this.columnsLoaded;
-            this.restoreGridState(); 
+            this.restoreGridState();
         });
         window.addEventListener("beforeunload", () => { this.saveGridState(); });
     }
@@ -135,7 +134,7 @@ export class Sample {
         window.location.reload();
     }
 
-    private onColumnInit(event: any) { 
+    private onColumnInit(event: any) {
         if(event.detail.index === this.grid.columns.length - 1) {
            this.columnsLoaded = new Promise((resolve) => resolve());
         }
diff --git a/samples/grids/grid/state-persistence-main/tsconfig.json b/samples/grids/grid/state-persistence-main/tsconfig.json
index 2c74e00627..de23257dd8 100644
--- a/samples/grids/grid/state-persistence-main/tsconfig.json
+++ b/samples/grids/grid/state-persistence-main/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/state-persistence-main/webpack.config.js b/samples/grids/grid/state-persistence-main/webpack.config.js
index 4f82e885b8..9d11a6155c 100644
--- a/samples/grids/grid/state-persistence-main/webpack.config.js
+++ b/samples/grids/grid/state-persistence-main/webpack.config.js
@@ -35,7 +35,7 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: '[name].[fullhash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
             globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
@@ -96,8 +96,8 @@ module.exports = env => {
                 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: 'index-cs',
-                template: 'index.html',
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/grid/styling-custom-CSS/package.json b/samples/grids/grid/styling-custom-CSS/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/styling-custom-CSS/package.json
+++ b/samples/grids/grid/styling-custom-CSS/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/styling-custom-CSS/sandbox.config.json b/samples/grids/grid/styling-custom-CSS/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/styling-custom-CSS/sandbox.config.json
+++ b/samples/grids/grid/styling-custom-CSS/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/styling-custom-CSS/src/index.css b/samples/grids/grid/styling-custom-CSS/src/index.css
index 85e1b336ac..0fe9368715 100644
--- a/samples/grids/grid/styling-custom-CSS/src/index.css
+++ b/samples/grids/grid/styling-custom-CSS/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --cell-selected-text-color: #FFFFFF;
-    --cell-active-border-color: #f2c43c;
-    --cell-selected-background: #0062a3;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/styling-custom-CSS/src/index.ts b/samples/grids/grid/styling-custom-CSS/src/index.ts
index 49b0bc05b2..ab779baaf7 100644
--- a/samples/grids/grid/styling-custom-CSS/src/index.ts
+++ b/samples/grids/grid/styling-custom-CSS/src/index.ts
@@ -1,11 +1,11 @@
 import { LocalDataItem, LocalData } from './SampleData';
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             grid.data = this.localData;
         }
         this._bind();
-
     }
 
     private _localData: LocalData = null;
diff --git a/samples/grids/grid/styling-custom-CSS/tsconfig.json b/samples/grids/grid/styling-custom-CSS/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/styling-custom-CSS/tsconfig.json
+++ b/samples/grids/grid/styling-custom-CSS/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/styling-custom-CSS/webpack.config.js b/samples/grids/grid/styling-custom-CSS/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/styling-custom-CSS/webpack.config.js
+++ b/samples/grids/grid/styling-custom-CSS/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/toolbar-sample-1/package.json b/samples/grids/grid/toolbar-sample-1/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/toolbar-sample-1/package.json
+++ b/samples/grids/grid/toolbar-sample-1/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/toolbar-sample-1/sandbox.config.json b/samples/grids/grid/toolbar-sample-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/toolbar-sample-1/sandbox.config.json
+++ b/samples/grids/grid/toolbar-sample-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-sample-1/src/index.css b/samples/grids/grid/toolbar-sample-1/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/toolbar-sample-1/src/index.css
+++ b/samples/grids/grid/toolbar-sample-1/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-sample-1/src/index.ts b/samples/grids/grid/toolbar-sample-1/src/index.ts
index aae93262f8..33746ba6c7 100644
--- a/samples/grids/grid/toolbar-sample-1/src/index.ts
+++ b/samples/grids/grid/toolbar-sample-1/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { AthletesDataItem, AthletesData } from './AthletesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid1.data = this.athletesData;
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
diff --git a/samples/grids/grid/toolbar-sample-1/tsconfig.json b/samples/grids/grid/toolbar-sample-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/toolbar-sample-1/tsconfig.json
+++ b/samples/grids/grid/toolbar-sample-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/toolbar-sample-1/webpack.config.js b/samples/grids/grid/toolbar-sample-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/toolbar-sample-1/webpack.config.js
+++ b/samples/grids/grid/toolbar-sample-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/toolbar-sample-2/package.json b/samples/grids/grid/toolbar-sample-2/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/toolbar-sample-2/package.json
+++ b/samples/grids/grid/toolbar-sample-2/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/toolbar-sample-2/sandbox.config.json b/samples/grids/grid/toolbar-sample-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/toolbar-sample-2/sandbox.config.json
+++ b/samples/grids/grid/toolbar-sample-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-sample-2/src/index.css b/samples/grids/grid/toolbar-sample-2/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/toolbar-sample-2/src/index.css
+++ b/samples/grids/grid/toolbar-sample-2/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-sample-2/src/index.ts b/samples/grids/grid/toolbar-sample-2/src/index.ts
index aae93262f8..33746ba6c7 100644
--- a/samples/grids/grid/toolbar-sample-2/src/index.ts
+++ b/samples/grids/grid/toolbar-sample-2/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { AthletesDataItem, AthletesData } from './AthletesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid1.data = this.athletesData;
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
diff --git a/samples/grids/grid/toolbar-sample-2/tsconfig.json b/samples/grids/grid/toolbar-sample-2/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/toolbar-sample-2/tsconfig.json
+++ b/samples/grids/grid/toolbar-sample-2/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/toolbar-sample-2/webpack.config.js b/samples/grids/grid/toolbar-sample-2/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/toolbar-sample-2/webpack.config.js
+++ b/samples/grids/grid/toolbar-sample-2/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/toolbar-sample-3/package.json b/samples/grids/grid/toolbar-sample-3/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/toolbar-sample-3/package.json
+++ b/samples/grids/grid/toolbar-sample-3/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/toolbar-sample-3/sandbox.config.json b/samples/grids/grid/toolbar-sample-3/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/toolbar-sample-3/sandbox.config.json
+++ b/samples/grids/grid/toolbar-sample-3/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-sample-3/src/index.css b/samples/grids/grid/toolbar-sample-3/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/toolbar-sample-3/src/index.css
+++ b/samples/grids/grid/toolbar-sample-3/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-sample-3/src/index.ts b/samples/grids/grid/toolbar-sample-3/src/index.ts
index 7090349273..3cad07dc39 100644
--- a/samples/grids/grid/toolbar-sample-3/src/index.ts
+++ b/samples/grids/grid/toolbar-sample-3/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcompone
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { AthletesDataItem, AthletesData } from './AthletesData';
 import { IgcExporterOptionsBase, IgcGridToolbarExportEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid1: IgcGridComponent
@@ -22,7 +22,6 @@ export class Sample {
             grid1.addEventListener("toolbarExporting", this.webGridToolbarExporting);
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
diff --git a/samples/grids/grid/toolbar-sample-3/tsconfig.json b/samples/grids/grid/toolbar-sample-3/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/toolbar-sample-3/tsconfig.json
+++ b/samples/grids/grid/toolbar-sample-3/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/toolbar-sample-3/webpack.config.js b/samples/grids/grid/toolbar-sample-3/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/toolbar-sample-3/webpack.config.js
+++ b/samples/grids/grid/toolbar-sample-3/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/grid/toolbar-sample-4/package.json b/samples/grids/grid/toolbar-sample-4/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/grid/toolbar-sample-4/package.json
+++ b/samples/grids/grid/toolbar-sample-4/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/toolbar-sample-4/sandbox.config.json b/samples/grids/grid/toolbar-sample-4/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/toolbar-sample-4/sandbox.config.json
+++ b/samples/grids/grid/toolbar-sample-4/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-sample-4/src/index.css b/samples/grids/grid/toolbar-sample-4/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/grid/toolbar-sample-4/src/index.css
+++ b/samples/grids/grid/toolbar-sample-4/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-sample-4/src/index.ts b/samples/grids/grid/toolbar-sample-4/src/index.ts
index 0df5373763..e137cb8988 100644
--- a/samples/grids/grid/toolbar-sample-4/src/index.ts
+++ b/samples/grids/grid/toolbar-sample-4/src/index.ts
@@ -4,9 +4,9 @@ import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { AthletesDataItem, AthletesData } from './AthletesData';
 import { defineComponents, IgcButtonComponent, IgcIconComponent, registerIconFromText } from "igniteui-webcomponents";
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
 defineComponents(IgcButtonComponent, IgcIconComponent);
 export class Sample {
 
diff --git a/samples/grids/grid/toolbar-sample-4/tsconfig.json b/samples/grids/grid/toolbar-sample-4/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/grid/toolbar-sample-4/tsconfig.json
+++ b/samples/grids/grid/toolbar-sample-4/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/toolbar-style/package.json b/samples/grids/grid/toolbar-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/grid/toolbar-style/package.json
+++ b/samples/grids/grid/toolbar-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/grid/toolbar-style/sandbox.config.json b/samples/grids/grid/toolbar-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/grid/toolbar-style/sandbox.config.json
+++ b/samples/grids/grid/toolbar-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-style/src/index.css b/samples/grids/grid/toolbar-style/src/index.css
index a68274771b..0fe9368715 100644
--- a/samples/grids/grid/toolbar-style/src/index.css
+++ b/samples/grids/grid/toolbar-style/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-toolbar-background-color: #2a2b2f;
-    --ig-grid-toolbar-title-text-color: #ffcd0f;
-    --ig-grid-toolbar-dropdown-background: #2a2b2f;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/grid/toolbar-style/src/index.ts b/samples/grids/grid/toolbar-style/src/index.ts
index fa61408bf5..4e09af215f 100644
--- a/samples/grids/grid/toolbar-style/src/index.ts
+++ b/samples/grids/grid/toolbar-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { AthletesDataItem, AthletesData } from './AthletesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.athletesData;
         }
         this._bind();
-
     }
 
     private _athletesData: AthletesData = null;
diff --git a/samples/grids/grid/toolbar-style/tsconfig.json b/samples/grids/grid/toolbar-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/grid/toolbar-style/tsconfig.json
+++ b/samples/grids/grid/toolbar-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/grid/toolbar-style/webpack.config.js b/samples/grids/grid/toolbar-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/grid/toolbar-style/webpack.config.js
+++ b/samples/grids/grid/toolbar-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/action-strip/package.json b/samples/grids/hierarchical-grid/action-strip/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/action-strip/package.json
+++ b/samples/grids/hierarchical-grid/action-strip/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/action-strip/sandbox.config.json b/samples/grids/hierarchical-grid/action-strip/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/action-strip/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/action-strip/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/action-strip/src/index.css b/samples/grids/hierarchical-grid/action-strip/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/action-strip/src/index.css
+++ b/samples/grids/hierarchical-grid/action-strip/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/action-strip/src/index.ts b/samples/grids/hierarchical-grid/action-strip/src/index.ts
index 326a7b0f5e..ce331f08e6 100644
--- a/samples/grids/hierarchical-grid/action-strip/src/index.ts
+++ b/samples/grids/hierarchical-grid/action-strip/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -20,6 +20,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private actionStrip: IgcActionStripComponent
     private _bind: () => void;
 
@@ -32,7 +33,6 @@ export class Sample {
             hierarchicalGrid1.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/action-strip/tsconfig.json b/samples/grids/hierarchical-grid/action-strip/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/action-strip/tsconfig.json
+++ b/samples/grids/hierarchical-grid/action-strip/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/action-strip/webpack.config.js b/samples/grids/hierarchical-grid/action-strip/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/action-strip/webpack.config.js
+++ b/samples/grids/hierarchical-grid/action-strip/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/package.json b/samples/grids/hierarchical-grid/advanced-filtering-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-options/package.json
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/sandbox.config.json b/samples/grids/hierarchical-grid/advanced-filtering-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/src/index.css b/samples/grids/hierarchical-grid/advanced-filtering-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-options/src/index.css
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/src/index.ts b/samples/grids/hierarchical-grid/advanced-filtering-options/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/tsconfig.json b/samples/grids/hierarchical-grid/advanced-filtering-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/webpack.config.js b/samples/grids/hierarchical-grid/advanced-filtering-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/package.json b/samples/grids/hierarchical-grid/advanced-filtering-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-style/package.json
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/sandbox.config.json b/samples/grids/hierarchical-grid/advanced-filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/src/index.css b/samples/grids/hierarchical-grid/advanced-filtering-style/src/index.css
index 9259d94790..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-style/src/index.css
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/src/index.css
@@ -1,60 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hierarchicalGrid1 {
-
-    --ig-button-background: #292826;
-    --ig-button-foreground:#ffcd0f;
-    --ig-button-hover-foreground:#292826;
-    --ig-button-hover-background:#ffcd0f;
-    --ig-button-focus-foreground:#ffcd0f;
-    --ig-button-focus-background:#292826;
-    --ig-button-active-background:#ffcd0f;
-    --ig-button-active-foreground:#292826;
-    --ig-button-border-color:#ffcd0f;
-    --ig-button-hover-border-color:#ffcd0f;
-    --ig-button-focus-border-color:#ffcd0f;
-    --ig-button-active-border-color:#ffcd0f;
-
-    --ig-button-group-item-background:  #292826;
-    --ig-button-group-item-text-color: #ffcd0f;
-    --ig-button-group-item-border-color: #ffcd0f;
-    --ig-button-group-item-selected-background: #ffcd0f;
-    --ig-button-group-item-hover-background: #ffcd0f;
-    --ig-button-group-item-selected-hover-background: #ffcd0f;
-    --ig-button-group-item-disabled-border: #ffcd0f;
-    --ig-button-group-item-selected-border-color: #ffcd0f;
-
-    --ig-input-group-idle-text-color: #ffcd0f;
-    --ig-input-group-focused-text-color: #ffcd0f;
-    --ig-input-group-filled-text-color: #ffcd0f;
-    --ig-input-group-idle-bottom-line-color: #ffe482;
-    --ig-input-group-focused-secondary-color: #ffcd0f;
-
-    --ig-chip-background: #ffcd0f;
-    --ig-chip-text-color: #292826;
-
-    --ig-drop-down-background-color: #292826;
-    --ig-drop-down-item-text-color: #ffcd0f;
-    --ig-drop-down-hover-item-background: #ffcd0f;
-    --ig-drop-down-hover-item-text-color: #292826;
-    --ig-drop-down-focused-item-background: #ffcd0f;
-    --ig-drop-down-focused-item-text-color: #292826;
-    --ig-drop-down-selected-item-background: #ffcd0f;
-    --ig-drop-down-selected-item-text-color: #292826;
-    --ig-drop-down-selected-focus-item-background: #ffcd0f;
-    --ig-drop-down-selected-focus-item-text-color: #292826;
-    --ig-drop-down-selected-hover-item-background: #ffcd0f;
-    --ig-drop-down-selected-hover-item-text-color: #292826;
-
-    --ig-query-builder-header-foreground: #EDEDED;
-    --ig-query-builder-header-background: gray;
-    --ig-query-builder-background: #292826;
-    --ig-query-builder-foreground: #ffcd0f;
-}
-
-* {
-    --background-or: red;
-    --filtering-row-background: #292826;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/src/index.ts b/samples/grids/hierarchical-grid/advanced-filtering-style/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/tsconfig.json b/samples/grids/hierarchical-grid/advanced-filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/webpack.config.js b/samples/grids/hierarchical-grid/advanced-filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/package.json b/samples/grids/hierarchical-grid/cell-editing-sample/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/cell-editing-sample/package.json
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/sandbox.config.json b/samples/grids/hierarchical-grid/cell-editing-sample/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/cell-editing-sample/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/src/index.css b/samples/grids/hierarchical-grid/cell-editing-sample/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/cell-editing-sample/src/index.css
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/src/index.ts b/samples/grids/hierarchical-grid/cell-editing-sample/src/index.ts
index 24b0e435b7..a84c0a1e6d 100644
--- a/samples/grids/hierarchical-grid/cell-editing-sample/src/index.ts
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/src/index.ts
@@ -4,10 +4,10 @@ import { IgcHierarchicalGridComponent, IgcColumnComponent } from 'igniteui-webco
 import HGridDndData from './HGridDndData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -33,7 +33,6 @@ export class Sample {
             column3.inlineEditorTemplate = this.hGridCellEditCellTemplate;
         }
         this._bind();
-
     }
 
     private _hGridDndData: any[] = HGridDndData;
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/tsconfig.json b/samples/grids/hierarchical-grid/cell-editing-sample/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/cell-editing-sample/tsconfig.json
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/webpack.config.js b/samples/grids/hierarchical-grid/cell-editing-sample/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/cell-editing-sample/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/package.json b/samples/grids/hierarchical-grid/cell-editing-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/cell-editing-styling/package.json
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/sandbox.config.json b/samples/grids/hierarchical-grid/cell-editing-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/cell-editing-styling/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/src/index.css b/samples/grids/hierarchical-grid/cell-editing-styling/src/index.css
index aea51891e1..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/cell-editing-styling/src/index.css
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/src/index.css
@@ -1,13 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
-    #grid {
-        --ig-grid-edit-mode-color: #FFA500;
-        --ig-grid-cell-active-border-color: #AAFF00;
-        --ig-grid-cell-editing-background: #ADD8E6;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/src/index.ts b/samples/grids/hierarchical-grid/cell-editing-styling/src/index.ts
index 429a437fbd..6a9dfa6c62 100644
--- a/samples/grids/hierarchical-grid/cell-editing-styling/src/index.ts
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/tsconfig.json b/samples/grids/hierarchical-grid/cell-editing-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/cell-editing-styling/tsconfig.json
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/webpack.config.js b/samples/grids/hierarchical-grid/cell-editing-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/cell-editing-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/package.json b/samples/grids/hierarchical-grid/cell-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/cell-selection-mode/package.json
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/sandbox.config.json b/samples/grids/hierarchical-grid/cell-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/cell-selection-mode/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/src/index.css b/samples/grids/hierarchical-grid/cell-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/cell-selection-mode/src/index.css
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/src/index.ts b/samples/grids/hierarchical-grid/cell-selection-mode/src/index.ts
index 94c2a95beb..fe55566a2c 100644
--- a/samples/grids/hierarchical-grid/cell-selection-mode/src/index.ts
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -42,7 +42,6 @@ export class Sample {
             hierarchicalGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/tsconfig.json b/samples/grids/hierarchical-grid/cell-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/cell-selection-mode/tsconfig.json
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/webpack.config.js b/samples/grids/hierarchical-grid/cell-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/cell-selection-mode/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/package.json b/samples/grids/hierarchical-grid/cell-selection-overview/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/cell-selection-overview/package.json
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/sandbox.config.json b/samples/grids/hierarchical-grid/cell-selection-overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/cell-selection-overview/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/src/index.css b/samples/grids/hierarchical-grid/cell-selection-overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/cell-selection-overview/src/index.css
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/src/index.ts b/samples/grids/hierarchical-grid/cell-selection-overview/src/index.ts
index aba0611ffe..766786e5f3 100644
--- a/samples/grids/hierarchical-grid/cell-selection-overview/src/index.ts
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchica
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             hGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/tsconfig.json b/samples/grids/hierarchical-grid/cell-selection-overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/cell-selection-overview/tsconfig.json
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/webpack.config.js b/samples/grids/hierarchical-grid/cell-selection-overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/cell-selection-overview/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/cell-selection-style/package.json b/samples/grids/hierarchical-grid/cell-selection-style/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/cell-selection-style/package.json
+++ b/samples/grids/hierarchical-grid/cell-selection-style/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/cell-selection-style/sandbox.config.json b/samples/grids/hierarchical-grid/cell-selection-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/cell-selection-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/cell-selection-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-selection-style/src/index.css b/samples/grids/hierarchical-grid/cell-selection-style/src/index.css
index ac0bc23f12..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/cell-selection-style/src/index.css
+++ b/samples/grids/hierarchical-grid/cell-selection-style/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hGrid {
-    --ig-grid-cell-selected-text-color: #FFFFFF;
-    --ig-grid-cell-active-border-color: #f2c43c;
-    --ig-grid-cell-selected-background: #0062a3;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-selection-style/src/index.ts b/samples/grids/hierarchical-grid/cell-selection-style/src/index.ts
index aba0611ffe..766786e5f3 100644
--- a/samples/grids/hierarchical-grid/cell-selection-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/cell-selection-style/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchica
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             hGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/cell-selection-style/tsconfig.json b/samples/grids/hierarchical-grid/cell-selection-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/cell-selection-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/cell-selection-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/cell-selection-style/webpack.config.js b/samples/grids/hierarchical-grid/cell-selection-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/cell-selection-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-selection-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/package.json b/samples/grids/hierarchical-grid/cell-selection-styling/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/hierarchical-grid/cell-selection-styling/package.json
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/sandbox.config.json b/samples/grids/hierarchical-grid/cell-selection-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/cell-selection-styling/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/src/index.css b/samples/grids/hierarchical-grid/cell-selection-styling/src/index.css
index ca219500af..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/cell-selection-styling/src/index.css
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hGrid {
-    --ig-grid--cell-selected-text-color: #FFFFFF;
-    --ig-grid--cell-active-border-color: #0578c4;
-    --ig-grid--cell-selected-background: #0578c4;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/src/index.ts b/samples/grids/hierarchical-grid/cell-selection-styling/src/index.ts
index aba0611ffe..766786e5f3 100644
--- a/samples/grids/hierarchical-grid/cell-selection-styling/src/index.ts
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchica
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             hGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/tsconfig.json b/samples/grids/hierarchical-grid/cell-selection-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/cell-selection-styling/tsconfig.json
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-auto-sizing/package.json b/samples/grids/hierarchical-grid/column-auto-sizing/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/hierarchical-grid/column-auto-sizing/package.json
+++ b/samples/grids/hierarchical-grid/column-auto-sizing/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-auto-sizing/sandbox.config.json b/samples/grids/hierarchical-grid/column-auto-sizing/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-auto-sizing/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-auto-sizing/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-auto-sizing/src/index.css b/samples/grids/hierarchical-grid/column-auto-sizing/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-auto-sizing/src/index.css
+++ b/samples/grids/hierarchical-grid/column-auto-sizing/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-auto-sizing/src/index.ts b/samples/grids/hierarchical-grid/column-auto-sizing/src/index.ts
index cc4eebf926..4339d194e4 100644
--- a/samples/grids/hierarchical-grid/column-auto-sizing/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-auto-sizing/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomers from './HierarchicalCustomers.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.hierarchicalCustomers;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomers: any[] = HierarchicalCustomers;
diff --git a/samples/grids/hierarchical-grid/column-auto-sizing/tsconfig.json b/samples/grids/hierarchical-grid/column-auto-sizing/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-auto-sizing/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-auto-sizing/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/package.json b/samples/grids/hierarchical-grid/column-collapsible-groups/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-collapsible-groups/package.json
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/sandbox.config.json b/samples/grids/hierarchical-grid/column-collapsible-groups/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-collapsible-groups/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/src/index.css b/samples/grids/hierarchical-grid/column-collapsible-groups/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-collapsible-groups/src/index.css
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/src/index.ts b/samples/grids/hierarchical-grid/column-collapsible-groups/src/index.ts
index 87bfde8a13..597698a785 100644
--- a/samples/grids/hierarchical-grid/column-collapsible-groups/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomersData from './HierarchicalCustomersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.hierarchicalCustomersData;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/tsconfig.json b/samples/grids/hierarchical-grid/column-collapsible-groups/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-collapsible-groups/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/webpack.config.js b/samples/grids/hierarchical-grid/column-collapsible-groups/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-collapsible-groups/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/sandbox.config.json b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/src/index.css b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/src/index.css
index f43f316e92..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/src/index.css
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hierarchicalGrid {
-    --ig-column-actions-background-color: #292826;
-    --ig-column-actions-title-color: #ffcd0f;
-    --ig-checkbox-tick-color: #292826;
-    --ig-checkbox-label-color: #ffcd0f;
-    --ig-checkbox-empty-color: #ffcd0f;
-    --ig-checkbox-fill-color: #ffcd0f;
-    --ig-input-group-idle-text-color: white;
-    --ig-input-group-filled-text-color: #ffcd0f;
-    --ig-input-group-focused-text-color: #ffcd0f;
-    --ig-input-group-focused-border-color: #ffcd0f;
-    --ig-input-group-focused-secondary-color: #ffcd0f;
-    --ig-button-foreground: #292826;
-    --ig-button-background: #ffcd0f;
-    --ig-button-hover-background: #404040;
-    --ig-button-hover-foreground: #ffcd0f;
-    --ig-button-focus-background: #ffcd0f;
-    --ig-button-focus-foreground: black;
-    --ig-button-focus-visible-background: #ffcd0f;
-    --ig-button-focus-visible-foreground: black;
-    --ig-button-disabled-foreground: #ffcd0f;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/src/index.ts b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/src/index.ts
index f77b2b43ea..3065adca34 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/tsconfig.json b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/webpack.config.js b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json b/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/sandbox.config.json b/samples/grids/hierarchical-grid/column-hiding-toolbar/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/src/index.css b/samples/grids/hierarchical-grid/column-hiding-toolbar/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar/src/index.css
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/src/index.ts b/samples/grids/hierarchical-grid/column-hiding-toolbar/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/tsconfig.json b/samples/grids/hierarchical-grid/column-hiding-toolbar/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/webpack.config.js b/samples/grids/hierarchical-grid/column-hiding-toolbar/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-moving-options/package.json b/samples/grids/hierarchical-grid/column-moving-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/package.json
+++ b/samples/grids/hierarchical-grid/column-moving-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-moving-options/sandbox.config.json b/samples/grids/hierarchical-grid/column-moving-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-moving-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-moving-options/src/index.css b/samples/grids/hierarchical-grid/column-moving-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/src/index.css
+++ b/samples/grids/hierarchical-grid/column-moving-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-moving-options/src/index.ts b/samples/grids/hierarchical-grid/column-moving-options/src/index.ts
index 9419dd7d95..b28d7bafd1 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-moving-options/src/index.ts
@@ -3,11 +3,11 @@ import { IgcHierarchicalGridComponent, IgcPaginatorComponent, IgcColumnComponent
 import HierarchicalCustomers from './HierarchicalCustomers.json';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -52,7 +52,6 @@ export class Sample {
             column10.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomers: any[] = HierarchicalCustomers;
@@ -60,7 +59,6 @@ export class Sample {
         return this._hierarchicalCustomers;
     }
 
-
     public hierarchicalGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
         const column = (ctx as any).column;
diff --git a/samples/grids/hierarchical-grid/column-moving-options/tsconfig.json b/samples/grids/hierarchical-grid/column-moving-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-moving-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-moving-options/webpack.config.js b/samples/grids/hierarchical-grid/column-moving-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-moving-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/package.json b/samples/grids/hierarchical-grid/column-moving-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/package.json
+++ b/samples/grids/hierarchical-grid/column-moving-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/sandbox.config.json b/samples/grids/hierarchical-grid/column-moving-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-moving-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/src/index.css b/samples/grids/hierarchical-grid/column-moving-styles/src/index.css
index 2fc5e07694..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/src/index.css
+++ b/samples/grids/hierarchical-grid/column-moving-styles/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-ghost-header-text-color: #f4d45c;
-    --ig-grid-ghost-header-background: #ad9d9d;
-    --ig-grid-ghost-header-icon-color: #f4d45c;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/src/index.ts b/samples/grids/hierarchical-grid/column-moving-styles/src/index.ts
index 42dbbff57f..2de04f706c 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-moving-styles/src/index.ts
@@ -3,11 +3,11 @@ import { IgcHierarchicalGridComponent, IgcPaginatorComponent, IgcColumnComponent
 import HierarchicalCustomers from './HierarchicalCustomers.json';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -52,7 +52,6 @@ export class Sample {
             column10.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomers: any[] = HierarchicalCustomers;
@@ -60,7 +59,6 @@ export class Sample {
         return this._hierarchicalCustomers;
     }
 
-
     public hierarchicalGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
         const column = (ctx as any).column;
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/tsconfig.json b/samples/grids/hierarchical-grid/column-moving-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-moving-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/webpack.config.js b/samples/grids/hierarchical-grid/column-moving-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-moving-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/package.json b/samples/grids/hierarchical-grid/column-pinning-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/package.json
+++ b/samples/grids/hierarchical-grid/column-pinning-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/sandbox.config.json b/samples/grids/hierarchical-grid/column-pinning-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-pinning-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/src/index.css b/samples/grids/hierarchical-grid/column-pinning-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/src/index.css
+++ b/samples/grids/hierarchical-grid/column-pinning-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/src/index.ts b/samples/grids/hierarchical-grid/column-pinning-options/src/index.ts
index c76e06e045..5328fb40eb 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-pinning-options/src/index.ts
@@ -3,11 +3,11 @@ import { IgcHierarchicalGridComponent, IgcColumnComponent } from 'igniteui-webco
 import HierarchicalCustomersData from './HierarchicalCustomersData.json';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -83,7 +83,6 @@ export class Sample {
             column21.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
@@ -91,7 +90,6 @@ export class Sample {
         return this._hierarchicalCustomersData;
     }
 
-
     public hierarchicalGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
         const column = (ctx as any).column;
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/tsconfig.json b/samples/grids/hierarchical-grid/column-pinning-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-pinning-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/webpack.config.js b/samples/grids/hierarchical-grid/column-pinning-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-pinning-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/package.json b/samples/grids/hierarchical-grid/column-pinning-right-side/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-pinning-right-side/package.json
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/sandbox.config.json b/samples/grids/hierarchical-grid/column-pinning-right-side/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-pinning-right-side/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/src/index.css b/samples/grids/hierarchical-grid/column-pinning-right-side/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-pinning-right-side/src/index.css
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/src/index.ts b/samples/grids/hierarchical-grid/column-pinning-right-side/src/index.ts
index deaea9fa39..f7522b8042 100644
--- a/samples/grids/hierarchical-grid/column-pinning-right-side/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcPinningConfig, ColumnPinningPosition } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomersData from './HierarchicalCustomersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -20,6 +20,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -30,7 +31,6 @@ export class Sample {
             grid.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/tsconfig.json b/samples/grids/hierarchical-grid/column-pinning-right-side/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-pinning-right-side/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/webpack.config.js b/samples/grids/hierarchical-grid/column-pinning-right-side/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-pinning-right-side/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/package.json b/samples/grids/hierarchical-grid/column-pinning-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-pinning-styles/package.json
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/sandbox.config.json b/samples/grids/hierarchical-grid/column-pinning-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-pinning-styles/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/src/index.css b/samples/grids/hierarchical-grid/column-pinning-styles/src/index.css
index 38c34c00bf..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-pinning-styles/src/index.css
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-pinned-border-width: 5px;
-    --ig-grid-pinned-border-color: #FFCD0F;
-    --ig-grid-pinned-border-style: double;
-    --ig-grid-cell-active-border-color: #FFCD0F;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/src/index.ts b/samples/grids/hierarchical-grid/column-pinning-styles/src/index.ts
index 87bfde8a13..597698a785 100644
--- a/samples/grids/hierarchical-grid/column-pinning-styles/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomersData from './HierarchicalCustomersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.hierarchicalCustomersData;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/tsconfig.json b/samples/grids/hierarchical-grid/column-pinning-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-pinning-styles/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/webpack.config.js b/samples/grids/hierarchical-grid/column-pinning-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-pinning-styles/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-pinning/package.json b/samples/grids/hierarchical-grid/column-pinning/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-pinning/package.json
+++ b/samples/grids/hierarchical-grid/column-pinning/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-pinning/sandbox.config.json b/samples/grids/hierarchical-grid/column-pinning/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-pinning/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-pinning/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-pinning/src/index.css b/samples/grids/hierarchical-grid/column-pinning/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-pinning/src/index.css
+++ b/samples/grids/hierarchical-grid/column-pinning/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-pinning/src/index.ts b/samples/grids/hierarchical-grid/column-pinning/src/index.ts
index 87bfde8a13..597698a785 100644
--- a/samples/grids/hierarchical-grid/column-pinning/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-pinning/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomersData from './HierarchicalCustomersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.hierarchicalCustomersData;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
diff --git a/samples/grids/hierarchical-grid/column-pinning/tsconfig.json b/samples/grids/hierarchical-grid/column-pinning/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-pinning/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-pinning/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-pinning/webpack.config.js b/samples/grids/hierarchical-grid/column-pinning/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-pinning/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-pinning/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-resize-styling/package.json b/samples/grids/hierarchical-grid/column-resize-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-resize-styling/package.json
+++ b/samples/grids/hierarchical-grid/column-resize-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-resize-styling/sandbox.config.json b/samples/grids/hierarchical-grid/column-resize-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-resize-styling/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-resize-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-resize-styling/src/index.css b/samples/grids/hierarchical-grid/column-resize-styling/src/index.css
index 1203da6d95..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-resize-styling/src/index.css
+++ b/samples/grids/hierarchical-grid/column-resize-styling/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-resize-line-color: #f35b04;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-resize-styling/src/index.ts b/samples/grids/hierarchical-grid/column-resize-styling/src/index.ts
index 174ef44b89..e964441510 100644
--- a/samples/grids/hierarchical-grid/column-resize-styling/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-resize-styling/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-resize-styling/tsconfig.json b/samples/grids/hierarchical-grid/column-resize-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-resize-styling/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-resize-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-resize-styling/webpack.config.js b/samples/grids/hierarchical-grid/column-resize-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-resize-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-resize-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-resizing/package.json b/samples/grids/hierarchical-grid/column-resizing/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-resizing/package.json
+++ b/samples/grids/hierarchical-grid/column-resizing/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-resizing/sandbox.config.json b/samples/grids/hierarchical-grid/column-resizing/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-resizing/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-resizing/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-resizing/src/index.css b/samples/grids/hierarchical-grid/column-resizing/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-resizing/src/index.css
+++ b/samples/grids/hierarchical-grid/column-resizing/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-resizing/src/index.ts b/samples/grids/hierarchical-grid/column-resizing/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/column-resizing/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-resizing/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-resizing/tsconfig.json b/samples/grids/hierarchical-grid/column-resizing/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-resizing/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-resizing/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-resizing/webpack.config.js b/samples/grids/hierarchical-grid/column-resizing/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-resizing/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-resizing/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-selection-group/package.json b/samples/grids/hierarchical-grid/column-selection-group/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-selection-group/package.json
+++ b/samples/grids/hierarchical-grid/column-selection-group/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-selection-group/sandbox.config.json b/samples/grids/hierarchical-grid/column-selection-group/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-selection-group/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-selection-group/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-selection-group/src/index.css b/samples/grids/hierarchical-grid/column-selection-group/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-selection-group/src/index.css
+++ b/samples/grids/hierarchical-grid/column-selection-group/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-selection-group/src/index.ts b/samples/grids/hierarchical-grid/column-selection-group/src/index.ts
index cc4eebf926..4339d194e4 100644
--- a/samples/grids/hierarchical-grid/column-selection-group/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-selection-group/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomers from './HierarchicalCustomers.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.hierarchicalCustomers;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomers: any[] = HierarchicalCustomers;
diff --git a/samples/grids/hierarchical-grid/column-selection-group/tsconfig.json b/samples/grids/hierarchical-grid/column-selection-group/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-selection-group/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-selection-group/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-selection-group/webpack.config.js b/samples/grids/hierarchical-grid/column-selection-group/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-selection-group/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-selection-group/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/package.json b/samples/grids/hierarchical-grid/column-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/package.json
+++ b/samples/grids/hierarchical-grid/column-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/sandbox.config.json b/samples/grids/hierarchical-grid/column-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/src/index.css b/samples/grids/hierarchical-grid/column-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/src/index.css
+++ b/samples/grids/hierarchical-grid/column-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/src/index.ts b/samples/grids/hierarchical-grid/column-selection-mode/src/index.ts
index 72c562e262..bfbb0db810 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-selection-mode/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchica
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             hierarchicalGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/tsconfig.json b/samples/grids/hierarchical-grid/column-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/webpack.config.js b/samples/grids/hierarchical-grid/column-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/package.json b/samples/grids/hierarchical-grid/column-selection-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-selection-styles/package.json
+++ b/samples/grids/hierarchical-grid/column-selection-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/sandbox.config.json b/samples/grids/hierarchical-grid/column-selection-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-selection-styles/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-selection-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/src/index.css b/samples/grids/hierarchical-grid/column-selection-styles/src/index.css
index d328109828..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-selection-styles/src/index.css
+++ b/samples/grids/hierarchical-grid/column-selection-styles/src/index.css
@@ -1,13 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-row-selected-background: #0062A3;
-    --ig-grid-row-selected-text-color: #ecaa53;
-    --ig-grid-row-selected-hover-background: #0062A3;
-    --ig-grid-header-selected-text-color: #ecaa53;
-    --ig-grid-header-selected-background: #0062A3;
-    --ig-grid-row-selected-hover-text-color: #ecaa53;
-    --ig-grid-row-selected-hover-background: #0062A3;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/src/index.ts b/samples/grids/hierarchical-grid/column-selection-styles/src/index.ts
index 174ef44b89..e964441510 100644
--- a/samples/grids/hierarchical-grid/column-selection-styles/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-selection-styles/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/tsconfig.json b/samples/grids/hierarchical-grid/column-selection-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-selection-styles/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-selection-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/webpack.config.js b/samples/grids/hierarchical-grid/column-selection-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-selection-styles/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-selection-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/package.json b/samples/grids/hierarchical-grid/column-sorting-indicators/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-sorting-indicators/package.json
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/sandbox.config.json b/samples/grids/hierarchical-grid/column-sorting-indicators/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-sorting-indicators/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/src/index.css b/samples/grids/hierarchical-grid/column-sorting-indicators/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-sorting-indicators/src/index.css
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/src/index.ts b/samples/grids/hierarchical-grid/column-sorting-indicators/src/index.ts
index f37823322e..0d37981cdd 100644
--- a/samples/grids/hierarchical-grid/column-sorting-indicators/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcSortingExpression, SortingDirection } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -42,6 +42,7 @@ export class Sample {
         }
         return this._sortingExpression1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -52,7 +53,6 @@ export class Sample {
             hierarchicalGrid1.sortingExpressions = this.sortingExpression1;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/tsconfig.json b/samples/grids/hierarchical-grid/column-sorting-indicators/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-sorting-indicators/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/webpack.config.js b/samples/grids/hierarchical-grid/column-sorting-indicators/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-sorting-indicators/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/package.json b/samples/grids/hierarchical-grid/column-sorting-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-sorting-options/package.json
+++ b/samples/grids/hierarchical-grid/column-sorting-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/sandbox.config.json b/samples/grids/hierarchical-grid/column-sorting-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-sorting-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-sorting-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/src/index.css b/samples/grids/hierarchical-grid/column-sorting-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-sorting-options/src/index.css
+++ b/samples/grids/hierarchical-grid/column-sorting-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/src/index.ts b/samples/grids/hierarchical-grid/column-sorting-options/src/index.ts
index 7154d62ec4..438fa6ca9c 100644
--- a/samples/grids/hierarchical-grid/column-sorting-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-sorting-options/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcSortingExpression, SortingDirection } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -24,6 +24,7 @@ export class Sample {
         }
         return this._sortingExpression1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -34,7 +35,6 @@ export class Sample {
             hierarchicalGrid1.sortingExpressions = this.sortingExpression1;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/tsconfig.json b/samples/grids/hierarchical-grid/column-sorting-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-sorting-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-sorting-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/webpack.config.js b/samples/grids/hierarchical-grid/column-sorting-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-sorting-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-sorting-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/package.json b/samples/grids/hierarchical-grid/column-sorting-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/column-sorting-style/package.json
+++ b/samples/grids/hierarchical-grid/column-sorting-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/sandbox.config.json b/samples/grids/hierarchical-grid/column-sorting-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/column-sorting-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/column-sorting-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/src/index.css b/samples/grids/hierarchical-grid/column-sorting-style/src/index.css
index 11c0472282..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/column-sorting-style/src/index.css
+++ b/samples/grids/hierarchical-grid/column-sorting-style/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hierarchicalGrid {
-    --ig-grid-sorted-header-icon-color: #ffb06a;
-    --ig-grid-sortable-header-icon-hover-color: black;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/src/index.ts b/samples/grids/hierarchical-grid/column-sorting-style/src/index.ts
index 107444cbc0..7170dcdbe9 100644
--- a/samples/grids/hierarchical-grid/column-sorting-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/column-sorting-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcSortingExpression, SortingDirection } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -24,6 +24,7 @@ export class Sample {
         }
         return this._sortingExpression1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -34,7 +35,6 @@ export class Sample {
             hierarchicalGrid.sortingExpressions = this.sortingExpression1;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/tsconfig.json b/samples/grids/hierarchical-grid/column-sorting-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/column-sorting-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/column-sorting-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/webpack.config.js b/samples/grids/hierarchical-grid/column-sorting-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/column-sorting-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-sorting-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json b/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/sandbox.config.json b/samples/grids/hierarchical-grid/conditional-cell-style-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-1/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/src/index.css b/samples/grids/hierarchical-grid/conditional-cell-style-1/src/index.css
index 6945da3e3b..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-1/src/index.css
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.upFont {
-    color: green !important;
-}
-
-.downFont {
-    color: red !important;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/src/index.ts b/samples/grids/hierarchical-grid/conditional-cell-style-1/src/index.ts
index 6addf9a86a..e472ab8b29 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-1/src/index.ts
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -21,7 +21,6 @@ export class Sample {
             column1.cellClasses = this.webGridGrammyNominationsCellClassesHandler;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -29,7 +28,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webGridGrammyNominationsCellClassesHandler = {
         downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5,
         upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/tsconfig.json b/samples/grids/hierarchical-grid/conditional-cell-style-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-1/tsconfig.json
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/webpack.config.js b/samples/grids/hierarchical-grid/conditional-cell-style-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-1/webpack.config.js
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json b/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/sandbox.config.json b/samples/grids/hierarchical-grid/conditional-cell-style-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-2/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/src/index.css b/samples/grids/hierarchical-grid/conditional-cell-style-2/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-2/src/index.css
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/src/index.ts b/samples/grids/hierarchical-grid/conditional-cell-style-2/src/index.ts
index 675098b693..51946a391c 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-2/src/index.ts
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/src/index.ts
@@ -3,11 +3,11 @@ import { IgcHierarchicalGridComponent, IgcColumnComponent } from 'igniteui-webco
 import SingersData from './SingersData.json';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent, IgcRowType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -38,7 +38,6 @@ export class Sample {
             column6.cellStyles = this.webHierarchicalGridCellStylesHandler;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -46,7 +45,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webHierarchicalGridCellStylesHandler = {
         background: (rowData: any, columnKey: any, cellValue: any, rowIndex: any) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
         color: (rowData: any, columnKey: any, cellValue: any, rowIndex: any) => {
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/tsconfig.json b/samples/grids/hierarchical-grid/conditional-cell-style-2/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-2/tsconfig.json
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/webpack.config.js b/samples/grids/hierarchical-grid/conditional-cell-style-2/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-2/webpack.config.js
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/package.json b/samples/grids/hierarchical-grid/conditional-row-selectors/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/conditional-row-selectors/package.json
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/sandbox.config.json b/samples/grids/hierarchical-grid/conditional-row-selectors/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/conditional-row-selectors/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/src/index.css b/samples/grids/hierarchical-grid/conditional-row-selectors/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/conditional-row-selectors/src/index.css
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/src/index.ts b/samples/grids/hierarchical-grid/conditional-row-selectors/src/index.ts
index 011fd09bcd..0b93e3905c 100644
--- a/samples/grids/hierarchical-grid/conditional-row-selectors/src/index.ts
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebHierarchicalGridDescriptionModule } from 'igniteu
 import { IgcHierarchicalGridComponent, IgcPaginatorComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcRowSelectionEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             hierarchicalGrid.addEventListener("rowSelectionChanging", this.webHierarchicalGridRowSelectionConditional);
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/tsconfig.json b/samples/grids/hierarchical-grid/conditional-row-selectors/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/conditional-row-selectors/tsconfig.json
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/webpack.config.js b/samples/grids/hierarchical-grid/conditional-row-selectors/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/conditional-row-selectors/webpack.config.js
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/custom-filtering/package.json b/samples/grids/hierarchical-grid/custom-filtering/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/custom-filtering/package.json
+++ b/samples/grids/hierarchical-grid/custom-filtering/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/custom-filtering/sandbox.config.json b/samples/grids/hierarchical-grid/custom-filtering/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/custom-filtering/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/custom-filtering/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/custom-filtering/src/index.css b/samples/grids/hierarchical-grid/custom-filtering/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/custom-filtering/src/index.css
+++ b/samples/grids/hierarchical-grid/custom-filtering/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/custom-filtering/src/index.ts b/samples/grids/hierarchical-grid/custom-filtering/src/index.ts
index d83253577b..160903e559 100644
--- a/samples/grids/hierarchical-grid/custom-filtering/src/index.ts
+++ b/samples/grids/hierarchical-grid/custom-filtering/src/index.ts
@@ -3,11 +3,11 @@ import { IgcHierarchicalGridComponent, IgcColumnComponent } from 'igniteui-webco
 import SingersData from './SingersData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -23,7 +23,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -31,7 +30,6 @@ export class Sample {
         return this._singersData;
     }
 
-
         public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
             if (ctx.cell.value) {
                 return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
diff --git a/samples/grids/hierarchical-grid/custom-filtering/tsconfig.json b/samples/grids/hierarchical-grid/custom-filtering/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/custom-filtering/tsconfig.json
+++ b/samples/grids/hierarchical-grid/custom-filtering/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/custom-filtering/webpack.config.js b/samples/grids/hierarchical-grid/custom-filtering/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/custom-filtering/webpack.config.js
+++ b/samples/grids/hierarchical-grid/custom-filtering/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/data-exporting-indicator/package.json b/samples/grids/hierarchical-grid/data-exporting-indicator/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/hierarchical-grid/data-exporting-indicator/package.json
+++ b/samples/grids/hierarchical-grid/data-exporting-indicator/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/data-exporting-indicator/sandbox.config.json b/samples/grids/hierarchical-grid/data-exporting-indicator/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/data-exporting-indicator/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/data-exporting-indicator/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-exporting-indicator/src/index.ts b/samples/grids/hierarchical-grid/data-exporting-indicator/src/index.ts
index e9752c05e4..26789de728 100644
--- a/samples/grids/hierarchical-grid/data-exporting-indicator/src/index.ts
+++ b/samples/grids/hierarchical-grid/data-exporting-indicator/src/index.ts
@@ -1,10 +1,10 @@
 import { IgcGridToolbarComponent, IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import { SingersData } from './SingersData';
-
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
 
+
 defineComponents(IgcButtonComponent);
 
 export class Sample {
diff --git a/samples/grids/hierarchical-grid/data-exporting-indicator/tsconfig.json b/samples/grids/hierarchical-grid/data-exporting-indicator/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/data-exporting-indicator/tsconfig.json
+++ b/samples/grids/hierarchical-grid/data-exporting-indicator/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/data-performance-virtualization/package.json b/samples/grids/hierarchical-grid/data-performance-virtualization/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/hierarchical-grid/data-performance-virtualization/package.json
+++ b/samples/grids/hierarchical-grid/data-performance-virtualization/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/data-performance-virtualization/sandbox.config.json b/samples/grids/hierarchical-grid/data-performance-virtualization/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/data-performance-virtualization/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/data-performance-virtualization/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-performance-virtualization/src/index.ts b/samples/grids/hierarchical-grid/data-performance-virtualization/src/index.ts
index 91e4199369..21f54dda90 100644
--- a/samples/grids/hierarchical-grid/data-performance-virtualization/src/index.ts
+++ b/samples/grids/hierarchical-grid/data-performance-virtualization/src/index.ts
@@ -1,9 +1,9 @@
 import { IgcGridCreatedEventArgs, IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { getData } from './RemoteService';
-
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
 
+
 export class Sample {
     constructor() {
         const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
@@ -19,7 +19,6 @@ export class Sample {
         });
 
         hierarchicalGrid.isLoading = true;
-
         getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => {
             hierarchicalGrid.isLoading = false;
             hierarchicalGrid.data = data;
@@ -37,7 +36,7 @@ export class Sample {
         };
 
         context.grid.isLoading = true;
-        
+
         getData(dataState).then((data: any[]) => {
             context.grid.isLoading = false;
             context.grid.data = data;
diff --git a/samples/grids/hierarchical-grid/data-performance-virtualization/tsconfig.json b/samples/grids/hierarchical-grid/data-performance-virtualization/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/data-performance-virtualization/tsconfig.json
+++ b/samples/grids/hierarchical-grid/data-performance-virtualization/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/package.json b/samples/grids/hierarchical-grid/data-summary-formatter/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/data-summary-formatter/package.json
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/sandbox.config.json b/samples/grids/hierarchical-grid/data-summary-formatter/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/data-summary-formatter/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/src/index.css b/samples/grids/hierarchical-grid/data-summary-formatter/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/data-summary-formatter/src/index.css
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/src/index.ts b/samples/grids/hierarchical-grid/data-summary-formatter/src/index.ts
index c98919b359..3aab39bb33 100644
--- a/samples/grids/hierarchical-grid/data-summary-formatter/src/index.ts
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcSummaryResult, IgcSummaryOperand } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -27,7 +27,6 @@ export class Sample {
             column1.summaryFormatter = this.webHierarchicalGridSummaryFormatter;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -35,7 +34,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webHierarchicalGridRenderedExpand(args:any): void {
         let debutColumn = this.debutColumn;
         let hierarchicalGrid = this.hierarchicalGrid;
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/tsconfig.json b/samples/grids/hierarchical-grid/data-summary-formatter/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/data-summary-formatter/tsconfig.json
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/webpack.config.js b/samples/grids/hierarchical-grid/data-summary-formatter/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/data-summary-formatter/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/package.json b/samples/grids/hierarchical-grid/data-summary-options-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/data-summary-options-styling/package.json
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/sandbox.config.json b/samples/grids/hierarchical-grid/data-summary-options-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/data-summary-options-styling/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/src/index.css b/samples/grids/hierarchical-grid/data-summary-options-styling/src/index.css
index 4479283818..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/data-summary-options-styling/src/index.css
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hierarchicalGrid {
-    --ig-grid-summary-background-color:#e0f3ff;
-    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
-    --ig-grid-summary-label-color: rgb(228, 27, 117);
-    --ig-grid-summary-result-color: black;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/src/index.ts b/samples/grids/hierarchical-grid/data-summary-options-styling/src/index.ts
index f77b2b43ea..3065adca34 100644
--- a/samples/grids/hierarchical-grid/data-summary-options-styling/src/index.ts
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/tsconfig.json b/samples/grids/hierarchical-grid/data-summary-options-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/data-summary-options-styling/tsconfig.json
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/webpack.config.js b/samples/grids/hierarchical-grid/data-summary-options-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/data-summary-options-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/data-summary-options/package.json b/samples/grids/hierarchical-grid/data-summary-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/data-summary-options/package.json
+++ b/samples/grids/hierarchical-grid/data-summary-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/data-summary-options/sandbox.config.json b/samples/grids/hierarchical-grid/data-summary-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/data-summary-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/data-summary-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-summary-options/src/index.css b/samples/grids/hierarchical-grid/data-summary-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/data-summary-options/src/index.css
+++ b/samples/grids/hierarchical-grid/data-summary-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-summary-options/src/index.ts b/samples/grids/hierarchical-grid/data-summary-options/src/index.ts
index f77b2b43ea..3065adca34 100644
--- a/samples/grids/hierarchical-grid/data-summary-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/data-summary-options/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/data-summary-options/tsconfig.json b/samples/grids/hierarchical-grid/data-summary-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/data-summary-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/data-summary-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/data-summary-options/webpack.config.js b/samples/grids/hierarchical-grid/data-summary-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/data-summary-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-summary-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/data-summary-template/package.json b/samples/grids/hierarchical-grid/data-summary-template/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/data-summary-template/package.json
+++ b/samples/grids/hierarchical-grid/data-summary-template/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/data-summary-template/sandbox.config.json b/samples/grids/hierarchical-grid/data-summary-template/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/data-summary-template/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/data-summary-template/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-summary-template/src/index.css b/samples/grids/hierarchical-grid/data-summary-template/src/index.css
index 848a950285..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/data-summary-template/src/index.css
+++ b/samples/grids/hierarchical-grid/data-summary-template/src/index.css
@@ -1,43 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.summary-temp {
-	display: flex;
-	flex-direction: column;
-	margin: 0 1px;
-	font-size: 14px;
-	line-height: 24px;
-	height: 100%;
-	overflow-y: auto;
-	overflow-x: hidden;
-	> * {
-		padding: 8px 0;
-		line-height: 18px;
-		border-bottom: 1px dashed hsla(var(--igx-gray-400));
-		&:last-child {
-			border-bottom: none;
-		}
-	}
-}
-.summary-temp span {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px;
-    justify-content: space-between;
-    color: hsla(var(--ig-gray-900));
-}
-.summary-temp span span {
-    user-select: all;
-    max-width: 300px;
-    padding-right: 8px;
-}
-.summary-temp span strong {
-    font-size: 14px;
-    text-transform: uppercase;
-    min-width: 70px;
-    justify-self: flex-start;
-    text-align: left;
-    color: hsla(var(--ig-secondary-600));
-    user-select: none;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/data-summary-template/src/index.ts b/samples/grids/hierarchical-grid/data-summary-template/src/index.ts
index 11ce07c6ca..ee017e02ba 100644
--- a/samples/grids/hierarchical-grid/data-summary-template/src/index.ts
+++ b/samples/grids/hierarchical-grid/data-summary-template/src/index.ts
@@ -7,11 +7,11 @@ import SingersData from './SingersData.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcSummaryResult, IgcSummaryTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -58,7 +58,6 @@ export class Sample {
             column4.summaryTemplate = this.webRowIslandGridSummaryTemplateStyle;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/data-summary-template/tsconfig.json b/samples/grids/hierarchical-grid/data-summary-template/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/data-summary-template/tsconfig.json
+++ b/samples/grids/hierarchical-grid/data-summary-template/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/data-summary-template/webpack.config.js b/samples/grids/hierarchical-grid/data-summary-template/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/data-summary-template/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-summary-template/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/editing-columns/package.json b/samples/grids/hierarchical-grid/editing-columns/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/editing-columns/package.json
+++ b/samples/grids/hierarchical-grid/editing-columns/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/editing-columns/sandbox.config.json b/samples/grids/hierarchical-grid/editing-columns/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/editing-columns/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/editing-columns/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/editing-columns/src/index.css b/samples/grids/hierarchical-grid/editing-columns/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/editing-columns/src/index.css
+++ b/samples/grids/hierarchical-grid/editing-columns/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/editing-columns/src/index.ts b/samples/grids/hierarchical-grid/editing-columns/src/index.ts
index 429a437fbd..6a9dfa6c62 100644
--- a/samples/grids/hierarchical-grid/editing-columns/src/index.ts
+++ b/samples/grids/hierarchical-grid/editing-columns/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.nwindData;
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/hierarchical-grid/editing-columns/tsconfig.json b/samples/grids/hierarchical-grid/editing-columns/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/editing-columns/tsconfig.json
+++ b/samples/grids/hierarchical-grid/editing-columns/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/editing-columns/webpack.config.js b/samples/grids/hierarchical-grid/editing-columns/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/editing-columns/webpack.config.js
+++ b/samples/grids/hierarchical-grid/editing-columns/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/editing-events/package.json b/samples/grids/hierarchical-grid/editing-events/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/editing-events/package.json
+++ b/samples/grids/hierarchical-grid/editing-events/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/editing-events/sandbox.config.json b/samples/grids/hierarchical-grid/editing-events/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/editing-events/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/editing-events/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/editing-events/src/index.css b/samples/grids/hierarchical-grid/editing-events/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/editing-events/src/index.css
+++ b/samples/grids/hierarchical-grid/editing-events/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/editing-events/src/index.ts b/samples/grids/hierarchical-grid/editing-events/src/index.ts
index bc8f4c7092..39b0757ea1 100644
--- a/samples/grids/hierarchical-grid/editing-events/src/index.ts
+++ b/samples/grids/hierarchical-grid/editing-events/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebPaginatorDe
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
 import { IgcGridComponent, IgcGridEditEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -22,7 +22,6 @@ export class Sample {
             grid.addEventListener("cellEdit", this.webGridEditingEventsCellEdit);
         }
         this._bind();
-
     }
 
     private _nwindData: any[] = NwindData;
diff --git a/samples/grids/hierarchical-grid/editing-events/tsconfig.json b/samples/grids/hierarchical-grid/editing-events/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/editing-events/tsconfig.json
+++ b/samples/grids/hierarchical-grid/editing-events/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/editing-events/webpack.config.js b/samples/grids/hierarchical-grid/editing-events/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/editing-events/webpack.config.js
+++ b/samples/grids/hierarchical-grid/editing-events/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/package.json b/samples/grids/hierarchical-grid/editing-lifecycle/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/editing-lifecycle/package.json
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/sandbox.config.json b/samples/grids/hierarchical-grid/editing-lifecycle/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/editing-lifecycle/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/src/index.css b/samples/grids/hierarchical-grid/editing-lifecycle/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/editing-lifecycle/src/index.css
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/src/index.ts b/samples/grids/hierarchical-grid/editing-lifecycle/src/index.ts
index 5d8a34e7bc..911476d104 100644
--- a/samples/grids/hierarchical-grid/editing-lifecycle/src/index.ts
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcRowSelectionEventArgs, IgcGridEditEventArgs, IgcGridEditDoneEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -51,7 +51,6 @@ export class Sample {
             rowIsland.addEventListener("cellEditExit", this.webRowIslandGridCellEditExit);
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -59,7 +58,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webHierarchicalGridRendered(args:any): void {
         const hierarchicalGrid = document.getElementById("hierarchicalGrid");
         hierarchicalGrid.parentElement.style.display = "flex";
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/tsconfig.json b/samples/grids/hierarchical-grid/editing-lifecycle/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/editing-lifecycle/tsconfig.json
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/webpack.config.js b/samples/grids/hierarchical-grid/editing-lifecycle/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/editing-lifecycle/webpack.config.js
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/excel-exporting/package.json b/samples/grids/hierarchical-grid/excel-exporting/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/excel-exporting/package.json
+++ b/samples/grids/hierarchical-grid/excel-exporting/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/excel-exporting/sandbox.config.json b/samples/grids/hierarchical-grid/excel-exporting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/excel-exporting/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/excel-exporting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-exporting/src/index.css b/samples/grids/hierarchical-grid/excel-exporting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/excel-exporting/src/index.css
+++ b/samples/grids/hierarchical-grid/excel-exporting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-exporting/src/index.ts b/samples/grids/hierarchical-grid/excel-exporting/src/index.ts
index b367135681..53035c4081 100644
--- a/samples/grids/hierarchical-grid/excel-exporting/src/index.ts
+++ b/samples/grids/hierarchical-grid/excel-exporting/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersExportData from './SingersExportData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersExportData;
         }
         this._bind();
-
     }
 
     private _singersExportData: any[] = SingersExportData;
diff --git a/samples/grids/hierarchical-grid/excel-exporting/tsconfig.json b/samples/grids/hierarchical-grid/excel-exporting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/excel-exporting/tsconfig.json
+++ b/samples/grids/hierarchical-grid/excel-exporting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/excel-exporting/webpack.config.js b/samples/grids/hierarchical-grid/excel-exporting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/excel-exporting/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-exporting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/sandbox.config.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/src/index.css b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/src/index.css
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/src/index.ts b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/src/index.ts
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/tsconfig.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/tsconfig.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/webpack.config.js b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/sandbox.config.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/src/index.css b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/src/index.css
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/src/index.ts b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/src/index.ts
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/tsconfig.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/tsconfig.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/webpack.config.js b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/sandbox.config.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/src/index.css b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/src/index.css
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/src/index.ts b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/src/index.ts
index 40d8a7249d..49f49f7b6c 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/src/index.ts
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/src/index.ts
@@ -3,11 +3,11 @@ import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids
 import SingersData from './SingersData.json';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -21,7 +21,6 @@ export class Sample {
             hierarchicalGrid1.excelStyleHeaderIconTemplate = this.webGridFilterAltIconTemplate;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -29,7 +28,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
         return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
     }
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/tsconfig.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/tsconfig.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/webpack.config.js b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/sandbox.config.json b/samples/grids/hierarchical-grid/excel-style-filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/src/index.css b/samples/grids/hierarchical-grid/excel-style-filtering-style/src/index.css
index aa7a27b502..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-style/src/index.css
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-grid-filtering-row-background: #ffcd0f;
-        --ig-button-background: #FFCD0F;
-        --ig-button-foreground: #292826;
-        --ig-button-hover-background: #292826;
-        --ig-button-hover-foreground: #ffcd0f;
-
-        --ig-list-background: #FFCD0F;
-        --ig-list-item-background: #FFCD0F;
-        --ig-list-item-background-hover: #c2b1b1bd;
-
-        --ig-checkbox-empty-color: #292826;
-        --ig-checkbox-fill-color: #292826;
-        --ig-checkbox-tick-color: #FFCD0F;
-        --ig-checkbox-label-color: #292826;
-
-        --ig-drop-down-background-color: #FFCD0F;
-        --ig-drop-down-item-text-color: #292826;
-        --ig-drop-down-item-background: #FFCD0F;
-        --ig-drop-down-item-text-color: #292826;
-        --ig-drop-down-focused-item-background: #c2b1b1bd;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/src/index.ts b/samples/grids/hierarchical-grid/excel-style-filtering-style/src/index.ts
index 174ef44b89..e964441510 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/tsconfig.json b/samples/grids/hierarchical-grid/excel-style-filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/webpack.config.js b/samples/grids/hierarchical-grid/excel-style-filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/filtering-options/package.json b/samples/grids/hierarchical-grid/filtering-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/filtering-options/package.json
+++ b/samples/grids/hierarchical-grid/filtering-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/filtering-options/sandbox.config.json b/samples/grids/hierarchical-grid/filtering-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/filtering-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/filtering-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/filtering-options/src/index.css b/samples/grids/hierarchical-grid/filtering-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/filtering-options/src/index.css
+++ b/samples/grids/hierarchical-grid/filtering-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/filtering-options/src/index.ts b/samples/grids/hierarchical-grid/filtering-options/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/filtering-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/filtering-options/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/filtering-options/tsconfig.json b/samples/grids/hierarchical-grid/filtering-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/filtering-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/filtering-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/filtering-options/webpack.config.js b/samples/grids/hierarchical-grid/filtering-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/filtering-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/filtering-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/filtering-style/package.json b/samples/grids/hierarchical-grid/filtering-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/filtering-style/package.json
+++ b/samples/grids/hierarchical-grid/filtering-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/filtering-style/sandbox.config.json b/samples/grids/hierarchical-grid/filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/filtering-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/filtering-style/src/index.css b/samples/grids/hierarchical-grid/filtering-style/src/index.css
index bfdeb8fb13..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/filtering-style/src/index.css
+++ b/samples/grids/hierarchical-grid/filtering-style/src/index.css
@@ -1,18 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hierarchicalGrid1 {
-    --ig-grid-filtering-row-background: #ffcd0f;
-    --ig-grid-filtering-background-or: #d83434;
-    --ig-grid-cell-active-border-color: #ffcd0f;
-    --ig-grid-cell-selected-background: #6f6f6f;
-    --ig-grid-row-hover-background: #f8e495;
-    --ig-grid-row-selected-background: #8d8d8d;
-    --ig-grid-header-background: #494949;
-    --ig-grid-header-text-color: #fff;
-    --ig-grid-expand-icon-color: #ffcd0f;
-    --ig-grid-expand-icon-hover-color: #e0b710;
-    --ig-grid-resize-line-color: #ffcd0f;
-    --ig-grid-row-highlight: #ffcd0f
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/filtering-style/src/index.ts b/samples/grids/hierarchical-grid/filtering-style/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/filtering-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/filtering-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/filtering-style/tsconfig.json b/samples/grids/hierarchical-grid/filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/filtering-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/filtering-style/webpack.config.js b/samples/grids/hierarchical-grid/filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/filtering-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/sandbox.config.json b/samples/grids/hierarchical-grid/hierarchical-grid-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/src/index.css b/samples/grids/hierarchical-grid/hierarchical-grid-options/src/index.css
index 3b330b391d..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-options/src/index.css
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/src/index.ts b/samples/grids/hierarchical-grid/hierarchical-grid-options/src/index.ts
index f067e0dee0..761fadab3d 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcPaginatorComponent, IgcPaginatorResourceStrings } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -21,6 +21,7 @@ export class Sample {
         }
         return this._paginatorResourceStrings1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -32,7 +33,6 @@ export class Sample {
             paginator.resourceStrings = this.paginatorResourceStrings1;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/tsconfig.json b/samples/grids/hierarchical-grid/hierarchical-grid-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/webpack.config.js b/samples/grids/hierarchical-grid/hierarchical-grid-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/sandbox.config.json b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/src/index.css b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/src/index.css
index b188fc621b..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/src/index.css
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/src/index.css
@@ -1,19 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-size: var(--ig-size-medium);
-    }
-
-    #grid igc-paginator {
-        --ig-paginator-border-width: 5px;
-        --ig-paginator-background-color: #231c2c;
-        --ig-paginator-text-color: #d0ab23;
-        --ig-paginator-focused-text-color: #d0ab23;
-        --ig-paginator-border-color: #d0ab23;
-        --ig-grid-paginator-active-border-color: #d0ab23;
-        --ig-icon-color: #d0ab23;
-        --ig-input-group-filled-text-color: #d0ab23;
-        --ig-input-group-focused-text-color: #d0ab23;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/src/index.ts b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/src/index.ts
index f067e0dee0..761fadab3d 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcPaginatorComponent, IgcPaginatorResourceStrings } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -21,6 +21,7 @@ export class Sample {
         }
         return this._paginatorResourceStrings1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -32,7 +33,6 @@ export class Sample {
             paginator.resourceStrings = this.paginatorResourceStrings1;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/tsconfig.json b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/webpack.config.js b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/sandbox.config.json b/samples/grids/hierarchical-grid/hierarchical-grid-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/src/index.css b/samples/grids/hierarchical-grid/hierarchical-grid-styling/src/index.css
index 8bed1da2ef..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/src/index.css
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/src/index.css
@@ -1,16 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hGrid {
-    --ig-grid-cell-active-border-color: #ffcd0f;
-    --ig-grid-cell-selected-background: #6f6f6f;
-    --ig-grid-row-hover-background: #f8e495;
-    --ig-grid-row-selected-background: #8d8d8d;
-    --ig-grid-header-background: #494949;
-    --ig-grid-header-text-color: #fff;
-    --ig-grid-expand-icon-color: #ffcd0f;
-    --ig-grid-expand-icon-hover-color: #e0b710;
-    --ig-grid-resize-line-color: #ffcd0f;
-    --ig-grid-row-highlight: #ffcd0f;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/src/index.ts b/samples/grids/hierarchical-grid/hierarchical-grid-styling/src/index.ts
index a233360b89..0bf98a41db 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/src/index.ts
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hGrid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/tsconfig.json b/samples/grids/hierarchical-grid/hierarchical-grid-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/tsconfig.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/webpack.config.js b/samples/grids/hierarchical-grid/hierarchical-grid-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/layout-display-density/package.json b/samples/grids/hierarchical-grid/layout-display-density/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/layout-display-density/package.json
+++ b/samples/grids/hierarchical-grid/layout-display-density/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/layout-display-density/sandbox.config.json b/samples/grids/hierarchical-grid/layout-display-density/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/layout-display-density/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/layout-display-density/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/layout-display-density/src/index.css b/samples/grids/hierarchical-grid/layout-display-density/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/layout-display-density/src/index.css
+++ b/samples/grids/hierarchical-grid/layout-display-density/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/layout-display-density/src/index.ts b/samples/grids/hierarchical-grid/layout-display-density/src/index.ts
index 8033d75ddb..40fba889c1 100644
--- a/samples/grids/hierarchical-grid/layout-display-density/src/index.ts
+++ b/samples/grids/hierarchical-grid/layout-display-density/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomers from './HierarchicalCustomers.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -38,7 +38,6 @@ export class Sample {
             hierarchicalGrid.data = this.hierarchicalCustomers;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomers: any[] = HierarchicalCustomers;
diff --git a/samples/grids/hierarchical-grid/layout-display-density/tsconfig.json b/samples/grids/hierarchical-grid/layout-display-density/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/layout-display-density/tsconfig.json
+++ b/samples/grids/hierarchical-grid/layout-display-density/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/layout-display-density/webpack.config.js b/samples/grids/hierarchical-grid/layout-display-density/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/layout-display-density/webpack.config.js
+++ b/samples/grids/hierarchical-grid/layout-display-density/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/package.json b/samples/grids/hierarchical-grid/multi-column-headers-export/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-export/package.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/sandbox.config.json b/samples/grids/hierarchical-grid/multi-column-headers-export/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-export/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/src/index.css b/samples/grids/hierarchical-grid/multi-column-headers-export/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-export/src/index.css
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/src/index.ts b/samples/grids/hierarchical-grid/multi-column-headers-export/src/index.ts
index dfd7241a95..80793a04af 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-export/src/index.ts
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcGridToolbarExporterComponent } from 'igniteui-webcomponents-grids/grids';
 import MultiColumnsExportData from './MultiColumnsExportData.json';
 import { IgcExporterEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -23,7 +23,6 @@ export class Sample {
             hGridToolbarExporter.addEventListener("exportStarted", this.webHierarchicalGridExportMultiColumnHeaders);
         }
         this._bind();
-
     }
 
     private _multiColumnsExportData: any[] = MultiColumnsExportData;
@@ -31,7 +30,6 @@ export class Sample {
         return this._multiColumnsExportData;
     }
 
-
     public webHierarchicalGridExportMultiColumnHeaders(args: CustomEvent<IgcExporterEventArgs>): void {
         if (args.detail.options) {
             args.detail.options.ignoreMultiColumnHeaders = false;
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/tsconfig.json b/samples/grids/hierarchical-grid/multi-column-headers-export/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-export/tsconfig.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/webpack.config.js b/samples/grids/hierarchical-grid/multi-column-headers-export/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-export/webpack.config.js
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json b/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/sandbox.config.json b/samples/grids/hierarchical-grid/multi-column-headers-overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-overview/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/src/index.css b/samples/grids/hierarchical-grid/multi-column-headers-overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-overview/src/index.css
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/src/index.ts b/samples/grids/hierarchical-grid/multi-column-headers-overview/src/index.ts
index 74fde80520..46352eb1a1 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-overview/src/index.ts
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomers from './HierarchicalCustomers.json';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -42,7 +42,6 @@ export class Sample {
             hierarchicalGrid.data = this.hierarchicalCustomers;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomers: any[] = HierarchicalCustomers;
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/tsconfig.json b/samples/grids/hierarchical-grid/multi-column-headers-overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-overview/tsconfig.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/webpack.config.js b/samples/grids/hierarchical-grid/multi-column-headers-overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-overview/webpack.config.js
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json b/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/sandbox.config.json b/samples/grids/hierarchical-grid/multi-column-headers-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-styling/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/src/index.css b/samples/grids/hierarchical-grid/multi-column-headers-styling/src/index.css
index 5992914672..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-styling/src/index.css
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hierarchicalGrid {
-    --ig-grid-header-background: #e0f3ff;
-    --ig-grid-header-text-color: #e41c77;
-    --ig-grid-header-border-width: 1px;
-    --ig-grid-header-border-style: solid;
-    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/src/index.ts b/samples/grids/hierarchical-grid/multi-column-headers-styling/src/index.ts
index a464f77852..bab7ef84c8 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-styling/src/index.ts
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebColumnGroupDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import HierarchicalCustomers from './HierarchicalCustomers.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             hierarchicalGrid.data = this.hierarchicalCustomers;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomers: any[] = HierarchicalCustomers;
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/tsconfig.json b/samples/grids/hierarchical-grid/multi-column-headers-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-styling/tsconfig.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/webpack.config.js b/samples/grids/hierarchical-grid/multi-column-headers-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/package.json b/samples/grids/hierarchical-grid/multi-column-headers-template/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-template/package.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/sandbox.config.json b/samples/grids/hierarchical-grid/multi-column-headers-template/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-template/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/src/index.css b/samples/grids/hierarchical-grid/multi-column-headers-template/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-template/src/index.css
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/src/index.ts b/samples/grids/hierarchical-grid/multi-column-headers-template/src/index.ts
index c06441fdd3..ceea884402 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-template/src/index.ts
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/src/index.ts
@@ -4,11 +4,11 @@ import { IgcHierarchicalGridComponent, IgcColumnGroupComponent } from 'igniteui-
 import HierarchicalCustomers from './HierarchicalCustomers.json';
 import { IgcGridComponent, IgcColumnTemplateContext, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -36,7 +36,6 @@ export class Sample {
             columnGroup5.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _hierarchicalCustomers: any[] = HierarchicalCustomers;
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/tsconfig.json b/samples/grids/hierarchical-grid/multi-column-headers-template/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-template/tsconfig.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/webpack.config.js b/samples/grids/hierarchical-grid/multi-column-headers-template/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-template/webpack.config.js
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/overview/package.json b/samples/grids/hierarchical-grid/overview/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/overview/package.json
+++ b/samples/grids/hierarchical-grid/overview/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/overview/sandbox.config.json b/samples/grids/hierarchical-grid/overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/overview/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/overview/src/index.css b/samples/grids/hierarchical-grid/overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/overview/src/index.css
+++ b/samples/grids/hierarchical-grid/overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/overview/src/index.ts b/samples/grids/hierarchical-grid/overview/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/overview/src/index.ts
+++ b/samples/grids/hierarchical-grid/overview/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/overview/tsconfig.json b/samples/grids/hierarchical-grid/overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/overview/tsconfig.json
+++ b/samples/grids/hierarchical-grid/overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/overview/webpack.config.js b/samples/grids/hierarchical-grid/overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/overview/webpack.config.js
+++ b/samples/grids/hierarchical-grid/overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/package.json b/samples/grids/hierarchical-grid/remote-paging-sample/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/hierarchical-grid/remote-paging-sample/package.json
+++ b/samples/grids/hierarchical-grid/remote-paging-sample/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/sandbox.config.json b/samples/grids/hierarchical-grid/remote-paging-sample/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/remote-paging-sample/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/remote-paging-sample/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/src/index.ts b/samples/grids/hierarchical-grid/remote-paging-sample/src/index.ts
index 3ddae7ad61..ab99da0fb7 100644
--- a/samples/grids/hierarchical-grid/remote-paging-sample/src/index.ts
+++ b/samples/grids/hierarchical-grid/remote-paging-sample/src/index.ts
@@ -1,10 +1,10 @@
 import { IgcGridCreatedEventArgs, IgcHierarchicalGridComponent, IgcPaginatorComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
-
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
 import { html } from 'lit-html';
 import { RemotePagingService } from './RemoteService';
 
+
 export class Sample {
 
     public data: any[] = [];
@@ -13,10 +13,11 @@ export class Sample {
     public pager: IgcPaginatorComponent;
     public hierarchicalGrid: IgcHierarchicalGridComponent;
     private remoteService: RemotePagingService = new RemotePagingService();
-    
+
     public get perPage(): number {
         return this.pager?.perPage || 10;
     }
+
     public set perPage(val: number) {
         this._perPage = val;
         this.paginate(val);
@@ -48,7 +49,6 @@ export class Sample {
         });
         this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
             this.paginate(args.detail);}) as EventListener);
-        
 
         ordersRowIsland.addEventListener("gridCreated", (event: any) => {
             this.gridCreated(event, "Customers");
@@ -94,7 +94,7 @@ export class Sample {
             if(length !== undefined) {
                 this.pager.totalRecords = length;
             }
-        
+
         this.remoteService.getData(dataState, this.page, this.perPage).then((data: any[]) => {
             context.grid.isLoading = false;
             context.grid.data = data;
@@ -106,7 +106,6 @@ export class Sample {
         this.page = page;
         const skip = this.page * this.perPage;
         const top = this.perPage;
-    
         this.remoteService.getData({ parentID: null, rootLevel: true, key: 'Customers' }, skip, top).then((data:any)=> {
           this.data = data; // Assign received data to this.data
           this.hierarchicalGrid.isLoading = false;
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/tsconfig.json b/samples/grids/hierarchical-grid/remote-paging-sample/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/remote-paging-sample/tsconfig.json
+++ b/samples/grids/hierarchical-grid/remote-paging-sample/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-adding/package.json b/samples/grids/hierarchical-grid/row-adding/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/row-adding/package.json
+++ b/samples/grids/hierarchical-grid/row-adding/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-adding/sandbox.config.json b/samples/grids/hierarchical-grid/row-adding/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-adding/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-adding/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-adding/src/index.css b/samples/grids/hierarchical-grid/row-adding/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-adding/src/index.css
+++ b/samples/grids/hierarchical-grid/row-adding/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-adding/src/index.ts b/samples/grids/hierarchical-grid/row-adding/src/index.ts
index a233360b89..0bf98a41db 100644
--- a/samples/grids/hierarchical-grid/row-adding/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-adding/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hGrid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/row-adding/tsconfig.json b/samples/grids/hierarchical-grid/row-adding/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-adding/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-adding/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-adding/webpack.config.js b/samples/grids/hierarchical-grid/row-adding/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-adding/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-adding/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-classes/package.json b/samples/grids/hierarchical-grid/row-classes/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/row-classes/package.json
+++ b/samples/grids/hierarchical-grid/row-classes/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-classes/sandbox.config.json b/samples/grids/hierarchical-grid/row-classes/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-classes/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-classes/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-classes/src/index.css b/samples/grids/hierarchical-grid/row-classes/src/index.css
index de13be7ed3..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-classes/src/index.css
+++ b/samples/grids/hierarchical-grid/row-classes/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    .activeRow {
-        border-top: 2px solid #fc81b8;
-        border-left: 3px solid #e41c77;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-classes/src/index.ts b/samples/grids/hierarchical-grid/row-classes/src/index.ts
index f543f233a2..27591818f6 100644
--- a/samples/grids/hierarchical-grid/row-classes/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-classes/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcRowType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -29,7 +29,6 @@ export class Sample {
             rowIsland3.rowClasses = this.webGridRowClassesHandler;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -37,7 +36,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webGridRowClassesHandler = {
       activeRow: (row: IgcRowType) => row.index % 2 === 0
     };
diff --git a/samples/grids/hierarchical-grid/row-classes/tsconfig.json b/samples/grids/hierarchical-grid/row-classes/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-classes/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-classes/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-classes/webpack.config.js b/samples/grids/hierarchical-grid/row-classes/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-classes/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-classes/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-drag-base/package.json b/samples/grids/hierarchical-grid/row-drag-base/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/package.json
+++ b/samples/grids/hierarchical-grid/row-drag-base/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-drag-base/sandbox.config.json b/samples/grids/hierarchical-grid/row-drag-base/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-drag-base/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-drag-base/src/index.css b/samples/grids/hierarchical-grid/row-drag-base/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/src/index.css
+++ b/samples/grids/hierarchical-grid/row-drag-base/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-drag-base/src/index.ts b/samples/grids/hierarchical-grid/row-drag-base/src/index.ts
index d95962b8ee..1b04f944a9 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-drag-base/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { SingersDataItem, SingersDataItem_ToursItem, SingersDataItem_AlbumsItem, SingersDataItem_AlbumsItem_SongsItem, SingersData } from './SingersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -19,8 +19,8 @@ export class Sample {
         this._bind = () => {
             hierarchicalGrid1.data = this.singersData;
             this.hierarchicalGrid2.data = [];
-            this.hierarchicalGrid2.emptyGridMessage = "Drag and Drop a row from the left grid to this grid";            
-            hierarchicalGrid1.addEventListener("rowDragEnd", this.onGridRowDragEnd.bind(this));            
+            this.hierarchicalGrid2.emptyGridMessage = "Drag and Drop a row from the left grid to this grid";
+            hierarchicalGrid1.addEventListener("rowDragEnd", this.onGridRowDragEnd.bind(this));
         }
         this._bind();
     }
@@ -30,12 +30,12 @@ export class Sample {
 
         if (ghostElement != null) {
 
-            const dragElementPos = ghostElement.getBoundingClientRect();            
+            const dragElementPos = ghostElement.getBoundingClientRect();
 
-            const gridPosition = this.hierarchicalGrid2.getBoundingClientRect();            
+            const gridPosition = this.hierarchicalGrid2.getBoundingClientRect();
             const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
             const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
-            if (withinXBounds && withinYBounds) {                
+            if (withinXBounds && withinYBounds) {
                 this.hierarchicalGrid2.addRow(args.detail.dragData.data);
             }
         }
diff --git a/samples/grids/hierarchical-grid/row-drag-base/tsconfig.json b/samples/grids/hierarchical-grid/row-drag-base/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-drag-base/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-editing-options/package.json b/samples/grids/hierarchical-grid/row-editing-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/row-editing-options/package.json
+++ b/samples/grids/hierarchical-grid/row-editing-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-editing-options/sandbox.config.json b/samples/grids/hierarchical-grid/row-editing-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-editing-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-editing-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-editing-options/src/index.css b/samples/grids/hierarchical-grid/row-editing-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-editing-options/src/index.css
+++ b/samples/grids/hierarchical-grid/row-editing-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-editing-options/src/index.ts b/samples/grids/hierarchical-grid/row-editing-options/src/index.ts
index f77b2b43ea..3065adca34 100644
--- a/samples/grids/hierarchical-grid/row-editing-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-editing-options/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/row-editing-options/tsconfig.json b/samples/grids/hierarchical-grid/row-editing-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-editing-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-editing-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-editing-options/webpack.config.js b/samples/grids/hierarchical-grid/row-editing-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-editing-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-editing-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-editing-style/package.json b/samples/grids/hierarchical-grid/row-editing-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/row-editing-style/package.json
+++ b/samples/grids/hierarchical-grid/row-editing-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-editing-style/sandbox.config.json b/samples/grids/hierarchical-grid/row-editing-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-editing-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-editing-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-editing-style/src/index.css b/samples/grids/hierarchical-grid/row-editing-style/src/index.css
index d2d16c2b30..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-editing-style/src/index.css
+++ b/samples/grids/hierarchical-grid/row-editing-style/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#hierarchicalGrid {
-    --ig-banner-banner-background: #e3e3e3;
-    --ig-banner-banner-message-color: #423589;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-editing-style/src/index.ts b/samples/grids/hierarchical-grid/row-editing-style/src/index.ts
index f77b2b43ea..3065adca34 100644
--- a/samples/grids/hierarchical-grid/row-editing-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-editing-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/row-editing-style/tsconfig.json b/samples/grids/hierarchical-grid/row-editing-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-editing-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-editing-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-editing-style/webpack.config.js b/samples/grids/hierarchical-grid/row-editing-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-editing-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-editing-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json b/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/sandbox.config.json b/samples/grids/hierarchical-grid/row-pinning-extra-column/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-pinning-extra-column/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.css b/samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.css
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.ts b/samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.ts
index f90b969570..baed3cf893 100644
--- a/samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.ts
@@ -7,11 +7,11 @@ import SingersData from './SingersData.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcCellTemplateContext, IgcRowType } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -37,6 +37,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private column1: IgcColumnComponent
     private rowIsland1: IgcRowIslandComponent
     private _pinningConfig2: IgcPinningConfig | null = null;
@@ -51,6 +52,7 @@ export class Sample {
         }
         return this._pinningConfig2;
     }
+
     private column2: IgcColumnComponent
     private rowIsland2: IgcRowIslandComponent
     private _pinningConfig3: IgcPinningConfig | null = null;
@@ -65,6 +67,7 @@ export class Sample {
         }
         return this._pinningConfig3;
     }
+
     private column3: IgcColumnComponent
     private rowIsland3: IgcRowIslandComponent
     private _pinningConfig4: IgcPinningConfig | null = null;
@@ -79,6 +82,7 @@ export class Sample {
         }
         return this._pinningConfig4;
     }
+
     private column4: IgcColumnComponent
     private _bind: () => void;
 
@@ -110,7 +114,6 @@ export class Sample {
             column4.bodyTemplate = this.webHierarchicalGridRowPinCellTemplate;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/tsconfig.json b/samples/grids/hierarchical-grid/row-pinning-extra-column/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-pinning-extra-column/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/webpack.config.js b/samples/grids/hierarchical-grid/row-pinning-extra-column/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-pinning-extra-column/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/package.json b/samples/grids/hierarchical-grid/row-pinning-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/row-pinning-options/package.json
+++ b/samples/grids/hierarchical-grid/row-pinning-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/sandbox.config.json b/samples/grids/hierarchical-grid/row-pinning-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-pinning-options/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-pinning-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/src/index.css b/samples/grids/hierarchical-grid/row-pinning-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-pinning-options/src/index.css
+++ b/samples/grids/hierarchical-grid/row-pinning-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/src/index.ts b/samples/grids/hierarchical-grid/row-pinning-options/src/index.ts
index 7b0151ad10..babee89146 100644
--- a/samples/grids/hierarchical-grid/row-pinning-options/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-pinning-options/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcHierarchicalGridComponent, IgcPinningConfig, RowPinningPosition, ColumnPinningPosition, IgcActionStripComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,6 +35,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private actionStrip1: IgcActionStripComponent
     private rowIsland1: IgcRowIslandComponent
     private _pinningConfig2: IgcPinningConfig | null = null;
@@ -49,6 +50,7 @@ export class Sample {
         }
         return this._pinningConfig2;
     }
+
     private actionStrip2: IgcActionStripComponent
     private _bind: () => void;
 
@@ -72,7 +74,6 @@ export class Sample {
             rowIsland1.pinning = this.pinningConfig2;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/tsconfig.json b/samples/grids/hierarchical-grid/row-pinning-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-pinning-options/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-pinning-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/webpack.config.js b/samples/grids/hierarchical-grid/row-pinning-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-pinning-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-pinning-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/package.json b/samples/grids/hierarchical-grid/row-pinning-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/row-pinning-style/package.json
+++ b/samples/grids/hierarchical-grid/row-pinning-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/sandbox.config.json b/samples/grids/hierarchical-grid/row-pinning-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-pinning-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-pinning-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/src/index.css b/samples/grids/hierarchical-grid/row-pinning-style/src/index.css
index e8c11e3bf1..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-pinning-style/src/index.css
+++ b/samples/grids/hierarchical-grid/row-pinning-style/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-grid-pinned-border-width: 5px;
-        --ig-grid-pinned-border-style: double;
-        --ig-grid-pinned-border-color: #FFCD0F;
-        --ig-grid-cell-active-border-color: #FFCD0F;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/src/index.ts b/samples/grids/hierarchical-grid/row-pinning-style/src/index.ts
index 0e047a0553..dd8ca2d60b 100644
--- a/samples/grids/hierarchical-grid/row-pinning-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-pinning-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent, IgcPinningConfig, RowPinningPosition, ColumnPinningPosition, IgcActionStripComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -22,6 +22,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private actionStrip1: IgcActionStripComponent
     private rowIsland1: IgcRowIslandComponent
     private _pinningConfig2: IgcPinningConfig | null = null;
@@ -36,6 +37,7 @@ export class Sample {
         }
         return this._pinningConfig2;
     }
+
     private actionStrip2: IgcActionStripComponent
     private _bind: () => void;
 
@@ -53,7 +55,6 @@ export class Sample {
             rowIsland1.pinning = this.pinningConfig2;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -61,7 +62,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webHierarchicalGridPinRowOnRendered(): void {
     	var hierarchicalGrid = this.grid;
     	hierarchicalGrid.pinRow(hierarchicalGrid.data[0].Photo);
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/tsconfig.json b/samples/grids/hierarchical-grid/row-pinning-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-pinning-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-pinning-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/webpack.config.js b/samples/grids/hierarchical-grid/row-pinning-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-pinning-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-pinning-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-reorder/package.json b/samples/grids/hierarchical-grid/row-reorder/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/row-reorder/package.json
+++ b/samples/grids/hierarchical-grid/row-reorder/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-reorder/sandbox.config.json b/samples/grids/hierarchical-grid/row-reorder/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-reorder/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-reorder/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-reorder/src/index.css b/samples/grids/hierarchical-grid/row-reorder/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-reorder/src/index.css
+++ b/samples/grids/hierarchical-grid/row-reorder/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-reorder/src/index.ts b/samples/grids/hierarchical-grid/row-reorder/src/index.ts
index be0bc7eefa..1d9c4b3727 100644
--- a/samples/grids/hierarchical-grid/row-reorder/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-reorder/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcRowDragEndEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid: IgcHierarchicalGridComponent
@@ -21,7 +21,6 @@ export class Sample {
             hierarchicalGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler);
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -29,7 +28,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webHierarchicalGridReorderRowHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
         const ghostElement = args.detail.dragDirective.ghostElement;
         const dragElementPos = ghostElement.getBoundingClientRect();
diff --git a/samples/grids/hierarchical-grid/row-reorder/tsconfig.json b/samples/grids/hierarchical-grid/row-reorder/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-reorder/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-reorder/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-reorder/webpack.config.js b/samples/grids/hierarchical-grid/row-reorder/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-reorder/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-reorder/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/package.json b/samples/grids/hierarchical-grid/row-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/package.json
+++ b/samples/grids/hierarchical-grid/row-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/sandbox.config.json b/samples/grids/hierarchical-grid/row-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/src/index.css b/samples/grids/hierarchical-grid/row-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/src/index.css
+++ b/samples/grids/hierarchical-grid/row-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/src/index.ts b/samples/grids/hierarchical-grid/row-selection-mode/src/index.ts
index 7ea395d090..2bceff8252 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-selection-mode/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchica
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -37,7 +37,6 @@ export class Sample {
             hierarchicalGrid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/tsconfig.json b/samples/grids/hierarchical-grid/row-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/webpack.config.js b/samples/grids/hierarchical-grid/row-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json b/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/sandbox.config.json b/samples/grids/hierarchical-grid/row-selection-template-numbers/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-selection-template-numbers/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/src/index.css b/samples/grids/hierarchical-grid/row-selection-template-numbers/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-selection-template-numbers/src/index.css
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/src/index.ts b/samples/grids/hierarchical-grid/row-selection-template-numbers/src/index.ts
index da26cc9b9f..5d7fca15b1 100644
--- a/samples/grids/hierarchical-grid/row-selection-template-numbers/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/src/index.ts
@@ -4,10 +4,10 @@ import { IgcHierarchicalGridComponent, IgcPaginatorComponent } from 'igniteui-we
 import SingersData from './SingersData.json';
 import { IgcRowSelectorTemplateContext, IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -28,7 +28,6 @@ export class Sample {
             hierarchicalGrid.headSelectorTemplate = this.webGridHeaderRowSelectorTemplate;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/tsconfig.json b/samples/grids/hierarchical-grid/row-selection-template-numbers/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-selection-template-numbers/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/webpack.config.js b/samples/grids/hierarchical-grid/row-selection-template-numbers/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-selection-template-numbers/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/row-styles/package.json b/samples/grids/hierarchical-grid/row-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/row-styles/package.json
+++ b/samples/grids/hierarchical-grid/row-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/row-styles/sandbox.config.json b/samples/grids/hierarchical-grid/row-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/row-styles/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/row-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-styles/src/index.css b/samples/grids/hierarchical-grid/row-styles/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/row-styles/src/index.css
+++ b/samples/grids/hierarchical-grid/row-styles/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-styles/src/index.ts b/samples/grids/hierarchical-grid/row-styles/src/index.ts
index e2bf6b4dea..ab473c5f94 100644
--- a/samples/grids/hierarchical-grid/row-styles/src/index.ts
+++ b/samples/grids/hierarchical-grid/row-styles/src/index.ts
@@ -3,11 +3,11 @@ import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-we
 import SingersData from './SingersData.json';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent, IgcRowType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             rowIsland1.rowStyles = this.webHierarchicalGridChildRowStylesHandler;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -32,7 +31,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webHierarchicalGridRowStylesHandler = {
         background:(row: IgcRowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
         'border-left': (row: IgcRowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
diff --git a/samples/grids/hierarchical-grid/row-styles/tsconfig.json b/samples/grids/hierarchical-grid/row-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/row-styles/tsconfig.json
+++ b/samples/grids/hierarchical-grid/row-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/row-styles/webpack.config.js b/samples/grids/hierarchical-grid/row-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/row-styles/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/state-persistence-about/package.json b/samples/grids/hierarchical-grid/state-persistence-about/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/hierarchical-grid/state-persistence-about/package.json
+++ b/samples/grids/hierarchical-grid/state-persistence-about/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/state-persistence-about/src/index.ts b/samples/grids/hierarchical-grid/state-persistence-about/src/index.ts
index f1f9527c25..3ab139af30 100644
--- a/samples/grids/hierarchical-grid/state-persistence-about/src/index.ts
+++ b/samples/grids/hierarchical-grid/state-persistence-about/src/index.ts
@@ -8,7 +8,7 @@ export class Sample {
 
     constructor() {
         var backBtn = document.getElementById("backBtn") as IgcButtonComponent;
-        
+
         this._bind = () => {
             backBtn.addEventListener("click", () => { window.location.replace("./grids/hierarchical-grid/state-persistence-main");});
         }
diff --git a/samples/grids/hierarchical-grid/state-persistence-about/tsconfig.json b/samples/grids/hierarchical-grid/state-persistence-about/tsconfig.json
index 2c74e00627..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/state-persistence-about/tsconfig.json
+++ b/samples/grids/hierarchical-grid/state-persistence-about/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/state-persistence-about/webpack.config.js b/samples/grids/hierarchical-grid/state-persistence-about/webpack.config.js
index 4f82e885b8..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/state-persistence-about/webpack.config.js
+++ b/samples/grids/hierarchical-grid/state-persistence-about/webpack.config.js
@@ -35,7 +35,7 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: '[name].[fullhash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
             globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
@@ -96,8 +96,8 @@ module.exports = env => {
                 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: 'index-cs',
-                template: 'index.html',
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/hierarchical-grid/state-persistence-main/package.json b/samples/grids/hierarchical-grid/state-persistence-main/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/hierarchical-grid/state-persistence-main/package.json
+++ b/samples/grids/hierarchical-grid/state-persistence-main/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/state-persistence-main/src/index.css b/samples/grids/hierarchical-grid/state-persistence-main/src/index.css
index 9e0f296aa9..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/state-persistence-main/src/index.css
+++ b/samples/grids/hierarchical-grid/state-persistence-main/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.horizontal {
-    gap: 10px;
-    flex-basis: fit-content;
-    flex-wrap: wrap;
-}
-.sampleContainer {
-  padding: 0.5rem
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/state-persistence-main/src/index.ts b/samples/grids/hierarchical-grid/state-persistence-main/src/index.ts
index c55dc52365..199ccb3459 100644
--- a/samples/grids/hierarchical-grid/state-persistence-main/src/index.ts
+++ b/samples/grids/hierarchical-grid/state-persistence-main/src/index.ts
@@ -77,7 +77,6 @@ export class Sample {
         toursRowIsland.columnSelection = 'multiple';
         toursRowIsland.rowSelection = 'multiple';
         toursRowIsland.cellSelection = 'multiple';
-
         grid.addEventListener("columnInit", (ev: any) => { this.onColumnInit(ev); });
         saveStateBtn.addEventListener('click', (ev: any) => { this.saveGridState(); });
         restoreStateBtn.addEventListener('click', (ev: any) => { this.restoreGridState(); });
@@ -91,11 +90,10 @@ export class Sample {
             cb.addEventListener("igcChange", (ev: CustomEvent) => { this.onChange(ev, cb.id); });
         });
 
-        window.addEventListener("load", async () => { 
+        window.addEventListener("load", async () => {
             await this.columnsLoaded;
-            this.restoreGridState(); 
+            this.restoreGridState();
         });
-
         window.addEventListener("beforeunload", () => { this.saveGridState(); });
     }
 
@@ -150,7 +148,7 @@ export class Sample {
         window.location.reload();
     }
 
-    private onColumnInit(event: any) { 
+    private onColumnInit(event: any) {
         if(event.detail.index === this.grid.columns.length - 1) {
            this.columnsLoaded = new Promise((resolve) => resolve());
         }
diff --git a/samples/grids/hierarchical-grid/state-persistence-main/tsconfig.json b/samples/grids/hierarchical-grid/state-persistence-main/tsconfig.json
index 2c74e00627..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/state-persistence-main/tsconfig.json
+++ b/samples/grids/hierarchical-grid/state-persistence-main/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/state-persistence-main/webpack.config.js b/samples/grids/hierarchical-grid/state-persistence-main/webpack.config.js
index 4f82e885b8..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/state-persistence-main/webpack.config.js
+++ b/samples/grids/hierarchical-grid/state-persistence-main/webpack.config.js
@@ -35,7 +35,7 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: '[name].[fullhash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
             globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
@@ -96,8 +96,8 @@ module.exports = env => {
                 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: 'index-cs',
-                template: 'index.html',
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/package.json b/samples/grids/hierarchical-grid/toolbar-sample-1/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-1/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/sandbox.config.json b/samples/grids/hierarchical-grid/toolbar-sample-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-1/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/src/index.css b/samples/grids/hierarchical-grid/toolbar-sample-1/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-1/src/index.css
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/src/index.ts b/samples/grids/hierarchical-grid/toolbar-sample-1/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-1/src/index.ts
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/tsconfig.json b/samples/grids/hierarchical-grid/toolbar-sample-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-1/tsconfig.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-sample-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-1/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/package.json b/samples/grids/hierarchical-grid/toolbar-sample-2/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-2/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/sandbox.config.json b/samples/grids/hierarchical-grid/toolbar-sample-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-2/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/src/index.css b/samples/grids/hierarchical-grid/toolbar-sample-2/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-2/src/index.css
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/src/index.ts b/samples/grids/hierarchical-grid/toolbar-sample-2/src/index.ts
index 49f71a07a9..ad7c60070c 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-2/src/index.ts
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             hierarchicalGrid1.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/tsconfig.json b/samples/grids/hierarchical-grid/toolbar-sample-2/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-2/tsconfig.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-sample-2/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-2/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/package.json b/samples/grids/hierarchical-grid/toolbar-sample-3/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-3/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/sandbox.config.json b/samples/grids/hierarchical-grid/toolbar-sample-3/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-3/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/src/index.css b/samples/grids/hierarchical-grid/toolbar-sample-3/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-3/src/index.css
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/src/index.ts b/samples/grids/hierarchical-grid/toolbar-sample-3/src/index.ts
index bb61580d23..ac0398bfd5 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-3/src/index.ts
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
 import { IgcExporterOptionsBase, IgcGridToolbarExportEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private hierarchicalGrid1: IgcHierarchicalGridComponent
@@ -21,7 +21,6 @@ export class Sample {
             hierarchicalGrid1.addEventListener("toolbarExporting", this.webHierarchicalGridToolbarExporting);
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
@@ -29,7 +28,6 @@ export class Sample {
         return this._singersData;
     }
 
-
     public webHierarchicalGridToolbarExporting(evt: CustomEvent<IgcGridToolbarExportEventArgs>): void {
         const args = evt.detail;
         const options: IgcExporterOptionsBase = args.options;
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/tsconfig.json b/samples/grids/hierarchical-grid/toolbar-sample-3/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-3/tsconfig.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-sample-3/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-3/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-4/package.json b/samples/grids/hierarchical-grid/toolbar-sample-4/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-4/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-4/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-4/sandbox.config.json b/samples/grids/hierarchical-grid/toolbar-sample-4/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-4/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-4/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-4/src/index.ts b/samples/grids/hierarchical-grid/toolbar-sample-4/src/index.ts
index c64fc7260e..9d3dcef324 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-4/src/index.ts
+++ b/samples/grids/hierarchical-grid/toolbar-sample-4/src/index.ts
@@ -2,10 +2,10 @@ import { IgcGridToolbarTemplateContext, IgcHierarchicalGridComponent, IgcRowIsla
 import { defineComponents, IgcButtonComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
 import { SingersData } from './SingersData';
 import { html } from 'lit-html';
-
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
 
+
 defineComponents(IgcButtonComponent, IgcIconComponent);
 
 const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg>`;
@@ -18,7 +18,7 @@ export class Sample {
 
         var hGrid1 = this.hGrid1 = document.getElementById('hGrid1') as IgcHierarchicalGridComponent;
         hGrid1.data = this.singersData;
-        
+
         var rowIsland1 = document.getElementById('rowIsland1') as IgcRowIslandComponent;
         rowIsland1.toolbarTemplate = this.rowIslandToolbarTemplate;
 
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-4/tsconfig.json b/samples/grids/hierarchical-grid/toolbar-sample-4/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-4/tsconfig.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-4/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/toolbar-style/package.json b/samples/grids/hierarchical-grid/toolbar-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/hierarchical-grid/toolbar-style/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/hierarchical-grid/toolbar-style/sandbox.config.json b/samples/grids/hierarchical-grid/toolbar-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/hierarchical-grid/toolbar-style/sandbox.config.json
+++ b/samples/grids/hierarchical-grid/toolbar-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-style/src/index.css b/samples/grids/hierarchical-grid/toolbar-style/src/index.css
index a68274771b..0fe9368715 100644
--- a/samples/grids/hierarchical-grid/toolbar-style/src/index.css
+++ b/samples/grids/hierarchical-grid/toolbar-style/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-toolbar-background-color: #2a2b2f;
-    --ig-grid-toolbar-title-text-color: #ffcd0f;
-    --ig-grid-toolbar-dropdown-background: #2a2b2f;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/toolbar-style/src/index.ts b/samples/grids/hierarchical-grid/toolbar-style/src/index.ts
index 174ef44b89..e964441510 100644
--- a/samples/grids/hierarchical-grid/toolbar-style/src/index.ts
+++ b/samples/grids/hierarchical-grid/toolbar-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
 import SingersData from './SingersData.json';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcHierarchicalGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             grid.data = this.singersData;
         }
         this._bind();
-
     }
 
     private _singersData: any[] = SingersData;
diff --git a/samples/grids/hierarchical-grid/toolbar-style/tsconfig.json b/samples/grids/hierarchical-grid/toolbar-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/hierarchical-grid/toolbar-style/tsconfig.json
+++ b/samples/grids/hierarchical-grid/toolbar-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/hierarchical-grid/toolbar-style/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/hierarchical-grid/toolbar-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/list/add-list-items/package.json b/samples/grids/list/add-list-items/package.json
index c5e1ee3049..c5a3cb3b4a 100644
--- a/samples/grids/list/add-list-items/package.json
+++ b/samples/grids/list/add-list-items/package.json
@@ -24,7 +24,7 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit": "^3.2.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
diff --git a/samples/grids/pivot-grid/aggregate-max-sales/package.json b/samples/grids/pivot-grid/aggregate-max-sales/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/pivot-grid/aggregate-max-sales/package.json
+++ b/samples/grids/pivot-grid/aggregate-max-sales/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/aggregate-max-sales/sandbox.config.json b/samples/grids/pivot-grid/aggregate-max-sales/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/pivot-grid/aggregate-max-sales/sandbox.config.json
+++ b/samples/grids/pivot-grid/aggregate-max-sales/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/aggregate-max-sales/src/index.css b/samples/grids/pivot-grid/aggregate-max-sales/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/pivot-grid/aggregate-max-sales/src/index.css
+++ b/samples/grids/pivot-grid/aggregate-max-sales/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/aggregate-max-sales/src/index.ts b/samples/grids/pivot-grid/aggregate-max-sales/src/index.ts
index c1623b0f4f..6a5c81995b 100644
--- a/samples/grids/pivot-grid/aggregate-max-sales/src/index.ts
+++ b/samples/grids/pivot-grid/aggregate-max-sales/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcPivotGridComponent, IgcPivotConfiguration, IgcPivotDimension, IgcPivotValue, IgcPivotAggregator } from 'igniteui-webcomponents-grids/grids';
 import { PivotSalesDataItem, PivotSalesData } from './PivotSalesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcPivotGridComponent
@@ -40,6 +40,7 @@ export class Sample {
         }
         return this._pivotConfiguration1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -50,7 +51,6 @@ export class Sample {
             grid.pivotConfiguration = this.pivotConfiguration1;
         }
         this._bind();
-
     }
 
     private _pivotSalesData: PivotSalesData = null;
@@ -62,7 +62,6 @@ export class Sample {
         return this._pivotSalesData;
     }
 
-
     public pivotSalesDataAggregateMaxSales(members: any[], data: any[]): any[] {
         if (!data) {
             return [];
diff --git a/samples/grids/pivot-grid/aggregate-max-sales/tsconfig.json b/samples/grids/pivot-grid/aggregate-max-sales/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/pivot-grid/aggregate-max-sales/tsconfig.json
+++ b/samples/grids/pivot-grid/aggregate-max-sales/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/pivot-grid/aggregate-max-sales/webpack.config.js b/samples/grids/pivot-grid/aggregate-max-sales/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/pivot-grid/aggregate-max-sales/webpack.config.js
+++ b/samples/grids/pivot-grid/aggregate-max-sales/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/pivot-grid/aggregate-units-sold/package.json b/samples/grids/pivot-grid/aggregate-units-sold/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/pivot-grid/aggregate-units-sold/package.json
+++ b/samples/grids/pivot-grid/aggregate-units-sold/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/aggregate-units-sold/sandbox.config.json b/samples/grids/pivot-grid/aggregate-units-sold/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/pivot-grid/aggregate-units-sold/sandbox.config.json
+++ b/samples/grids/pivot-grid/aggregate-units-sold/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/aggregate-units-sold/src/index.css b/samples/grids/pivot-grid/aggregate-units-sold/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/pivot-grid/aggregate-units-sold/src/index.css
+++ b/samples/grids/pivot-grid/aggregate-units-sold/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/aggregate-units-sold/src/index.ts b/samples/grids/pivot-grid/aggregate-units-sold/src/index.ts
index 3aac431310..fc0b6d09d9 100644
--- a/samples/grids/pivot-grid/aggregate-units-sold/src/index.ts
+++ b/samples/grids/pivot-grid/aggregate-units-sold/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcPivotGridComponent, IgcPivotConfiguration, IgcPivotDimension, IgcPivotValue, IgcPivotAggregator } from 'igniteui-webcomponents-grids/grids';
 import { PivotSalesDataItem, PivotSalesData } from './PivotSalesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcPivotGridComponent
@@ -41,6 +41,7 @@ export class Sample {
         }
         return this._pivotConfiguration1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -51,7 +52,6 @@ export class Sample {
             grid.pivotConfiguration = this.pivotConfiguration1;
         }
         this._bind();
-
     }
 
     private _pivotSalesData: PivotSalesData = null;
@@ -63,7 +63,6 @@ export class Sample {
         return this._pivotSalesData;
     }
 
-
     public pivotSalesDataAggregateUnitsSold(members: any[], data: any[]): any {
         return data.reduce((accumulator, item) => accumulator + (item.UnitsSold * item.SalePrice), 0);
     }
diff --git a/samples/grids/pivot-grid/aggregate-units-sold/tsconfig.json b/samples/grids/pivot-grid/aggregate-units-sold/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/pivot-grid/aggregate-units-sold/tsconfig.json
+++ b/samples/grids/pivot-grid/aggregate-units-sold/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/pivot-grid/aggregate-units-sold/webpack.config.js b/samples/grids/pivot-grid/aggregate-units-sold/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/pivot-grid/aggregate-units-sold/webpack.config.js
+++ b/samples/grids/pivot-grid/aggregate-units-sold/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/pivot-grid/basic/package.json b/samples/grids/pivot-grid/basic/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/pivot-grid/basic/package.json
+++ b/samples/grids/pivot-grid/basic/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/basic/sandbox.config.json b/samples/grids/pivot-grid/basic/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/pivot-grid/basic/sandbox.config.json
+++ b/samples/grids/pivot-grid/basic/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/basic/src/index.ts b/samples/grids/pivot-grid/basic/src/index.ts
index 606f736700..7ba3c7540d 100644
--- a/samples/grids/pivot-grid/basic/src/index.ts
+++ b/samples/grids/pivot-grid/basic/src/index.ts
@@ -1,9 +1,9 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcPivotGridComponent, IgcPivotConfiguration, IgcPivotDimension, IgcPivotValue, IgcPivotAggregator } from 'igniteui-webcomponents-grids/grids';
 import { PivotSalesDataItem, PivotSalesData } from './PivotSalesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 
+
 export class Sample {
 
     private grid: IgcPivotGridComponent
@@ -42,6 +42,7 @@ export class Sample {
         }
         return this._pivotConfiguration1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -52,7 +53,6 @@ export class Sample {
             grid.data = this.pivotSalesData
         }
         this._bind();
-
     }
 
     private _pivotSalesData: PivotSalesData = null;
diff --git a/samples/grids/pivot-grid/basic/tsconfig.json b/samples/grids/pivot-grid/basic/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/pivot-grid/basic/tsconfig.json
+++ b/samples/grids/pivot-grid/basic/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/pivot-grid/data-persistence-noop/package.json b/samples/grids/pivot-grid/data-persistence-noop/package.json
index 3df29ea9b1..3a22776bd3 100644
--- a/samples/grids/pivot-grid/data-persistence-noop/package.json
+++ b/samples/grids/pivot-grid/data-persistence-noop/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/data-persistence-noop/sandbox.config.json b/samples/grids/pivot-grid/data-persistence-noop/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/pivot-grid/data-persistence-noop/sandbox.config.json
+++ b/samples/grids/pivot-grid/data-persistence-noop/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/data-persistence-noop/src/index.css b/samples/grids/pivot-grid/data-persistence-noop/src/index.css
index 5855f3765e..0fe9368715 100644
--- a/samples/grids/pivot-grid/data-persistence-noop/src/index.css
+++ b/samples/grids/pivot-grid/data-persistence-noop/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.horizontal {
-  gap: 1rem;
-  padding: 0.5rem
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/data-persistence-noop/src/index.ts b/samples/grids/pivot-grid/data-persistence-noop/src/index.ts
index 7c779d8b07..5516ac973c 100644
--- a/samples/grids/pivot-grid/data-persistence-noop/src/index.ts
+++ b/samples/grids/pivot-grid/data-persistence-noop/src/index.ts
@@ -52,6 +52,7 @@ export class Sample {
         ],
         filters: null
     };
+
     public stateKey = 'pivot-grid-state';
     private _gridState: IgcGridStateComponent;
 
@@ -95,7 +96,7 @@ export class Sample {
     public clearStorage() {
         window.localStorage.removeItem(this.stateKey);
     }
-    
+
     public stateParsedHandler(ev: any) {
         const parsedState = ev.detail;
         parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance();
diff --git a/samples/grids/pivot-grid/data-persistence-noop/tsconfig.json b/samples/grids/pivot-grid/data-persistence-noop/tsconfig.json
index 220404df76..de23257dd8 100644
--- a/samples/grids/pivot-grid/data-persistence-noop/tsconfig.json
+++ b/samples/grids/pivot-grid/data-persistence-noop/tsconfig.json
@@ -1,5 +1,5 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
       "noImplicitReturns": true,
       "esModuleInterop": true,
       "noImplicitAny": true,
@@ -8,32 +8,13 @@
       "declaration": true,
       "target": "es2015",
       "module": "es2015",
-      "strict": true,
-      "strictNullChecks": false,
-      "baseUrl": ".",
-      "paths": {
-        "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-        "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-        "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-        "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-        "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-        "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-        "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-        "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-        "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-        "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-        "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-        "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-        "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-        "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-        "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-      }
-    },
-    "include": [
-        "src/**/*"
-    ],
-    "exclude": [
-        "node_modules",
-        "dist"
-    ]
-  }
\ No newline at end of file
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/data-persistence-noop/webpack.config.js b/samples/grids/pivot-grid/data-persistence-noop/webpack.config.js
index 1c50333f6c..9d11a6155c 100644
--- a/samples/grids/pivot-grid/data-persistence-noop/webpack.config.js
+++ b/samples/grids/pivot-grid/data-persistence-noop/webpack.config.js
@@ -1,15 +1,32 @@
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
 
-const nodeEnv = process.env.NODE_ENV || 'development';
-
 module.exports = env => {
-    console.log("env:");
-    console.log(env);
-    const isLegacy = !!env.legacy && !(env.legacy == "false");
-    const isProd = env.NODE_ENV === 'production';
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
     return {
         entry: isLegacy ? [
             path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
@@ -18,13 +35,19 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: isProd ? '[chunkhash].bundle.js' : '[hash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
 
         resolve: {
-            mainFields: ['fesm2015', 'module', 'main'],
-            extensions: ['.ts', '.js', '.json']
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
         },
 
         module: {
@@ -33,25 +56,27 @@ module.exports = env => {
                 { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
                 { test: /\.xml$/, use: ['xml-loader'] },
                 { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
                 {
                     test: /\.(ts|js)$/, loader: 'babel-loader',
                     options: {
                         "compact": isProd ? true : false,
-                        "presets": [
-                            ["@babel/preset-env", {
-                                "useBuiltIns": "usage",
-                                "corejs": 3,
-                                "targets": {
-                                    "browsers": isLegacy ? ["defaults"] : [
-                                        "last 2 Chrome versions",
-                                        "last 2 Safari versions",
-                                        "last 2 iOS versions",
-                                        "last 2 Firefox versions",
-                                        "last 2 Edge versions"]
-                                }
-                            }],
-                            "@babel/preset-typescript"
-                        ],
+                        "presets": presets,
                         "plugins": [
                             "@babel/plugin-proposal-class-properties",
                             "@babel/plugin-transform-runtime"
@@ -68,9 +93,7 @@ module.exports = env => {
 
         plugins: [
             new webpack.DefinePlugin({
-                'process.env': {
-                    NODE_ENV: JSON.stringify(nodeEnv)
-                }
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
                 title: 'for-cs',
@@ -79,4 +102,4 @@ module.exports = env => {
             new ForkTsCheckerWebpackPlugin()
         ]
     };
-};
\ No newline at end of file
+};
diff --git a/samples/grids/pivot-grid/data-selector/package.json b/samples/grids/pivot-grid/data-selector/package.json
index 74cf0f3874..2770b7c7ce 100644
--- a/samples/grids/pivot-grid/data-selector/package.json
+++ b/samples/grids/pivot-grid/data-selector/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/data-selector/sandbox.config.json b/samples/grids/pivot-grid/data-selector/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/pivot-grid/data-selector/sandbox.config.json
+++ b/samples/grids/pivot-grid/data-selector/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/data-selector/src/index.ts b/samples/grids/pivot-grid/data-selector/src/index.ts
index 9158819026..398a7ee51a 100644
--- a/samples/grids/pivot-grid/data-selector/src/index.ts
+++ b/samples/grids/pivot-grid/data-selector/src/index.ts
@@ -3,7 +3,6 @@ import { IgcPivotGridComponent, IgcPivotConfiguration, IgcPivotDataSelectorCompo
 import { PivotSalesData } from './PivotSalesData';
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 
-
 export class Sample {
     private _pivotConfiguration: any | null = null;
     public get pivotConfiguration(): any {
@@ -64,6 +63,7 @@ export class Sample {
         }
         return this._pivotConfiguration;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -75,7 +75,6 @@ export class Sample {
             selector.grid = grid;
         }
         this._bind();
-
     }
 
     private _pivotSalesData: PivotSalesData = null;
@@ -87,8 +86,6 @@ export class Sample {
         return this._pivotSalesData;
     }
 
-
-
 }
 
 new Sample();
diff --git a/samples/grids/pivot-grid/data-selector/tsconfig.json b/samples/grids/pivot-grid/data-selector/tsconfig.json
index 7e425ddd12..de23257dd8 100644
--- a/samples/grids/pivot-grid/data-selector/tsconfig.json
+++ b/samples/grids/pivot-grid/data-selector/tsconfig.json
@@ -8,8 +8,7 @@
       "declaration": true,
       "target": "es2015",
       "module": "es2015",
-      "strict": true,
-      "strictNullChecks": false
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/pivot-grid/features/package.json b/samples/grids/pivot-grid/features/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/pivot-grid/features/package.json
+++ b/samples/grids/pivot-grid/features/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/features/sandbox.config.json b/samples/grids/pivot-grid/features/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/pivot-grid/features/sandbox.config.json
+++ b/samples/grids/pivot-grid/features/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/features/src/index.css b/samples/grids/pivot-grid/features/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/pivot-grid/features/src/index.css
+++ b/samples/grids/pivot-grid/features/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/features/src/index.ts b/samples/grids/pivot-grid/features/src/index.ts
index d88ea2c82d..9bca0ec265 100644
--- a/samples/grids/pivot-grid/features/src/index.ts
+++ b/samples/grids/pivot-grid/features/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcPivotGridComponent, IgcPivotConfiguration, IgcPivotDateDimension, IgcPivotDimension, IgcPivotDateDimensionOptions, SortingDirection, IgcPivotValue, IgcPivotAggregator } from 'igniteui-webcomponents-grids/grids';
 import { PivotDataFlatItem, PivotDataFlat } from './PivotDataFlat';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcPivotGridComponent
@@ -80,6 +80,7 @@ export class Sample {
         }
         return this._pivotConfiguration1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -90,7 +91,6 @@ export class Sample {
             grid.pivotConfiguration = this.pivotConfiguration1;
         }
         this._bind();
-
     }
 
     private _pivotDataFlat: PivotDataFlat = null;
@@ -102,7 +102,6 @@ export class Sample {
         return this._pivotDataFlat;
     }
 
-
     public pivotDataFlatAggregateSumSale(members: any[], data: any[]): any {
         return data.reduce((accumulator, value) => accumulator + value.ProductUnitPrice * value.NumberOfUnits, 0);
     }
diff --git a/samples/grids/pivot-grid/features/tsconfig.json b/samples/grids/pivot-grid/features/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/pivot-grid/features/tsconfig.json
+++ b/samples/grids/pivot-grid/features/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/pivot-grid/features/webpack.config.js b/samples/grids/pivot-grid/features/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/pivot-grid/features/webpack.config.js
+++ b/samples/grids/pivot-grid/features/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/pivot-grid/remote/package.json b/samples/grids/pivot-grid/remote/package.json
index 74cf0f3874..2770b7c7ce 100644
--- a/samples/grids/pivot-grid/remote/package.json
+++ b/samples/grids/pivot-grid/remote/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/remote/sandbox.config.json b/samples/grids/pivot-grid/remote/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/pivot-grid/remote/sandbox.config.json
+++ b/samples/grids/pivot-grid/remote/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/remote/src/index.ts b/samples/grids/pivot-grid/remote/src/index.ts
index a840c4bacb..5dec336f7f 100644
--- a/samples/grids/pivot-grid/remote/src/index.ts
+++ b/samples/grids/pivot-grid/remote/src/index.ts
@@ -56,6 +56,7 @@ export class Sample {
         }
         return this._pivotConfiguration;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -71,4 +72,4 @@ export class Sample {
     }
 }
 
-new Sample();
\ No newline at end of file
+new Sample();
diff --git a/samples/grids/pivot-grid/remote/tsconfig.json b/samples/grids/pivot-grid/remote/tsconfig.json
index 220404df76..de23257dd8 100644
--- a/samples/grids/pivot-grid/remote/tsconfig.json
+++ b/samples/grids/pivot-grid/remote/tsconfig.json
@@ -1,5 +1,5 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
       "noImplicitReturns": true,
       "esModuleInterop": true,
       "noImplicitAny": true,
@@ -8,32 +8,13 @@
       "declaration": true,
       "target": "es2015",
       "module": "es2015",
-      "strict": true,
-      "strictNullChecks": false,
-      "baseUrl": ".",
-      "paths": {
-        "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-        "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-        "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-        "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-        "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-        "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-        "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-        "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-        "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-        "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-        "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-        "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-        "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-        "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-        "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-      }
-    },
-    "include": [
-        "src/**/*"
-    ],
-    "exclude": [
-        "node_modules",
-        "dist"
-    ]
-  }
\ No newline at end of file
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/remote/webpack.config.js b/samples/grids/pivot-grid/remote/webpack.config.js
index 1c50333f6c..9d11a6155c 100644
--- a/samples/grids/pivot-grid/remote/webpack.config.js
+++ b/samples/grids/pivot-grid/remote/webpack.config.js
@@ -1,15 +1,32 @@
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
 
-const nodeEnv = process.env.NODE_ENV || 'development';
-
 module.exports = env => {
-    console.log("env:");
-    console.log(env);
-    const isLegacy = !!env.legacy && !(env.legacy == "false");
-    const isProd = env.NODE_ENV === 'production';
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
     return {
         entry: isLegacy ? [
             path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
@@ -18,13 +35,19 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: isProd ? '[chunkhash].bundle.js' : '[hash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
 
         resolve: {
-            mainFields: ['fesm2015', 'module', 'main'],
-            extensions: ['.ts', '.js', '.json']
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
         },
 
         module: {
@@ -33,25 +56,27 @@ module.exports = env => {
                 { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
                 { test: /\.xml$/, use: ['xml-loader'] },
                 { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
                 {
                     test: /\.(ts|js)$/, loader: 'babel-loader',
                     options: {
                         "compact": isProd ? true : false,
-                        "presets": [
-                            ["@babel/preset-env", {
-                                "useBuiltIns": "usage",
-                                "corejs": 3,
-                                "targets": {
-                                    "browsers": isLegacy ? ["defaults"] : [
-                                        "last 2 Chrome versions",
-                                        "last 2 Safari versions",
-                                        "last 2 iOS versions",
-                                        "last 2 Firefox versions",
-                                        "last 2 Edge versions"]
-                                }
-                            }],
-                            "@babel/preset-typescript"
-                        ],
+                        "presets": presets,
                         "plugins": [
                             "@babel/plugin-proposal-class-properties",
                             "@babel/plugin-transform-runtime"
@@ -68,9 +93,7 @@ module.exports = env => {
 
         plugins: [
             new webpack.DefinePlugin({
-                'process.env': {
-                    NODE_ENV: JSON.stringify(nodeEnv)
-                }
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
                 title: 'for-cs',
@@ -79,4 +102,4 @@ module.exports = env => {
             new ForkTsCheckerWebpackPlugin()
         ]
     };
-};
\ No newline at end of file
+};
diff --git a/samples/grids/pivot-grid/state-persistence-about/package.json b/samples/grids/pivot-grid/state-persistence-about/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/pivot-grid/state-persistence-about/package.json
+++ b/samples/grids/pivot-grid/state-persistence-about/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/state-persistence-about/tsconfig.json b/samples/grids/pivot-grid/state-persistence-about/tsconfig.json
index 2c74e00627..de23257dd8 100644
--- a/samples/grids/pivot-grid/state-persistence-about/tsconfig.json
+++ b/samples/grids/pivot-grid/state-persistence-about/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/pivot-grid/state-persistence-about/webpack.config.js b/samples/grids/pivot-grid/state-persistence-about/webpack.config.js
index 4f82e885b8..9d11a6155c 100644
--- a/samples/grids/pivot-grid/state-persistence-about/webpack.config.js
+++ b/samples/grids/pivot-grid/state-persistence-about/webpack.config.js
@@ -35,7 +35,7 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: '[name].[fullhash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
             globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
@@ -96,8 +96,8 @@ module.exports = env => {
                 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: 'index-cs',
-                template: 'index.html',
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/pivot-grid/state-persistence-main/package.json b/samples/grids/pivot-grid/state-persistence-main/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/pivot-grid/state-persistence-main/package.json
+++ b/samples/grids/pivot-grid/state-persistence-main/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/pivot-grid/state-persistence-main/src/index.css b/samples/grids/pivot-grid/state-persistence-main/src/index.css
index 6aa735e3c7..0fe9368715 100644
--- a/samples/grids/pivot-grid/state-persistence-main/src/index.css
+++ b/samples/grids/pivot-grid/state-persistence-main/src/index.css
@@ -1,19 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.horizontal {
-    gap: 10px;
-    flex-basis: fit-content;
-    flex-wrap: wrap;
-}
-.sampleContainer {
-  padding: 0.5rem
-}
-
-.upFontValue {
-  color: hsla(var(--ig-success-500));
-}
-
-.downFontValue {
-  color: hsla(var(--ig-error-500));
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/pivot-grid/state-persistence-main/src/index.ts b/samples/grids/pivot-grid/state-persistence-main/src/index.ts
index 86f4132afb..55ce5ec337 100644
--- a/samples/grids/pivot-grid/state-persistence-main/src/index.ts
+++ b/samples/grids/pivot-grid/state-persistence-main/src/index.ts
@@ -27,6 +27,7 @@ export class Sample {
         expansion: true,
         pivotConfiguration: true
     };
+
     private columnsLoaded: Promise<void>;
 
     public totalSale = (members: any, data: any) =>
@@ -35,7 +36,7 @@ export class Sample {
     public totalMin = (members: any, data: any) => {
         return data.map((x: any) => x.ProductUnitPrice * x.NumberOfUnits).reduce((a: any, b: any) => Math.min(a, b));
     };
-    
+
     public totalMax = (members: any, data: any) => {
         return data.map((x: any) => x.ProductUnitPrice * x.NumberOfUnits).reduce((a: any, b: any) => Math.max(a,b));
     };
@@ -198,7 +199,6 @@ export class Sample {
 
         grid.data = this.gridData;
         grid.pivotConfiguration = this.pivotConfiguration;
-
         grid.addEventListener("columnInit", (ev: any) => { this.onColumnInit(ev); });
         grid.addEventListener("valueInit", (ev:any) => this.onValueInit(ev));
         grid.addEventListener("dimensionInit", (ev:any) => this.onDimensionInit(ev));
@@ -214,9 +214,9 @@ export class Sample {
             cb.addEventListener("igcChange", (ev: CustomEvent) => { this.onChange(ev, cb.id); });
         });
 
-        window.addEventListener("load", async () => { 
+        window.addEventListener("load", async () => {
             await this.columnsLoaded;
-            this.restoreGridState(); 
+            this.restoreGridState();
         });
         window.addEventListener("beforeunload", () => { this.saveGridState(); });
     }
@@ -270,7 +270,7 @@ export class Sample {
         window.location.reload();
     }
 
-    private onColumnInit(event: any) { 
+    private onColumnInit(event: any) {
         if(event.detail.index === this.grid.columns.length - 1) {
            this.columnsLoaded = new Promise((resolve) => resolve());
         }
diff --git a/samples/grids/pivot-grid/state-persistence-main/tsconfig.json b/samples/grids/pivot-grid/state-persistence-main/tsconfig.json
index 2c74e00627..de23257dd8 100644
--- a/samples/grids/pivot-grid/state-persistence-main/tsconfig.json
+++ b/samples/grids/pivot-grid/state-persistence-main/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/pivot-grid/state-persistence-main/webpack.config.js b/samples/grids/pivot-grid/state-persistence-main/webpack.config.js
index 4f82e885b8..9d11a6155c 100644
--- a/samples/grids/pivot-grid/state-persistence-main/webpack.config.js
+++ b/samples/grids/pivot-grid/state-persistence-main/webpack.config.js
@@ -35,7 +35,7 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: '[name].[fullhash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
             globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
@@ -96,8 +96,8 @@ module.exports = env => {
                 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: 'index-cs',
-                template: 'index.html',
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/tree-grid/action-strip/package.json b/samples/grids/tree-grid/action-strip/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/action-strip/package.json
+++ b/samples/grids/tree-grid/action-strip/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/action-strip/sandbox.config.json b/samples/grids/tree-grid/action-strip/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/action-strip/sandbox.config.json
+++ b/samples/grids/tree-grid/action-strip/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/action-strip/src/index.css b/samples/grids/tree-grid/action-strip/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/action-strip/src/index.css
+++ b/samples/grids/tree-grid/action-strip/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/action-strip/src/index.ts b/samples/grids/tree-grid/action-strip/src/index.ts
index a4a0ab5ece..9d136843ae 100644
--- a/samples/grids/tree-grid/action-strip/src/index.ts
+++ b/samples/grids/tree-grid/action-strip/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent, IgcActionStripComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -20,7 +20,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/action-strip/tsconfig.json b/samples/grids/tree-grid/action-strip/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/action-strip/tsconfig.json
+++ b/samples/grids/tree-grid/action-strip/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/action-strip/webpack.config.js b/samples/grids/tree-grid/action-strip/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/action-strip/webpack.config.js
+++ b/samples/grids/tree-grid/action-strip/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/advanced-filtering-options/package.json b/samples/grids/tree-grid/advanced-filtering-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/advanced-filtering-options/package.json
+++ b/samples/grids/tree-grid/advanced-filtering-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/advanced-filtering-options/sandbox.config.json b/samples/grids/tree-grid/advanced-filtering-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/advanced-filtering-options/sandbox.config.json
+++ b/samples/grids/tree-grid/advanced-filtering-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/advanced-filtering-options/src/index.css b/samples/grids/tree-grid/advanced-filtering-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/advanced-filtering-options/src/index.css
+++ b/samples/grids/tree-grid/advanced-filtering-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/advanced-filtering-options/src/index.ts b/samples/grids/tree-grid/advanced-filtering-options/src/index.ts
index f7700d84c6..87139d242d 100644
--- a/samples/grids/tree-grid/advanced-filtering-options/src/index.ts
+++ b/samples/grids/tree-grid/advanced-filtering-options/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatData;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/advanced-filtering-options/tsconfig.json b/samples/grids/tree-grid/advanced-filtering-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/advanced-filtering-options/tsconfig.json
+++ b/samples/grids/tree-grid/advanced-filtering-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/advanced-filtering-options/webpack.config.js b/samples/grids/tree-grid/advanced-filtering-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/advanced-filtering-options/webpack.config.js
+++ b/samples/grids/tree-grid/advanced-filtering-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/advanced-filtering-style/package.json b/samples/grids/tree-grid/advanced-filtering-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/advanced-filtering-style/package.json
+++ b/samples/grids/tree-grid/advanced-filtering-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/advanced-filtering-style/sandbox.config.json b/samples/grids/tree-grid/advanced-filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/advanced-filtering-style/sandbox.config.json
+++ b/samples/grids/tree-grid/advanced-filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/advanced-filtering-style/src/index.css b/samples/grids/tree-grid/advanced-filtering-style/src/index.css
index 335f12e448..0fe9368715 100644
--- a/samples/grids/tree-grid/advanced-filtering-style/src/index.css
+++ b/samples/grids/tree-grid/advanced-filtering-style/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-    --ig-grid-filtering-row-background: #ffcd0f;
-    --ig-grid-filtering-background-or: #d83434;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/advanced-filtering-style/src/index.ts b/samples/grids/tree-grid/advanced-filtering-style/src/index.ts
index f7700d84c6..87139d242d 100644
--- a/samples/grids/tree-grid/advanced-filtering-style/src/index.ts
+++ b/samples/grids/tree-grid/advanced-filtering-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatData;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/advanced-filtering-style/tsconfig.json b/samples/grids/tree-grid/advanced-filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/advanced-filtering-style/tsconfig.json
+++ b/samples/grids/tree-grid/advanced-filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/advanced-filtering-style/webpack.config.js b/samples/grids/tree-grid/advanced-filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/advanced-filtering-style/webpack.config.js
+++ b/samples/grids/tree-grid/advanced-filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/cell-editing-sample/package.json b/samples/grids/tree-grid/cell-editing-sample/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/cell-editing-sample/package.json
+++ b/samples/grids/tree-grid/cell-editing-sample/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/cell-editing-sample/sandbox.config.json b/samples/grids/tree-grid/cell-editing-sample/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/cell-editing-sample/sandbox.config.json
+++ b/samples/grids/tree-grid/cell-editing-sample/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/cell-editing-sample/src/index.css b/samples/grids/tree-grid/cell-editing-sample/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/cell-editing-sample/src/index.css
+++ b/samples/grids/tree-grid/cell-editing-sample/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/cell-editing-sample/src/index.ts b/samples/grids/tree-grid/cell-editing-sample/src/index.ts
index 241e650bc3..02fec9ec02 100644
--- a/samples/grids/tree-grid/cell-editing-sample/src/index.ts
+++ b/samples/grids/tree-grid/cell-editing-sample/src/index.ts
@@ -4,10 +4,10 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { RoleplayTreeGridDataItem, RoleplayTreeGridData } from './RoleplayTreeGridData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -33,7 +33,6 @@ export class Sample {
             column3.inlineEditorTemplate = this.webTreeGridCellEditCellTemplate;
         }
         this._bind();
-
     }
 
     private _roleplayTreeGridData: RoleplayTreeGridData = null;
diff --git a/samples/grids/tree-grid/cell-editing-sample/tsconfig.json b/samples/grids/tree-grid/cell-editing-sample/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/cell-editing-sample/tsconfig.json
+++ b/samples/grids/tree-grid/cell-editing-sample/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/cell-editing-sample/webpack.config.js b/samples/grids/tree-grid/cell-editing-sample/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/cell-editing-sample/webpack.config.js
+++ b/samples/grids/tree-grid/cell-editing-sample/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/cell-editing-styling/package.json b/samples/grids/tree-grid/cell-editing-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/cell-editing-styling/package.json
+++ b/samples/grids/tree-grid/cell-editing-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/cell-editing-styling/sandbox.config.json b/samples/grids/tree-grid/cell-editing-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/cell-editing-styling/sandbox.config.json
+++ b/samples/grids/tree-grid/cell-editing-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/cell-editing-styling/src/index.css b/samples/grids/tree-grid/cell-editing-styling/src/index.css
index d4857d687e..0fe9368715 100644
--- a/samples/grids/tree-grid/cell-editing-styling/src/index.css
+++ b/samples/grids/tree-grid/cell-editing-styling/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-	--cell-editing-background: #4567bb;
-    --cell-active-border-color: #4567bb;
-    --cell-edited-value-color: #fff;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/cell-editing-styling/src/index.ts b/samples/grids/tree-grid/cell-editing-styling/src/index.ts
index 2b6ccbd009..1dbcc70e6f 100644
--- a/samples/grids/tree-grid/cell-editing-styling/src/index.ts
+++ b/samples/grids/tree-grid/cell-editing-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebPaginatorDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesNestedTreeData;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/cell-editing-styling/tsconfig.json b/samples/grids/tree-grid/cell-editing-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/cell-editing-styling/tsconfig.json
+++ b/samples/grids/tree-grid/cell-editing-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/cell-editing-styling/webpack.config.js b/samples/grids/tree-grid/cell-editing-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/cell-editing-styling/webpack.config.js
+++ b/samples/grids/tree-grid/cell-editing-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/cell-selection-mode/package.json b/samples/grids/tree-grid/cell-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/cell-selection-mode/package.json
+++ b/samples/grids/tree-grid/cell-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/cell-selection-mode/sandbox.config.json b/samples/grids/tree-grid/cell-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/cell-selection-mode/sandbox.config.json
+++ b/samples/grids/tree-grid/cell-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/cell-selection-mode/src/index.css b/samples/grids/tree-grid/cell-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/cell-selection-mode/src/index.css
+++ b/samples/grids/tree-grid/cell-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/cell-selection-mode/src/index.ts b/samples/grids/tree-grid/cell-selection-mode/src/index.ts
index 321bf19923..dc825d7030 100644
--- a/samples/grids/tree-grid/cell-selection-mode/src/index.ts
+++ b/samples/grids/tree-grid/cell-selection-mode/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDes
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatData;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/cell-selection-mode/tsconfig.json b/samples/grids/tree-grid/cell-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/cell-selection-mode/tsconfig.json
+++ b/samples/grids/tree-grid/cell-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/cell-selection-mode/webpack.config.js b/samples/grids/tree-grid/cell-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/cell-selection-mode/webpack.config.js
+++ b/samples/grids/tree-grid/cell-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/cell-selection-style/package.json b/samples/grids/tree-grid/cell-selection-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/cell-selection-style/package.json
+++ b/samples/grids/tree-grid/cell-selection-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/cell-selection-style/sandbox.config.json b/samples/grids/tree-grid/cell-selection-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/cell-selection-style/sandbox.config.json
+++ b/samples/grids/tree-grid/cell-selection-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/cell-selection-style/src/index.css b/samples/grids/tree-grid/cell-selection-style/src/index.css
index 85e1b336ac..0fe9368715 100644
--- a/samples/grids/tree-grid/cell-selection-style/src/index.css
+++ b/samples/grids/tree-grid/cell-selection-style/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --cell-selected-text-color: #FFFFFF;
-    --cell-active-border-color: #f2c43c;
-    --cell-selected-background: #0062a3;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/cell-selection-style/src/index.ts b/samples/grids/tree-grid/cell-selection-style/src/index.ts
index 88a4ac049b..04c696e05b 100644
--- a/samples/grids/tree-grid/cell-selection-style/src/index.ts
+++ b/samples/grids/tree-grid/cell-selection-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.ordersTreeData;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/cell-selection-style/tsconfig.json b/samples/grids/tree-grid/cell-selection-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/cell-selection-style/tsconfig.json
+++ b/samples/grids/tree-grid/cell-selection-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/cell-selection-style/webpack.config.js b/samples/grids/tree-grid/cell-selection-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/cell-selection-style/webpack.config.js
+++ b/samples/grids/tree-grid/cell-selection-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/clipboard-operations/package.json b/samples/grids/tree-grid/clipboard-operations/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/tree-grid/clipboard-operations/package.json
+++ b/samples/grids/tree-grid/clipboard-operations/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/clipboard-operations/sandbox.config.json b/samples/grids/tree-grid/clipboard-operations/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/clipboard-operations/sandbox.config.json
+++ b/samples/grids/tree-grid/clipboard-operations/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/clipboard-operations/src/index.css b/samples/grids/tree-grid/clipboard-operations/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/clipboard-operations/src/index.css
+++ b/samples/grids/tree-grid/clipboard-operations/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/clipboard-operations/src/index.ts b/samples/grids/tree-grid/clipboard-operations/src/index.ts
index 6e80c2f253..267d9d2c7a 100644
--- a/samples/grids/tree-grid/clipboard-operations/src/index.ts
+++ b/samples/grids/tree-grid/clipboard-operations/src/index.ts
@@ -4,12 +4,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents, IgcButtonComponent, IgcInputComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
-defineAllComponents();
 
+defineAllComponents();
 
 export class Sample {
 
@@ -67,6 +66,7 @@ export class Sample {
         }
         return this._employeesFlatDetails;
     }
+
     public webGridClearSelection(args: any): void {
         console.log("TODO" + args);
     	//TODO
diff --git a/samples/grids/tree-grid/clipboard-operations/tsconfig.json b/samples/grids/tree-grid/clipboard-operations/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/clipboard-operations/tsconfig.json
+++ b/samples/grids/tree-grid/clipboard-operations/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-auto-sizing/package.json b/samples/grids/tree-grid/column-auto-sizing/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-auto-sizing/package.json
+++ b/samples/grids/tree-grid/column-auto-sizing/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-auto-sizing/sandbox.config.json b/samples/grids/tree-grid/column-auto-sizing/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-auto-sizing/sandbox.config.json
+++ b/samples/grids/tree-grid/column-auto-sizing/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-auto-sizing/src/index.css b/samples/grids/tree-grid/column-auto-sizing/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-auto-sizing/src/index.css
+++ b/samples/grids/tree-grid/column-auto-sizing/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-auto-sizing/src/index.ts b/samples/grids/tree-grid/column-auto-sizing/src/index.ts
index 758927c517..3b0d03dd75 100644
--- a/samples/grids/tree-grid/column-auto-sizing/src/index.ts
+++ b/samples/grids/tree-grid/column-auto-sizing/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-auto-sizing/tsconfig.json b/samples/grids/tree-grid/column-auto-sizing/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-auto-sizing/tsconfig.json
+++ b/samples/grids/tree-grid/column-auto-sizing/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-auto-sizing/webpack.config.js b/samples/grids/tree-grid/column-auto-sizing/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-auto-sizing/webpack.config.js
+++ b/samples/grids/tree-grid/column-auto-sizing/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-collapsible-groups/package.json b/samples/grids/tree-grid/column-collapsible-groups/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-collapsible-groups/package.json
+++ b/samples/grids/tree-grid/column-collapsible-groups/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-collapsible-groups/sandbox.config.json b/samples/grids/tree-grid/column-collapsible-groups/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-collapsible-groups/sandbox.config.json
+++ b/samples/grids/tree-grid/column-collapsible-groups/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-collapsible-groups/src/index.css b/samples/grids/tree-grid/column-collapsible-groups/src/index.css
index b831c3317c..0fe9368715 100644
--- a/samples/grids/tree-grid/column-collapsible-groups/src/index.css
+++ b/samples/grids/tree-grid/column-collapsible-groups/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #treeGrid {
-        --ig-size: var(--ig-size-small);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-collapsible-groups/src/index.ts b/samples/grids/tree-grid/column-collapsible-groups/src/index.ts
index 758927c517..3b0d03dd75 100644
--- a/samples/grids/tree-grid/column-collapsible-groups/src/index.ts
+++ b/samples/grids/tree-grid/column-collapsible-groups/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-collapsible-groups/tsconfig.json b/samples/grids/tree-grid/column-collapsible-groups/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-collapsible-groups/tsconfig.json
+++ b/samples/grids/tree-grid/column-collapsible-groups/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-collapsible-groups/webpack.config.js b/samples/grids/tree-grid/column-collapsible-groups/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-collapsible-groups/webpack.config.js
+++ b/samples/grids/tree-grid/column-collapsible-groups/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-data-types/package.json b/samples/grids/tree-grid/column-data-types/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/column-data-types/package.json
+++ b/samples/grids/tree-grid/column-data-types/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-data-types/sandbox.config.json b/samples/grids/tree-grid/column-data-types/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-data-types/sandbox.config.json
+++ b/samples/grids/tree-grid/column-data-types/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-data-types/src/index.css b/samples/grids/tree-grid/column-data-types/src/index.css
index f6d22d3897..0fe9368715 100644
--- a/samples/grids/tree-grid/column-data-types/src/index.css
+++ b/samples/grids/tree-grid/column-data-types/src/index.css
@@ -1,6 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-img {
-    width: 50px;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-data-types/src/index.ts b/samples/grids/tree-grid/column-data-types/src/index.ts
index 2988d46b89..8855746bb7 100644
--- a/samples/grids/tree-grid/column-data-types/src/index.ts
+++ b/samples/grids/tree-grid/column-data-types/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcColumnComponent, IgcColumnPipeArgs, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EMPLOYEES_DATA } from './EmployeesData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
     public get columnPipeArgs1(): IgcColumnPipeArgs {
         return {
diff --git a/samples/grids/tree-grid/column-data-types/tsconfig.json b/samples/grids/tree-grid/column-data-types/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-data-types/tsconfig.json
+++ b/samples/grids/tree-grid/column-data-types/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/package.json b/samples/grids/tree-grid/column-hiding-toolbar-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar-style/package.json
+++ b/samples/grids/tree-grid/column-hiding-toolbar-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/sandbox.config.json b/samples/grids/tree-grid/column-hiding-toolbar-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar-style/sandbox.config.json
+++ b/samples/grids/tree-grid/column-hiding-toolbar-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/src/index.css b/samples/grids/tree-grid/column-hiding-toolbar-style/src/index.css
index c512138626..0fe9368715 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar-style/src/index.css
+++ b/samples/grids/tree-grid/column-hiding-toolbar-style/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #treeGrid {
-        --ig-column-actions-background-color: #292826;
-        --ig-column-actions-title-color: #ffcd0f;
-        --ig-checkbox-tick-color: #292826;
-        --ig-checkbox-label-color: #ffcd0f;
-        --ig-checkbox-empty-color: #ffcd0f;
-        --ig-checkbox-fill-color: #ffcd0f;
-        --ig-input-group-idle-text-color: white;
-        --ig-input-group-filled-text-color: #ffcd0f;
-        --ig-input-group-focused-text-color: #ffcd0f;
-        --ig-input-group-focused-border-color: #ffcd0f;
-        --ig-input-group-focused-secondary-color: #ffcd0f;
-        --igx-button-foreground: #292826;
-        --igx-button-background: #ffcd0f;
-        --igx-button-hover-background: #404040;
-        --igx-button-hover-foreground: #ffcd0f;
-        --igx-button-focus-background: #ffcd0f;
-        --igx-button-focus-foreground: black;
-        --igx-button-focus-visible-background: #ffcd0f;
-        --igx-button-focus-visible-foreground: black;
-        --igx-button-disabled-foreground: #ffcd0f;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/src/index.ts b/samples/grids/tree-grid/column-hiding-toolbar-style/src/index.ts
index 161e7be49b..ba91acb185 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar-style/src/index.ts
+++ b/samples/grids/tree-grid/column-hiding-toolbar-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridToolbarDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/tsconfig.json b/samples/grids/tree-grid/column-hiding-toolbar-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar-style/tsconfig.json
+++ b/samples/grids/tree-grid/column-hiding-toolbar-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/webpack.config.js b/samples/grids/tree-grid/column-hiding-toolbar-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar-style/webpack.config.js
+++ b/samples/grids/tree-grid/column-hiding-toolbar-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-hiding-toolbar/package.json b/samples/grids/tree-grid/column-hiding-toolbar/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar/package.json
+++ b/samples/grids/tree-grid/column-hiding-toolbar/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-hiding-toolbar/sandbox.config.json b/samples/grids/tree-grid/column-hiding-toolbar/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar/sandbox.config.json
+++ b/samples/grids/tree-grid/column-hiding-toolbar/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-hiding-toolbar/src/index.css b/samples/grids/tree-grid/column-hiding-toolbar/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar/src/index.css
+++ b/samples/grids/tree-grid/column-hiding-toolbar/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-hiding-toolbar/src/index.ts b/samples/grids/tree-grid/column-hiding-toolbar/src/index.ts
index 161e7be49b..ba91acb185 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar/src/index.ts
+++ b/samples/grids/tree-grid/column-hiding-toolbar/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridToolbarDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-hiding-toolbar/tsconfig.json b/samples/grids/tree-grid/column-hiding-toolbar/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar/tsconfig.json
+++ b/samples/grids/tree-grid/column-hiding-toolbar/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-hiding-toolbar/webpack.config.js b/samples/grids/tree-grid/column-hiding-toolbar/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar/webpack.config.js
+++ b/samples/grids/tree-grid/column-hiding-toolbar/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-moving-options/package.json b/samples/grids/tree-grid/column-moving-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-moving-options/package.json
+++ b/samples/grids/tree-grid/column-moving-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-moving-options/sandbox.config.json b/samples/grids/tree-grid/column-moving-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-moving-options/sandbox.config.json
+++ b/samples/grids/tree-grid/column-moving-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-moving-options/src/index.css b/samples/grids/tree-grid/column-moving-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-moving-options/src/index.css
+++ b/samples/grids/tree-grid/column-moving-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-moving-options/src/index.ts b/samples/grids/tree-grid/column-moving-options/src/index.ts
index 4ae896d2d4..de64c36300 100644
--- a/samples/grids/tree-grid/column-moving-options/src/index.ts
+++ b/samples/grids/tree-grid/column-moving-options/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -54,7 +54,6 @@ export class Sample {
             column11.headerTemplate = this.webTreeGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-moving-options/tsconfig.json b/samples/grids/tree-grid/column-moving-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-moving-options/tsconfig.json
+++ b/samples/grids/tree-grid/column-moving-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-moving-options/webpack.config.js b/samples/grids/tree-grid/column-moving-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-moving-options/webpack.config.js
+++ b/samples/grids/tree-grid/column-moving-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-moving-styles/package.json b/samples/grids/tree-grid/column-moving-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-moving-styles/package.json
+++ b/samples/grids/tree-grid/column-moving-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-moving-styles/sandbox.config.json b/samples/grids/tree-grid/column-moving-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-moving-styles/sandbox.config.json
+++ b/samples/grids/tree-grid/column-moving-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-moving-styles/src/index.css b/samples/grids/tree-grid/column-moving-styles/src/index.css
index 2fc5e07694..0fe9368715 100644
--- a/samples/grids/tree-grid/column-moving-styles/src/index.css
+++ b/samples/grids/tree-grid/column-moving-styles/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-ghost-header-text-color: #f4d45c;
-    --ig-grid-ghost-header-background: #ad9d9d;
-    --ig-grid-ghost-header-icon-color: #f4d45c;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-moving-styles/src/index.ts b/samples/grids/tree-grid/column-moving-styles/src/index.ts
index 4ae896d2d4..de64c36300 100644
--- a/samples/grids/tree-grid/column-moving-styles/src/index.ts
+++ b/samples/grids/tree-grid/column-moving-styles/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -54,7 +54,6 @@ export class Sample {
             column11.headerTemplate = this.webTreeGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-moving-styles/tsconfig.json b/samples/grids/tree-grid/column-moving-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-moving-styles/tsconfig.json
+++ b/samples/grids/tree-grid/column-moving-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-moving-styles/webpack.config.js b/samples/grids/tree-grid/column-moving-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-moving-styles/webpack.config.js
+++ b/samples/grids/tree-grid/column-moving-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-pinning-options/package.json b/samples/grids/tree-grid/column-pinning-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-pinning-options/package.json
+++ b/samples/grids/tree-grid/column-pinning-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-pinning-options/sandbox.config.json b/samples/grids/tree-grid/column-pinning-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-pinning-options/sandbox.config.json
+++ b/samples/grids/tree-grid/column-pinning-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning-options/src/index.css b/samples/grids/tree-grid/column-pinning-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-pinning-options/src/index.css
+++ b/samples/grids/tree-grid/column-pinning-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning-options/src/index.ts b/samples/grids/tree-grid/column-pinning-options/src/index.ts
index bf53d189b2..bf5e067bfa 100644
--- a/samples/grids/tree-grid/column-pinning-options/src/index.ts
+++ b/samples/grids/tree-grid/column-pinning-options/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -39,7 +39,6 @@ export class Sample {
             column6.headerTemplate = this.webTreeGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/column-pinning-options/tsconfig.json b/samples/grids/tree-grid/column-pinning-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-pinning-options/tsconfig.json
+++ b/samples/grids/tree-grid/column-pinning-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-pinning-options/webpack.config.js b/samples/grids/tree-grid/column-pinning-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-pinning-options/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-pinning-right-side/package.json b/samples/grids/tree-grid/column-pinning-right-side/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-pinning-right-side/package.json
+++ b/samples/grids/tree-grid/column-pinning-right-side/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-pinning-right-side/sandbox.config.json b/samples/grids/tree-grid/column-pinning-right-side/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-pinning-right-side/sandbox.config.json
+++ b/samples/grids/tree-grid/column-pinning-right-side/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning-right-side/src/index.css b/samples/grids/tree-grid/column-pinning-right-side/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-pinning-right-side/src/index.css
+++ b/samples/grids/tree-grid/column-pinning-right-side/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning-right-side/src/index.ts b/samples/grids/tree-grid/column-pinning-right-side/src/index.ts
index c9f2573d12..3957984d97 100644
--- a/samples/grids/tree-grid/column-pinning-right-side/src/index.ts
+++ b/samples/grids/tree-grid/column-pinning-right-side/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent, IgcPinningConfig, ColumnPinningPosition } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -21,6 +21,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -31,7 +32,6 @@ export class Sample {
             treeGrid.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-pinning-right-side/tsconfig.json b/samples/grids/tree-grid/column-pinning-right-side/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-pinning-right-side/tsconfig.json
+++ b/samples/grids/tree-grid/column-pinning-right-side/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-pinning-right-side/webpack.config.js b/samples/grids/tree-grid/column-pinning-right-side/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-pinning-right-side/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning-right-side/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-pinning-styles/package.json b/samples/grids/tree-grid/column-pinning-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-pinning-styles/package.json
+++ b/samples/grids/tree-grid/column-pinning-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-pinning-styles/sandbox.config.json b/samples/grids/tree-grid/column-pinning-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-pinning-styles/sandbox.config.json
+++ b/samples/grids/tree-grid/column-pinning-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning-styles/src/index.css b/samples/grids/tree-grid/column-pinning-styles/src/index.css
index 484a71003a..0fe9368715 100644
--- a/samples/grids/tree-grid/column-pinning-styles/src/index.css
+++ b/samples/grids/tree-grid/column-pinning-styles/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-	--pinned-border-width: 5px;
-    --pinned-border-style: double;
-    --pinned-border-color: #FFCD0F;
-	--cell-active-border-color: #FFCD0F;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning-styles/src/index.ts b/samples/grids/tree-grid/column-pinning-styles/src/index.ts
index bf53d189b2..bf5e067bfa 100644
--- a/samples/grids/tree-grid/column-pinning-styles/src/index.ts
+++ b/samples/grids/tree-grid/column-pinning-styles/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -39,7 +39,6 @@ export class Sample {
             column6.headerTemplate = this.webTreeGridPinHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/column-pinning-styles/tsconfig.json b/samples/grids/tree-grid/column-pinning-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-pinning-styles/tsconfig.json
+++ b/samples/grids/tree-grid/column-pinning-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-pinning-styles/webpack.config.js b/samples/grids/tree-grid/column-pinning-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-pinning-styles/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-pinning-toolbar/package.json b/samples/grids/tree-grid/column-pinning-toolbar/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-pinning-toolbar/package.json
+++ b/samples/grids/tree-grid/column-pinning-toolbar/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-pinning-toolbar/sandbox.config.json b/samples/grids/tree-grid/column-pinning-toolbar/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-pinning-toolbar/sandbox.config.json
+++ b/samples/grids/tree-grid/column-pinning-toolbar/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning-toolbar/src/index.css b/samples/grids/tree-grid/column-pinning-toolbar/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-pinning-toolbar/src/index.css
+++ b/samples/grids/tree-grid/column-pinning-toolbar/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning-toolbar/src/index.ts b/samples/grids/tree-grid/column-pinning-toolbar/src/index.ts
index 758927c517..3b0d03dd75 100644
--- a/samples/grids/tree-grid/column-pinning-toolbar/src/index.ts
+++ b/samples/grids/tree-grid/column-pinning-toolbar/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-pinning-toolbar/tsconfig.json b/samples/grids/tree-grid/column-pinning-toolbar/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-pinning-toolbar/tsconfig.json
+++ b/samples/grids/tree-grid/column-pinning-toolbar/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-pinning-toolbar/webpack.config.js b/samples/grids/tree-grid/column-pinning-toolbar/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-pinning-toolbar/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning-toolbar/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-pinning/package.json b/samples/grids/tree-grid/column-pinning/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-pinning/package.json
+++ b/samples/grids/tree-grid/column-pinning/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-pinning/sandbox.config.json b/samples/grids/tree-grid/column-pinning/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-pinning/sandbox.config.json
+++ b/samples/grids/tree-grid/column-pinning/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning/src/index.css b/samples/grids/tree-grid/column-pinning/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-pinning/src/index.css
+++ b/samples/grids/tree-grid/column-pinning/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-pinning/src/index.ts b/samples/grids/tree-grid/column-pinning/src/index.ts
index f7700d84c6..87139d242d 100644
--- a/samples/grids/tree-grid/column-pinning/src/index.ts
+++ b/samples/grids/tree-grid/column-pinning/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatData;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/column-pinning/tsconfig.json b/samples/grids/tree-grid/column-pinning/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-pinning/tsconfig.json
+++ b/samples/grids/tree-grid/column-pinning/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-pinning/webpack.config.js b/samples/grids/tree-grid/column-pinning/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-pinning/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-resize-styling/package.json b/samples/grids/tree-grid/column-resize-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-resize-styling/package.json
+++ b/samples/grids/tree-grid/column-resize-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-resize-styling/sandbox.config.json b/samples/grids/tree-grid/column-resize-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-resize-styling/sandbox.config.json
+++ b/samples/grids/tree-grid/column-resize-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-resize-styling/src/index.css b/samples/grids/tree-grid/column-resize-styling/src/index.css
index 1203da6d95..0fe9368715 100644
--- a/samples/grids/tree-grid/column-resize-styling/src/index.css
+++ b/samples/grids/tree-grid/column-resize-styling/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-resize-line-color: #f35b04;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-resize-styling/src/index.ts b/samples/grids/tree-grid/column-resize-styling/src/index.ts
index d0eac77491..82581cfdcf 100644
--- a/samples/grids/tree-grid/column-resize-styling/src/index.ts
+++ b/samples/grids/tree-grid/column-resize-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-resize-styling/tsconfig.json b/samples/grids/tree-grid/column-resize-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-resize-styling/tsconfig.json
+++ b/samples/grids/tree-grid/column-resize-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-resize-styling/webpack.config.js b/samples/grids/tree-grid/column-resize-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-resize-styling/webpack.config.js
+++ b/samples/grids/tree-grid/column-resize-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-resizing/package.json b/samples/grids/tree-grid/column-resizing/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-resizing/package.json
+++ b/samples/grids/tree-grid/column-resizing/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-resizing/sandbox.config.json b/samples/grids/tree-grid/column-resizing/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-resizing/sandbox.config.json
+++ b/samples/grids/tree-grid/column-resizing/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-resizing/src/index.css b/samples/grids/tree-grid/column-resizing/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-resizing/src/index.css
+++ b/samples/grids/tree-grid/column-resizing/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-resizing/src/index.ts b/samples/grids/tree-grid/column-resizing/src/index.ts
index 758927c517..3b0d03dd75 100644
--- a/samples/grids/tree-grid/column-resizing/src/index.ts
+++ b/samples/grids/tree-grid/column-resizing/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-resizing/tsconfig.json b/samples/grids/tree-grid/column-resizing/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-resizing/tsconfig.json
+++ b/samples/grids/tree-grid/column-resizing/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-resizing/webpack.config.js b/samples/grids/tree-grid/column-resizing/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-resizing/webpack.config.js
+++ b/samples/grids/tree-grid/column-resizing/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-selection-group/package.json b/samples/grids/tree-grid/column-selection-group/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-selection-group/package.json
+++ b/samples/grids/tree-grid/column-selection-group/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-selection-group/sandbox.config.json b/samples/grids/tree-grid/column-selection-group/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-selection-group/sandbox.config.json
+++ b/samples/grids/tree-grid/column-selection-group/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-selection-group/src/index.css b/samples/grids/tree-grid/column-selection-group/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-selection-group/src/index.css
+++ b/samples/grids/tree-grid/column-selection-group/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-selection-group/src/index.ts b/samples/grids/tree-grid/column-selection-group/src/index.ts
index 75082e572b..408e1142cf 100644
--- a/samples/grids/tree-grid/column-selection-group/src/index.ts
+++ b/samples/grids/tree-grid/column-selection-group/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-selection-group/tsconfig.json b/samples/grids/tree-grid/column-selection-group/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-selection-group/tsconfig.json
+++ b/samples/grids/tree-grid/column-selection-group/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-selection-group/webpack.config.js b/samples/grids/tree-grid/column-selection-group/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-selection-group/webpack.config.js
+++ b/samples/grids/tree-grid/column-selection-group/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-selection-mode/package.json b/samples/grids/tree-grid/column-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/column-selection-mode/package.json
+++ b/samples/grids/tree-grid/column-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-selection-mode/sandbox.config.json b/samples/grids/tree-grid/column-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-selection-mode/sandbox.config.json
+++ b/samples/grids/tree-grid/column-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-selection-mode/src/index.css b/samples/grids/tree-grid/column-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-selection-mode/src/index.css
+++ b/samples/grids/tree-grid/column-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-selection-mode/src/index.ts b/samples/grids/tree-grid/column-selection-mode/src/index.ts
index 3317f0a4d6..9d756a0cd7 100644
--- a/samples/grids/tree-grid/column-selection-mode/src/index.ts
+++ b/samples/grids/tree-grid/column-selection-mode/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDes
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { FoodsDataItem, FoodsData } from './FoodsData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,7 +35,6 @@ export class Sample {
             treeGrid.data = this.foodsData;
         }
         this._bind();
-
     }
 
     private _foodsData: FoodsData = null;
diff --git a/samples/grids/tree-grid/column-selection-mode/tsconfig.json b/samples/grids/tree-grid/column-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-selection-mode/tsconfig.json
+++ b/samples/grids/tree-grid/column-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-selection-mode/webpack.config.js b/samples/grids/tree-grid/column-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-selection-mode/webpack.config.js
+++ b/samples/grids/tree-grid/column-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-selection-style/package.json b/samples/grids/tree-grid/column-selection-style/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/column-selection-style/package.json
+++ b/samples/grids/tree-grid/column-selection-style/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-selection-style/sandbox.config.json b/samples/grids/tree-grid/column-selection-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-selection-style/sandbox.config.json
+++ b/samples/grids/tree-grid/column-selection-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-selection-style/src/index.css b/samples/grids/tree-grid/column-selection-style/src/index.css
index 3b1a2d1712..0fe9368715 100644
--- a/samples/grids/tree-grid/column-selection-style/src/index.css
+++ b/samples/grids/tree-grid/column-selection-style/src/index.css
@@ -1,13 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-	--ig-grid-row-selected-background: #0062A3;
-    --ig-grid-row-selected-text-color: #ecaa53;
-    --ig-grid-row-selected-hover-background: #0062A3;
-    --ig-grid-header-selected-text-color: #ecaa53;
-    --ig-grid-header-selected-background: #0062A3;
-    --ig-grid-row-selected-hover-text-color: #ecaa53;
-    --ig-grid-row-selected-hover-background: #0062A3;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-selection-style/src/index.ts b/samples/grids/tree-grid/column-selection-style/src/index.ts
index 75082e572b..408e1142cf 100644
--- a/samples/grids/tree-grid/column-selection-style/src/index.ts
+++ b/samples/grids/tree-grid/column-selection-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-selection-style/tsconfig.json b/samples/grids/tree-grid/column-selection-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-selection-style/tsconfig.json
+++ b/samples/grids/tree-grid/column-selection-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-selection-styles/package.json b/samples/grids/tree-grid/column-selection-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-selection-styles/package.json
+++ b/samples/grids/tree-grid/column-selection-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-selection-styles/sandbox.config.json b/samples/grids/tree-grid/column-selection-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-selection-styles/sandbox.config.json
+++ b/samples/grids/tree-grid/column-selection-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-selection-styles/src/index.css b/samples/grids/tree-grid/column-selection-styles/src/index.css
index 3b1a2d1712..0fe9368715 100644
--- a/samples/grids/tree-grid/column-selection-styles/src/index.css
+++ b/samples/grids/tree-grid/column-selection-styles/src/index.css
@@ -1,13 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-	--ig-grid-row-selected-background: #0062A3;
-    --ig-grid-row-selected-text-color: #ecaa53;
-    --ig-grid-row-selected-hover-background: #0062A3;
-    --ig-grid-header-selected-text-color: #ecaa53;
-    --ig-grid-header-selected-background: #0062A3;
-    --ig-grid-row-selected-hover-text-color: #ecaa53;
-    --ig-grid-row-selected-hover-background: #0062A3;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-selection-styles/src/index.ts b/samples/grids/tree-grid/column-selection-styles/src/index.ts
index 75082e572b..408e1142cf 100644
--- a/samples/grids/tree-grid/column-selection-styles/src/index.ts
+++ b/samples/grids/tree-grid/column-selection-styles/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/column-selection-styles/tsconfig.json b/samples/grids/tree-grid/column-selection-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-selection-styles/tsconfig.json
+++ b/samples/grids/tree-grid/column-selection-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-selection-styles/webpack.config.js b/samples/grids/tree-grid/column-selection-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-selection-styles/webpack.config.js
+++ b/samples/grids/tree-grid/column-selection-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-sorting-indicators/package.json b/samples/grids/tree-grid/column-sorting-indicators/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-sorting-indicators/package.json
+++ b/samples/grids/tree-grid/column-sorting-indicators/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-sorting-indicators/sandbox.config.json b/samples/grids/tree-grid/column-sorting-indicators/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-sorting-indicators/sandbox.config.json
+++ b/samples/grids/tree-grid/column-sorting-indicators/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-indicators/src/index.css b/samples/grids/tree-grid/column-sorting-indicators/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-sorting-indicators/src/index.css
+++ b/samples/grids/tree-grid/column-sorting-indicators/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-indicators/src/index.ts b/samples/grids/tree-grid/column-sorting-indicators/src/index.ts
index 9c6ae2a204..63045f9a44 100644
--- a/samples/grids/tree-grid/column-sorting-indicators/src/index.ts
+++ b/samples/grids/tree-grid/column-sorting-indicators/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent, IgcSortingExpression, SortingDirection, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcTreeGridComponent
@@ -60,6 +60,7 @@ export class Sample {
         }
         return this._sortingExpression1;
     }
+
     private column1: IgcColumnComponent
     private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs1(): IgcColumnPipeArgs {
@@ -73,6 +74,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -85,7 +87,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/column-sorting-indicators/tsconfig.json b/samples/grids/tree-grid/column-sorting-indicators/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-sorting-indicators/tsconfig.json
+++ b/samples/grids/tree-grid/column-sorting-indicators/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js b/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js
+++ b/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-sorting-options/package.json b/samples/grids/tree-grid/column-sorting-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/column-sorting-options/package.json
+++ b/samples/grids/tree-grid/column-sorting-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-sorting-options/sandbox.config.json b/samples/grids/tree-grid/column-sorting-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-sorting-options/sandbox.config.json
+++ b/samples/grids/tree-grid/column-sorting-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-options/src/index.css b/samples/grids/tree-grid/column-sorting-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/column-sorting-options/src/index.css
+++ b/samples/grids/tree-grid/column-sorting-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-options/src/index.ts b/samples/grids/tree-grid/column-sorting-options/src/index.ts
index 26549218ee..7f8349399a 100644
--- a/samples/grids/tree-grid/column-sorting-options/src/index.ts
+++ b/samples/grids/tree-grid/column-sorting-options/src/index.ts
@@ -6,11 +6,11 @@ import { IgcTreeGridComponent, IgcSortingExpression, SortingDirection, IgcColumn
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -40,6 +40,7 @@ export class Sample {
         }
         return this._sortingExpression1;
     }
+
     private column1: IgcColumnComponent
     private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
     public get columnPipeArgs1(): IgcColumnPipeArgs {
@@ -53,6 +54,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -72,7 +74,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/column-sorting-options/tsconfig.json b/samples/grids/tree-grid/column-sorting-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-sorting-options/tsconfig.json
+++ b/samples/grids/tree-grid/column-sorting-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-sorting-options/webpack.config.js b/samples/grids/tree-grid/column-sorting-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-sorting-options/webpack.config.js
+++ b/samples/grids/tree-grid/column-sorting-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/column-sorting-style/package.json b/samples/grids/tree-grid/column-sorting-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/column-sorting-style/package.json
+++ b/samples/grids/tree-grid/column-sorting-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/column-sorting-style/sandbox.config.json b/samples/grids/tree-grid/column-sorting-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/column-sorting-style/sandbox.config.json
+++ b/samples/grids/tree-grid/column-sorting-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-style/src/index.css b/samples/grids/tree-grid/column-sorting-style/src/index.css
index 4c1b0d1952..0fe9368715 100644
--- a/samples/grids/tree-grid/column-sorting-style/src/index.css
+++ b/samples/grids/tree-grid/column-sorting-style/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-grid-sorted-header-icon-color: #ffb06a;
-    --ig-grid-sortable-header-icon-hover-color: black;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-style/src/index.ts b/samples/grids/tree-grid/column-sorting-style/src/index.ts
index 115f10d0b2..ea7ec6eb27 100644
--- a/samples/grids/tree-grid/column-sorting-style/src/index.ts
+++ b/samples/grids/tree-grid/column-sorting-style/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -29,6 +29,7 @@ export class Sample {
         }
         return this._columnPipeArgs1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -40,7 +41,6 @@ export class Sample {
             column1.pipeArgs = this.columnPipeArgs1;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/column-sorting-style/tsconfig.json b/samples/grids/tree-grid/column-sorting-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/column-sorting-style/tsconfig.json
+++ b/samples/grids/tree-grid/column-sorting-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/column-sorting-style/webpack.config.js b/samples/grids/tree-grid/column-sorting-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/column-sorting-style/webpack.config.js
+++ b/samples/grids/tree-grid/column-sorting-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/conditional-cell-style-1/package.json b/samples/grids/tree-grid/conditional-cell-style-1/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/conditional-cell-style-1/package.json
+++ b/samples/grids/tree-grid/conditional-cell-style-1/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/conditional-cell-style-1/sandbox.config.json b/samples/grids/tree-grid/conditional-cell-style-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/conditional-cell-style-1/sandbox.config.json
+++ b/samples/grids/tree-grid/conditional-cell-style-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/conditional-cell-style-1/src/index.css b/samples/grids/tree-grid/conditional-cell-style-1/src/index.css
index 03ca37d167..0fe9368715 100644
--- a/samples/grids/tree-grid/conditional-cell-style-1/src/index.css
+++ b/samples/grids/tree-grid/conditional-cell-style-1/src/index.css
@@ -1,15 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.allergensFont {
-    color: royalblue !important;
-}
-
-.upPrice {
-    color: red !important;
-}
-
-.downPrice {
-    color: green !important;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/conditional-cell-style-1/src/index.ts b/samples/grids/tree-grid/conditional-cell-style-1/src/index.ts
index 52ac3176ce..616bf3a21c 100644
--- a/samples/grids/tree-grid/conditional-cell-style-1/src/index.ts
+++ b/samples/grids/tree-grid/conditional-cell-style-1/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             column2.cellClasses = this.webTreeGridUnitPriceCellClassesHandler;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
@@ -36,7 +35,6 @@ export class Sample {
         return this._ordersTreeData;
     }
 
-
     public allergenItems = ['Frozen Shrimps', 'Wild Salmon Fillets', 'Fresh Cheese', 'Skimmed Milk 1L', 'Butter'];
 
     public webTreeGridAllergensCellClassesHandler = {
diff --git a/samples/grids/tree-grid/conditional-cell-style-1/tsconfig.json b/samples/grids/tree-grid/conditional-cell-style-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/conditional-cell-style-1/tsconfig.json
+++ b/samples/grids/tree-grid/conditional-cell-style-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/conditional-cell-style-1/webpack.config.js b/samples/grids/tree-grid/conditional-cell-style-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/conditional-cell-style-1/webpack.config.js
+++ b/samples/grids/tree-grid/conditional-cell-style-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/conditional-cell-style-2/package.json b/samples/grids/tree-grid/conditional-cell-style-2/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/conditional-cell-style-2/package.json
+++ b/samples/grids/tree-grid/conditional-cell-style-2/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/conditional-cell-style-2/sandbox.config.json b/samples/grids/tree-grid/conditional-cell-style-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/conditional-cell-style-2/sandbox.config.json
+++ b/samples/grids/tree-grid/conditional-cell-style-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/conditional-cell-style-2/src/index.css b/samples/grids/tree-grid/conditional-cell-style-2/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/conditional-cell-style-2/src/index.css
+++ b/samples/grids/tree-grid/conditional-cell-style-2/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/conditional-cell-style-2/src/index.ts b/samples/grids/tree-grid/conditional-cell-style-2/src/index.ts
index 40709634ba..1a467905c0 100644
--- a/samples/grids/tree-grid/conditional-cell-style-2/src/index.ts
+++ b/samples/grids/tree-grid/conditional-cell-style-2/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -30,7 +30,6 @@ export class Sample {
             column4.cellStyles = this.webTreeGridCellStylesHandler;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
@@ -42,7 +41,6 @@ export class Sample {
         return this._ordersTreeData;
     }
 
-
     public webTreeGridCellStylesHandler = {
         background: (rowData: any, columnKey: any, cellValue: any, rowIndex: any) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
         color: (rowData: any, columnKey: any, cellValue: any, rowIndex: any) => {
diff --git a/samples/grids/tree-grid/conditional-cell-style-2/tsconfig.json b/samples/grids/tree-grid/conditional-cell-style-2/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/conditional-cell-style-2/tsconfig.json
+++ b/samples/grids/tree-grid/conditional-cell-style-2/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/conditional-cell-style-2/webpack.config.js b/samples/grids/tree-grid/conditional-cell-style-2/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/conditional-cell-style-2/webpack.config.js
+++ b/samples/grids/tree-grid/conditional-cell-style-2/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/conditional-row-selectors/package.json b/samples/grids/tree-grid/conditional-row-selectors/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/conditional-row-selectors/package.json
+++ b/samples/grids/tree-grid/conditional-row-selectors/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/conditional-row-selectors/sandbox.config.json b/samples/grids/tree-grid/conditional-row-selectors/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/conditional-row-selectors/sandbox.config.json
+++ b/samples/grids/tree-grid/conditional-row-selectors/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/conditional-row-selectors/src/index.css b/samples/grids/tree-grid/conditional-row-selectors/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/conditional-row-selectors/src/index.css
+++ b/samples/grids/tree-grid/conditional-row-selectors/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/conditional-row-selectors/src/index.ts b/samples/grids/tree-grid/conditional-row-selectors/src/index.ts
index 164842b35c..44e551bd78 100644
--- a/samples/grids/tree-grid/conditional-row-selectors/src/index.ts
+++ b/samples/grids/tree-grid/conditional-row-selectors/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcom
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
 import { IgcRowSelectionEventArgs, IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -22,7 +22,6 @@ export class Sample {
             treeGrid.addEventListener("rowSelectionChanging", this.webTreeGridRowSelectionConditional);
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/conditional-row-selectors/tsconfig.json b/samples/grids/tree-grid/conditional-row-selectors/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/conditional-row-selectors/tsconfig.json
+++ b/samples/grids/tree-grid/conditional-row-selectors/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/conditional-row-selectors/webpack.config.js b/samples/grids/tree-grid/conditional-row-selectors/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/conditional-row-selectors/webpack.config.js
+++ b/samples/grids/tree-grid/conditional-row-selectors/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/custom-filtering/package.json b/samples/grids/tree-grid/custom-filtering/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/custom-filtering/package.json
+++ b/samples/grids/tree-grid/custom-filtering/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/custom-filtering/sandbox.config.json b/samples/grids/tree-grid/custom-filtering/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/custom-filtering/sandbox.config.json
+++ b/samples/grids/tree-grid/custom-filtering/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/custom-filtering/src/index.ts b/samples/grids/tree-grid/custom-filtering/src/index.ts
index eb1b4c81b3..9ffd555498 100644
--- a/samples/grids/tree-grid/custom-filtering/src/index.ts
+++ b/samples/grids/tree-grid/custom-filtering/src/index.ts
@@ -1,12 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcBooleanFilteringOperand, IgcColumnComponent, IgcStringFilteringOperand, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersDataItem, OrdersData } from './OrdersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
 
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent;
@@ -29,8 +28,6 @@ export class Sample {
         }
         return this._ordersData;
     }
-    
-
 
 }
 
diff --git a/samples/grids/tree-grid/custom-filtering/tsconfig.json b/samples/grids/tree-grid/custom-filtering/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/custom-filtering/tsconfig.json
+++ b/samples/grids/tree-grid/custom-filtering/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-exporting-indicator/package.json b/samples/grids/tree-grid/data-exporting-indicator/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/data-exporting-indicator/package.json
+++ b/samples/grids/tree-grid/data-exporting-indicator/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/data-exporting-indicator/sandbox.config.json b/samples/grids/tree-grid/data-exporting-indicator/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/data-exporting-indicator/sandbox.config.json
+++ b/samples/grids/tree-grid/data-exporting-indicator/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-exporting-indicator/src/index.ts b/samples/grids/tree-grid/data-exporting-indicator/src/index.ts
index 9faf4fcd66..4d85491714 100644
--- a/samples/grids/tree-grid/data-exporting-indicator/src/index.ts
+++ b/samples/grids/tree-grid/data-exporting-indicator/src/index.ts
@@ -1,14 +1,14 @@
 import { IgcGridToolbarComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import { OrdersTreeData } from './OrdersData';
-
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
 
+
 defineComponents(IgcButtonComponent);
 
 export class Sample {
-    
+
     constructor() {
         const localData: any[] = [];
         for (let i = 0; i < 10000; i += 3) {
diff --git a/samples/grids/tree-grid/data-exporting-indicator/tsconfig.json b/samples/grids/tree-grid/data-exporting-indicator/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/data-exporting-indicator/tsconfig.json
+++ b/samples/grids/tree-grid/data-exporting-indicator/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-searching/package.json b/samples/grids/tree-grid/data-searching/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/tree-grid/data-searching/package.json
+++ b/samples/grids/tree-grid/data-searching/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/data-searching/sandbox.config.json b/samples/grids/tree-grid/data-searching/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/data-searching/sandbox.config.json
+++ b/samples/grids/tree-grid/data-searching/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-searching/src/index.ts b/samples/grids/tree-grid/data-searching/src/index.ts
index 1759777002..ea26c9f655 100644
--- a/samples/grids/tree-grid/data-searching/src/index.ts
+++ b/samples/grids/tree-grid/data-searching/src/index.ts
@@ -1,7 +1,6 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText  } from 'igniteui-webcomponents';
 import { EmployeesFlatData } from './EmployeesFlatData';
@@ -10,10 +9,10 @@ defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconB
 
 export class Sample {
 
-    private treeGrid: IgcTreeGridComponent;    
+    private treeGrid: IgcTreeGridComponent;
 
     private searchBox: IgcInputComponent;
-    
+
     private icon: IgcIconComponent;
     private nextIconButton: IgcIconButtonComponent;
     private prevIconButton: IgcIconButtonComponent;
@@ -24,22 +23,22 @@ export class Sample {
     private _bind: () => void;
 
     constructor() {
-        this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;        
-                
+        this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
+
         this.nextSearch = this.nextSearch.bind(this);
         this.prevSearch = this.prevSearch.bind(this);
-        this.clearSearch = this.clearSearch.bind(this);        
-        
+        this.clearSearch = this.clearSearch.bind(this);
+
         const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
         const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
         const searchIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
         const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";
-        
+
         registerIconFromText('prev', prevIconText, 'material');
         registerIconFromText('next', nextIconText, 'material');
         registerIconFromText('search', searchIconText, 'material');
         registerIconFromText('clear', clearIconText, 'material');
-        
+
         this.icon = document.getElementById('icon') as IgcIconComponent;
 
         this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
@@ -51,8 +50,7 @@ export class Sample {
         this.searchBox = document.getElementById('searchBox') as IgcInputComponent;
 
         this._bind = () => {
-            this.treeGrid.data = new EmployeesFlatData();      
-                        
+            this.treeGrid.data = new EmployeesFlatData();
             this.searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); });
             this.searchBox.addEventListener("igcInput", (evt) => {
                 this.icon.name = evt.detail ? 'clear' : 'search';
@@ -71,7 +69,7 @@ export class Sample {
         this._bind();
     }
 
-    public onSearchKeydown(evt: KeyboardEvent) {  
+    public onSearchKeydown(evt: KeyboardEvent) {
         if (evt.key === 'Enter' || evt.key === 'ArrowDown') {
             evt.preventDefault();
             this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
diff --git a/samples/grids/tree-grid/data-searching/tsconfig.json b/samples/grids/tree-grid/data-searching/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/data-searching/tsconfig.json
+++ b/samples/grids/tree-grid/data-searching/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-summaries-custom/package.json b/samples/grids/tree-grid/data-summaries-custom/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/data-summaries-custom/package.json
+++ b/samples/grids/tree-grid/data-summaries-custom/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/data-summaries-custom/sandbox.config.json b/samples/grids/tree-grid/data-summaries-custom/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/data-summaries-custom/sandbox.config.json
+++ b/samples/grids/tree-grid/data-summaries-custom/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summaries-custom/src/index.css b/samples/grids/tree-grid/data-summaries-custom/src/index.css
index 08c65b2d5c..0fe9368715 100644
--- a/samples/grids/tree-grid/data-summaries-custom/src/index.css
+++ b/samples/grids/tree-grid/data-summaries-custom/src/index.css
@@ -1,6 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.gridSize {
-    --ig-size: var(--ig-size-small);
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summaries-custom/src/index.ts b/samples/grids/tree-grid/data-summaries-custom/src/index.ts
index 3367f211bd..2dce77c346 100644
--- a/samples/grids/tree-grid/data-summaries-custom/src/index.ts
+++ b/samples/grids/tree-grid/data-summaries-custom/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcColumnComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 class PtoSummary {
     count(data: any[]): number {
         return data.length;
@@ -57,7 +57,6 @@ export class Sample {
             column1.summaries = PtoSummary;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/data-summaries-custom/tsconfig.json b/samples/grids/tree-grid/data-summaries-custom/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/data-summaries-custom/tsconfig.json
+++ b/samples/grids/tree-grid/data-summaries-custom/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-summary-children/package.json b/samples/grids/tree-grid/data-summary-children/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/data-summary-children/package.json
+++ b/samples/grids/tree-grid/data-summary-children/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/data-summary-children/sandbox.config.json b/samples/grids/tree-grid/data-summary-children/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/data-summary-children/sandbox.config.json
+++ b/samples/grids/tree-grid/data-summary-children/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-children/src/index.css b/samples/grids/tree-grid/data-summary-children/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/data-summary-children/src/index.css
+++ b/samples/grids/tree-grid/data-summary-children/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-children/src/index.ts b/samples/grids/tree-grid/data-summary-children/src/index.ts
index 4a10f7ba5b..197ae92bf6 100644
--- a/samples/grids/tree-grid/data-summary-children/src/index.ts
+++ b/samples/grids/tree-grid/data-summary-children/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -44,7 +44,6 @@ export class Sample {
             treeGrid.data = this.ordersTreeData;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/data-summary-children/tsconfig.json b/samples/grids/tree-grid/data-summary-children/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/data-summary-children/tsconfig.json
+++ b/samples/grids/tree-grid/data-summary-children/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-summary-children/webpack.config.js b/samples/grids/tree-grid/data-summary-children/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/data-summary-children/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-children/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/data-summary-formatter/package.json b/samples/grids/tree-grid/data-summary-formatter/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/data-summary-formatter/package.json
+++ b/samples/grids/tree-grid/data-summary-formatter/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/data-summary-formatter/sandbox.config.json b/samples/grids/tree-grid/data-summary-formatter/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/data-summary-formatter/sandbox.config.json
+++ b/samples/grids/tree-grid/data-summary-formatter/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-formatter/src/index.css b/samples/grids/tree-grid/data-summary-formatter/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/data-summary-formatter/src/index.css
+++ b/samples/grids/tree-grid/data-summary-formatter/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-formatter/src/index.ts b/samples/grids/tree-grid/data-summary-formatter/src/index.ts
index b1fc56a6cb..db3653b34d 100644
--- a/samples/grids/tree-grid/data-summary-formatter/src/index.ts
+++ b/samples/grids/tree-grid/data-summary-formatter/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcom
 import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
 import { IgcSummaryResult, IgcSummaryOperand } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             column1.summaryFormatter = this.webTreeGridSummaryFormatter;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/data-summary-formatter/tsconfig.json b/samples/grids/tree-grid/data-summary-formatter/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/data-summary-formatter/tsconfig.json
+++ b/samples/grids/tree-grid/data-summary-formatter/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-summary-formatter/webpack.config.js b/samples/grids/tree-grid/data-summary-formatter/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/data-summary-formatter/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-formatter/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/data-summary-options-styling/package.json b/samples/grids/tree-grid/data-summary-options-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/data-summary-options-styling/package.json
+++ b/samples/grids/tree-grid/data-summary-options-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/data-summary-options-styling/sandbox.config.json b/samples/grids/tree-grid/data-summary-options-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/data-summary-options-styling/sandbox.config.json
+++ b/samples/grids/tree-grid/data-summary-options-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-options-styling/src/index.css b/samples/grids/tree-grid/data-summary-options-styling/src/index.css
index db97f90145..0fe9368715 100644
--- a/samples/grids/tree-grid/data-summary-options-styling/src/index.css
+++ b/samples/grids/tree-grid/data-summary-options-styling/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-    --ig-grid-summary-background-color:#e0f3ff;
-    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
-    --ig-grid-summary-label-color: rgb(228, 27, 117);
-    --ig-grid-summary-result-color: black;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-options-styling/src/index.ts b/samples/grids/tree-grid/data-summary-options-styling/src/index.ts
index e0f8a2eb99..b95ddcc058 100644
--- a/samples/grids/tree-grid/data-summary-options-styling/src/index.ts
+++ b/samples/grids/tree-grid/data-summary-options-styling/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -42,7 +42,6 @@ export class Sample {
             column7.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/data-summary-options-styling/tsconfig.json b/samples/grids/tree-grid/data-summary-options-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/data-summary-options-styling/tsconfig.json
+++ b/samples/grids/tree-grid/data-summary-options-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-summary-options-styling/webpack.config.js b/samples/grids/tree-grid/data-summary-options-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/data-summary-options-styling/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-options-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/data-summary-options/package.json b/samples/grids/tree-grid/data-summary-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/data-summary-options/package.json
+++ b/samples/grids/tree-grid/data-summary-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/data-summary-options/sandbox.config.json b/samples/grids/tree-grid/data-summary-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/data-summary-options/sandbox.config.json
+++ b/samples/grids/tree-grid/data-summary-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-options/src/index.css b/samples/grids/tree-grid/data-summary-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/data-summary-options/src/index.css
+++ b/samples/grids/tree-grid/data-summary-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-options/src/index.ts b/samples/grids/tree-grid/data-summary-options/src/index.ts
index 6ceb8fb800..6212d5e5b4 100644
--- a/samples/grids/tree-grid/data-summary-options/src/index.ts
+++ b/samples/grids/tree-grid/data-summary-options/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
 import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -39,7 +39,6 @@ export class Sample {
             column6.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/data-summary-options/tsconfig.json b/samples/grids/tree-grid/data-summary-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/data-summary-options/tsconfig.json
+++ b/samples/grids/tree-grid/data-summary-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-summary-options/webpack.config.js b/samples/grids/tree-grid/data-summary-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/data-summary-options/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/data-summary-template/package.json b/samples/grids/tree-grid/data-summary-template/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/data-summary-template/package.json
+++ b/samples/grids/tree-grid/data-summary-template/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/data-summary-template/sandbox.config.json b/samples/grids/tree-grid/data-summary-template/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/data-summary-template/sandbox.config.json
+++ b/samples/grids/tree-grid/data-summary-template/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-template/src/index.css b/samples/grids/tree-grid/data-summary-template/src/index.css
index 848a950285..0fe9368715 100644
--- a/samples/grids/tree-grid/data-summary-template/src/index.css
+++ b/samples/grids/tree-grid/data-summary-template/src/index.css
@@ -1,43 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.summary-temp {
-	display: flex;
-	flex-direction: column;
-	margin: 0 1px;
-	font-size: 14px;
-	line-height: 24px;
-	height: 100%;
-	overflow-y: auto;
-	overflow-x: hidden;
-	> * {
-		padding: 8px 0;
-		line-height: 18px;
-		border-bottom: 1px dashed hsla(var(--igx-gray-400));
-		&:last-child {
-			border-bottom: none;
-		}
-	}
-}
-.summary-temp span {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px;
-    justify-content: space-between;
-    color: hsla(var(--ig-gray-900));
-}
-.summary-temp span span {
-    user-select: all;
-    max-width: 300px;
-    padding-right: 8px;
-}
-.summary-temp span strong {
-    font-size: 14px;
-    text-transform: uppercase;
-    min-width: 70px;
-    justify-self: flex-start;
-    text-align: left;
-    color: hsla(var(--ig-secondary-600));
-    user-select: none;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-summary-template/src/index.ts b/samples/grids/tree-grid/data-summary-template/src/index.ts
index cf5075d71a..4febd4eae8 100644
--- a/samples/grids/tree-grid/data-summary-template/src/index.ts
+++ b/samples/grids/tree-grid/data-summary-template/src/index.ts
@@ -7,11 +7,11 @@ import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './Employee
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcSummaryResult, IgcSummaryTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -49,7 +49,6 @@ export class Sample {
             column1.summaryTemplate = this.webTreeGridSummaryTemplate;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/data-summary-template/tsconfig.json b/samples/grids/tree-grid/data-summary-template/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/data-summary-template/tsconfig.json
+++ b/samples/grids/tree-grid/data-summary-template/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/data-summary-template/webpack.config.js b/samples/grids/tree-grid/data-summary-template/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/data-summary-template/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-template/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/editing-columns/package.json b/samples/grids/tree-grid/editing-columns/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/editing-columns/package.json
+++ b/samples/grids/tree-grid/editing-columns/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/editing-columns/sandbox.config.json b/samples/grids/tree-grid/editing-columns/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/editing-columns/sandbox.config.json
+++ b/samples/grids/tree-grid/editing-columns/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/editing-columns/src/index.css b/samples/grids/tree-grid/editing-columns/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/editing-columns/src/index.css
+++ b/samples/grids/tree-grid/editing-columns/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/editing-columns/src/index.ts b/samples/grids/tree-grid/editing-columns/src/index.ts
index 2b6ccbd009..1dbcc70e6f 100644
--- a/samples/grids/tree-grid/editing-columns/src/index.ts
+++ b/samples/grids/tree-grid/editing-columns/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebPaginatorDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesNestedTreeData;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/editing-columns/tsconfig.json b/samples/grids/tree-grid/editing-columns/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/editing-columns/tsconfig.json
+++ b/samples/grids/tree-grid/editing-columns/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/editing-columns/webpack.config.js b/samples/grids/tree-grid/editing-columns/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/editing-columns/webpack.config.js
+++ b/samples/grids/tree-grid/editing-columns/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/editing-events/package.json b/samples/grids/tree-grid/editing-events/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/editing-events/package.json
+++ b/samples/grids/tree-grid/editing-events/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/editing-events/sandbox.config.json b/samples/grids/tree-grid/editing-events/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/editing-events/sandbox.config.json
+++ b/samples/grids/tree-grid/editing-events/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/editing-events/src/index.css b/samples/grids/tree-grid/editing-events/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/editing-events/src/index.css
+++ b/samples/grids/tree-grid/editing-events/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/editing-events/src/index.ts b/samples/grids/tree-grid/editing-events/src/index.ts
index d863575b4f..999d986507 100644
--- a/samples/grids/tree-grid/editing-events/src/index.ts
+++ b/samples/grids/tree-grid/editing-events/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcom
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
 import { IgcGridComponent, IgcGridEditEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -22,7 +22,6 @@ export class Sample {
             treeGrid.addEventListener("cellEdit", this.webTreeGridCellEdit);
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/editing-events/tsconfig.json b/samples/grids/tree-grid/editing-events/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/editing-events/tsconfig.json
+++ b/samples/grids/tree-grid/editing-events/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/editing-events/webpack.config.js b/samples/grids/tree-grid/editing-events/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/editing-events/webpack.config.js
+++ b/samples/grids/tree-grid/editing-events/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/editing-lifecycle/package.json b/samples/grids/tree-grid/editing-lifecycle/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/editing-lifecycle/package.json
+++ b/samples/grids/tree-grid/editing-lifecycle/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/editing-lifecycle/sandbox.config.json b/samples/grids/tree-grid/editing-lifecycle/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/editing-lifecycle/sandbox.config.json
+++ b/samples/grids/tree-grid/editing-lifecycle/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/editing-lifecycle/src/index.css b/samples/grids/tree-grid/editing-lifecycle/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/editing-lifecycle/src/index.css
+++ b/samples/grids/tree-grid/editing-lifecycle/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/editing-lifecycle/src/index.ts b/samples/grids/tree-grid/editing-lifecycle/src/index.ts
index 7abf5e8ac0..1c80a16b28 100644
--- a/samples/grids/tree-grid/editing-lifecycle/src/index.ts
+++ b/samples/grids/tree-grid/editing-lifecycle/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
 import { IgcRowSelectionEventArgs, IgcGridComponent, IgcGridEditEventArgs, IgcGridEditDoneEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcTreeGridComponent
@@ -37,7 +37,6 @@ export class Sample {
             grid.addEventListener("cellEditExit", this.webGridCellEditExit);
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
@@ -49,7 +48,6 @@ export class Sample {
         return this._employeesFlatData;
     }
 
-
     public webTreeGridRendered(args:any): void {
         const grid = document.getElementById("grid");
         grid.parentElement.style.display = "flex";
diff --git a/samples/grids/tree-grid/editing-lifecycle/tsconfig.json b/samples/grids/tree-grid/editing-lifecycle/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/editing-lifecycle/tsconfig.json
+++ b/samples/grids/tree-grid/editing-lifecycle/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/editing-lifecycle/webpack.config.js b/samples/grids/tree-grid/editing-lifecycle/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/editing-lifecycle/webpack.config.js
+++ b/samples/grids/tree-grid/editing-lifecycle/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/excel-exporting/package.json b/samples/grids/tree-grid/excel-exporting/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/excel-exporting/package.json
+++ b/samples/grids/tree-grid/excel-exporting/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/excel-exporting/sandbox.config.json b/samples/grids/tree-grid/excel-exporting/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/excel-exporting/sandbox.config.json
+++ b/samples/grids/tree-grid/excel-exporting/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-exporting/src/index.css b/samples/grids/tree-grid/excel-exporting/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/excel-exporting/src/index.css
+++ b/samples/grids/tree-grid/excel-exporting/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-exporting/src/index.ts b/samples/grids/tree-grid/excel-exporting/src/index.ts
index 99ccf9abeb..cc73fe41a1 100644
--- a/samples/grids/tree-grid/excel-exporting/src/index.ts
+++ b/samples/grids/tree-grid/excel-exporting/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             treeGrid.data = this.employeesNestedData;
         }
         this._bind();
-
     }
 
     private _employeesNestedData: EmployeesNestedData = null;
diff --git a/samples/grids/tree-grid/excel-exporting/tsconfig.json b/samples/grids/tree-grid/excel-exporting/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/excel-exporting/tsconfig.json
+++ b/samples/grids/tree-grid/excel-exporting/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/excel-exporting/webpack.config.js b/samples/grids/tree-grid/excel-exporting/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/excel-exporting/webpack.config.js
+++ b/samples/grids/tree-grid/excel-exporting/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/sandbox.config.json b/samples/grids/tree-grid/excel-style-filtering-sample-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-1/sandbox.config.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/src/index.css b/samples/grids/tree-grid/excel-style-filtering-sample-1/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-1/src/index.css
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/src/index.ts b/samples/grids/tree-grid/excel-style-filtering-sample-1/src/index.ts
index 3225e86585..63efe4fa05 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-1/src/index.ts
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/src/index.ts
@@ -7,11 +7,11 @@ import { FoodsDataItem, FoodsData } from './FoodsData';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -43,7 +43,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _foodsData: FoodsData = null;
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/tsconfig.json b/samples/grids/tree-grid/excel-style-filtering-sample-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-1/tsconfig.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/webpack.config.js b/samples/grids/tree-grid/excel-style-filtering-sample-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-1/webpack.config.js
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/sandbox.config.json b/samples/grids/tree-grid/excel-style-filtering-sample-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-2/sandbox.config.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/src/index.css b/samples/grids/tree-grid/excel-style-filtering-sample-2/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-2/src/index.css
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/src/index.ts b/samples/grids/tree-grid/excel-style-filtering-sample-2/src/index.ts
index d305837f40..7661cce043 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-2/src/index.ts
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { FoodsDataItem, FoodsData } from './FoodsData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcTreeGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _foodsData: FoodsData = null;
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/tsconfig.json b/samples/grids/tree-grid/excel-style-filtering-sample-2/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-2/tsconfig.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/webpack.config.js b/samples/grids/tree-grid/excel-style-filtering-sample-2/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-2/webpack.config.js
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/sandbox.config.json b/samples/grids/tree-grid/excel-style-filtering-sample-3/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-3/sandbox.config.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/src/index.css b/samples/grids/tree-grid/excel-style-filtering-sample-3/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-3/src/index.css
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/src/index.ts b/samples/grids/tree-grid/excel-style-filtering-sample-3/src/index.ts
index 3fd1df3b38..7ec2ca573d 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-3/src/index.ts
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { FoodsDataItem, FoodsData } from './FoodsData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcTreeGridComponent
@@ -25,7 +25,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _foodsData: FoodsData = null;
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/tsconfig.json b/samples/grids/tree-grid/excel-style-filtering-sample-3/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-3/tsconfig.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/webpack.config.js b/samples/grids/tree-grid/excel-style-filtering-sample-3/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-3/webpack.config.js
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/excel-style-filtering-style/package.json b/samples/grids/tree-grid/excel-style-filtering-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/excel-style-filtering-style/package.json
+++ b/samples/grids/tree-grid/excel-style-filtering-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/excel-style-filtering-style/sandbox.config.json b/samples/grids/tree-grid/excel-style-filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/excel-style-filtering-style/sandbox.config.json
+++ b/samples/grids/tree-grid/excel-style-filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-style-filtering-style/src/index.css b/samples/grids/tree-grid/excel-style-filtering-style/src/index.css
index aa7a27b502..0fe9368715 100644
--- a/samples/grids/tree-grid/excel-style-filtering-style/src/index.css
+++ b/samples/grids/tree-grid/excel-style-filtering-style/src/index.css
@@ -1,26 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #grid {
-        --ig-grid-filtering-row-background: #ffcd0f;
-        --ig-button-background: #FFCD0F;
-        --ig-button-foreground: #292826;
-        --ig-button-hover-background: #292826;
-        --ig-button-hover-foreground: #ffcd0f;
-
-        --ig-list-background: #FFCD0F;
-        --ig-list-item-background: #FFCD0F;
-        --ig-list-item-background-hover: #c2b1b1bd;
-
-        --ig-checkbox-empty-color: #292826;
-        --ig-checkbox-fill-color: #292826;
-        --ig-checkbox-tick-color: #FFCD0F;
-        --ig-checkbox-label-color: #292826;
-
-        --ig-drop-down-background-color: #FFCD0F;
-        --ig-drop-down-item-text-color: #292826;
-        --ig-drop-down-item-background: #FFCD0F;
-        --ig-drop-down-item-text-color: #292826;
-        --ig-drop-down-focused-item-background: #c2b1b1bd;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/excel-style-filtering-style/src/index.ts b/samples/grids/tree-grid/excel-style-filtering-style/src/index.ts
index d305837f40..7661cce043 100644
--- a/samples/grids/tree-grid/excel-style-filtering-style/src/index.ts
+++ b/samples/grids/tree-grid/excel-style-filtering-style/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { FoodsDataItem, FoodsData } from './FoodsData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcTreeGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             column1.bodyTemplate = this.webGridBooleanCellTemplate;
         }
         this._bind();
-
     }
 
     private _foodsData: FoodsData = null;
diff --git a/samples/grids/tree-grid/excel-style-filtering-style/tsconfig.json b/samples/grids/tree-grid/excel-style-filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/excel-style-filtering-style/tsconfig.json
+++ b/samples/grids/tree-grid/excel-style-filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/excel-style-filtering-style/webpack.config.js b/samples/grids/tree-grid/excel-style-filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/excel-style-filtering-style/webpack.config.js
+++ b/samples/grids/tree-grid/excel-style-filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/filtering-options/package.json b/samples/grids/tree-grid/filtering-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/filtering-options/package.json
+++ b/samples/grids/tree-grid/filtering-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/filtering-options/sandbox.config.json b/samples/grids/tree-grid/filtering-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/filtering-options/sandbox.config.json
+++ b/samples/grids/tree-grid/filtering-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/filtering-options/src/index.css b/samples/grids/tree-grid/filtering-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/filtering-options/src/index.css
+++ b/samples/grids/tree-grid/filtering-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/filtering-options/src/index.ts b/samples/grids/tree-grid/filtering-options/src/index.ts
index 37e4cc249e..7eed70d453 100644
--- a/samples/grids/tree-grid/filtering-options/src/index.ts
+++ b/samples/grids/tree-grid/filtering-options/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersDataItem, OrdersData } from './OrdersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             treeGrid.data = this.ordersData;
         }
         this._bind();
-
     }
 
     private _ordersData: OrdersData = null;
diff --git a/samples/grids/tree-grid/filtering-options/tsconfig.json b/samples/grids/tree-grid/filtering-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/filtering-options/tsconfig.json
+++ b/samples/grids/tree-grid/filtering-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/filtering-options/webpack.config.js b/samples/grids/tree-grid/filtering-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/filtering-options/webpack.config.js
+++ b/samples/grids/tree-grid/filtering-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/filtering-style/package.json b/samples/grids/tree-grid/filtering-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/filtering-style/package.json
+++ b/samples/grids/tree-grid/filtering-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/filtering-style/sandbox.config.json b/samples/grids/tree-grid/filtering-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/filtering-style/sandbox.config.json
+++ b/samples/grids/tree-grid/filtering-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/filtering-style/src/index.css b/samples/grids/tree-grid/filtering-style/src/index.css
index 5905f94b0e..0fe9368715 100644
--- a/samples/grids/tree-grid/filtering-style/src/index.css
+++ b/samples/grids/tree-grid/filtering-style/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-    --ig-grid-filtering-row-text-color: #292826;
-    --ig-grid-filtering-row-background: #ffcd0f;
-    --ig-grid-filtering-header-text-color: #292826;
-    --ig-grid-filtering-header-background: #ffcd0f;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/filtering-style/src/index.ts b/samples/grids/tree-grid/filtering-style/src/index.ts
index 37e4cc249e..7eed70d453 100644
--- a/samples/grids/tree-grid/filtering-style/src/index.ts
+++ b/samples/grids/tree-grid/filtering-style/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersDataItem, OrdersData } from './OrdersData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             treeGrid.data = this.ordersData;
         }
         this._bind();
-
     }
 
     private _ordersData: OrdersData = null;
diff --git a/samples/grids/tree-grid/filtering-style/tsconfig.json b/samples/grids/tree-grid/filtering-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/filtering-style/tsconfig.json
+++ b/samples/grids/tree-grid/filtering-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/filtering-style/webpack.config.js b/samples/grids/tree-grid/filtering-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/filtering-style/webpack.config.js
+++ b/samples/grids/tree-grid/filtering-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/finjs/package.json b/samples/grids/tree-grid/finjs/package.json
index 93b946e25b..1716e5ddfb 100644
--- a/samples/grids/tree-grid/finjs/package.json
+++ b/samples/grids/tree-grid/finjs/package.json
@@ -26,11 +26,11 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/finjs/sandbox.config.json b/samples/grids/tree-grid/finjs/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/finjs/sandbox.config.json
+++ b/samples/grids/tree-grid/finjs/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/finjs/src/index.css b/samples/grids/tree-grid/finjs/src/index.css
index b2ddbc6a23..0fe9368715 100644
--- a/samples/grids/tree-grid/finjs/src/index.css
+++ b/samples/grids/tree-grid/finjs/src/index.css
@@ -1,122 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.controls-holder {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 15px;
-}
-
-.control-item {
-    flex-grow: 1;
-}
-
-.toast {
-    z-index: 2;
-}
-
-.switch-control-item {
-    flex-basis: fit-content;
-}
-
-.switches {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1 0 0%;
-    padding-inline-end: 20px;
-    font-size: 0.9rem;
-    gap: 20px;
-}
-
-.finjs-play-controls {
-    display: flex;
-    gap: 10px;
-    flex: 1 0 0%;
-}
-
-.finjs-play-controls > igc-button {
-    flex-grow: 1;
-}
-
-.finjs-slider {
-    width: 100%;
-    min-width: 145px;
-}
-
-.finjs-icons {
-    display: flex;
-    align-items: center;
-}
-
-.finjs-icons>igc-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-    margin-inline-start: 4px;
-}
-
-.changePos,
-.changeNeg,
-.strongPositive,
-.strongNegative {
-    color: rgb(0, 0, 0);
-}
-
-.changePos>.igx-grid__td-text {
-    border-inline-end: 4px solid rgb(76, 184, 96);
-    padding-inline-end: 15px;
-}
-
-.changePos1 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(76, 184, 96);
-    padding-inline-end: 15px;
-}
-
-.changePos2 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(76, 184, 96);
-    padding-inline-end: 15px;
-}
-
-.changeNeg > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(255, 20, 75);
-    padding-inline-end: 9px;
-}
-
-.changeNeg1 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(255, 20, 75);
-    padding-inline-end: 9px;
-}
-
-.changeNeg2 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(255, 20, 75);
-    padding-inline-end: 15px;
-}
-
-.positive {
-    color: rgb(76, 184, 96);
-}
-
-.strongPositive2 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(76, 184, 96);
-    padding-inline-end: 15px;
-}
-
-.negative {
-    color: rgb(255, 20, 75);
-}
-
-.strongNegative2 > .igx-grid__td-text {
-    border-inline-end: 4px solid rgb(255, 20, 75);
-    padding-inline-end: 15px;
-}
-
-.gridSize {
-    --ig-size: var(--ig-size-medium);
-}
-
-.size-small {
-    --ig-size: var(--ig-size-small);
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/finjs/src/index.ts b/samples/grids/tree-grid/finjs/src/index.ts
index 5a9156b103..b49f644d30 100644
--- a/samples/grids/tree-grid/finjs/src/index.ts
+++ b/samples/grids/tree-grid/finjs/src/index.ts
@@ -16,7 +16,6 @@ ModuleManager.register(
 
 export class Sample {
 
-
     private grid1: IgcTreeGridComponent;
     private chart: IgcCategoryChartComponent;
     private _timer: ReturnType<typeof setInterval>;
@@ -52,7 +51,6 @@ export class Sample {
         this.stopUpdate = this.stopUpdate.bind(this);
         document.getElementById('stopButton').addEventListener("click", this.stopUpdate);
 
-
         const sliderRecValueSpan = document.getElementById('slider-rec-value') as HTMLElement;
         const recordsSlider = document.getElementById('records') as IgcSliderComponent;
         recordsSlider.value = 1000;
@@ -62,7 +60,6 @@ export class Sample {
             this.grid1.data = this.data;
         });
 
-
         const sliderFreqValueSpan = document.getElementById('slider-freq-value') as HTMLElement;
         const freqSlider = document.getElementById('frequency') as IgcSliderComponent;
         freqSlider.value = 500;
@@ -153,7 +150,6 @@ export class Sample {
         this.chart.yAxisAbbreviateLargeNumbers = true;
     }
 
-
     public openDialogForRow(e: any, rowData: any) {
         const chart = document.getElementById('chart1') as IgcCategoryChartComponent;
         const chartData = this.grid1.data.filter(item => item.region === rowData.region &&
@@ -168,7 +164,6 @@ export class Sample {
         chartDialog.show();
     }
 
-
     public priceTemplate = (ctx: IgcCellTemplateContext) => {
         const cell = ctx.cell;
         const rowData = this.grid1.getRowData(cell.id.rowID);
diff --git a/samples/grids/tree-grid/finjs/tsconfig.json b/samples/grids/tree-grid/finjs/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/finjs/tsconfig.json
+++ b/samples/grids/tree-grid/finjs/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/package.json b/samples/grids/tree-grid/keyboard-custom-navigation/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/keyboard-custom-navigation/package.json
+++ b/samples/grids/tree-grid/keyboard-custom-navigation/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/sandbox.config.json b/samples/grids/tree-grid/keyboard-custom-navigation/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/keyboard-custom-navigation/sandbox.config.json
+++ b/samples/grids/tree-grid/keyboard-custom-navigation/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/src/index.css b/samples/grids/tree-grid/keyboard-custom-navigation/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/keyboard-custom-navigation/src/index.css
+++ b/samples/grids/tree-grid/keyboard-custom-navigation/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/src/index.ts b/samples/grids/tree-grid/keyboard-custom-navigation/src/index.ts
index f3ee71f762..2c3710b6db 100644
--- a/samples/grids/tree-grid/keyboard-custom-navigation/src/index.ts
+++ b/samples/grids/tree-grid/keyboard-custom-navigation/src/index.ts
@@ -4,12 +4,12 @@ import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDes
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
 import { IgcGridComponent, IgcGridKeydownEventArgs, GridKeydownTargetType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -28,7 +28,6 @@ export class Sample {
             treeGrid.addEventListener("gridKeydown", this.webGridCustomKBNav);
         }
         this._bind();
-
     }
 
     private _employeesNestedData: EmployeesNestedData = null;
diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/tsconfig.json b/samples/grids/tree-grid/keyboard-custom-navigation/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/keyboard-custom-navigation/tsconfig.json
+++ b/samples/grids/tree-grid/keyboard-custom-navigation/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/webpack.config.js b/samples/grids/tree-grid/keyboard-custom-navigation/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/keyboard-custom-navigation/webpack.config.js
+++ b/samples/grids/tree-grid/keyboard-custom-navigation/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/keyboard-navigation-guide/package.json b/samples/grids/tree-grid/keyboard-navigation-guide/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/keyboard-navigation-guide/package.json
+++ b/samples/grids/tree-grid/keyboard-navigation-guide/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/keyboard-navigation-guide/sandbox.config.json b/samples/grids/tree-grid/keyboard-navigation-guide/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/keyboard-navigation-guide/sandbox.config.json
+++ b/samples/grids/tree-grid/keyboard-navigation-guide/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/keyboard-navigation-guide/src/index.css b/samples/grids/tree-grid/keyboard-navigation-guide/src/index.css
index 35149fb7ad..0fe9368715 100644
--- a/samples/grids/tree-grid/keyboard-navigation-guide/src/index.css
+++ b/samples/grids/tree-grid/keyboard-navigation-guide/src/index.css
@@ -1,29 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.grid_wrapper {
-    width: 75%;
-}
-
-.list_wrapper {
-    width: 20%;
-}
-
-.container {
-    display: flex;
-    flex-direction: row;
-}
-
-.empty-list > h6 {
-    padding: 15px;
-    font-size: 15px;
-}
-
-.empty-list > ul {
-    margin-left: 15px;
-    font-weight: 400;
-}
-
-.disabled {
-    opacity: .4;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/keyboard-navigation-guide/src/index.ts b/samples/grids/tree-grid/keyboard-navigation-guide/src/index.ts
index a863f6554d..209082625b 100644
--- a/samples/grids/tree-grid/keyboard-navigation-guide/src/index.ts
+++ b/samples/grids/tree-grid/keyboard-navigation-guide/src/index.ts
@@ -34,7 +34,6 @@ const summaryCombinations: Item[] = [
     new Item('End', 'navigates to the last summary cell', false, ItemAction.Always)
 ];
 
-
 export class Sample {
 
     private grid: IgcTreeGridComponent;
@@ -54,6 +53,7 @@ export class Sample {
         grid.addEventListener("gridKeydown", this.gridKeydown);
         grid.addEventListener("keydown", this.keydown);
     }
+
     public changeCombinationsCollection(gridSection: GridSection, evt: any) {
         switch (gridSection) {
             case GridSection.THEAD:
@@ -240,7 +240,6 @@ export class Sample {
        this.keydown(evt);
     }
 
-
     public listTemplate = () => {
         let htmlContent = "";
         (window as any).onChangeHandler = (i: number) => {
diff --git a/samples/grids/tree-grid/keyboard-navigation-guide/tsconfig.json b/samples/grids/tree-grid/keyboard-navigation-guide/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/keyboard-navigation-guide/tsconfig.json
+++ b/samples/grids/tree-grid/keyboard-navigation-guide/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/layout-display-density/package.json b/samples/grids/tree-grid/layout-display-density/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/layout-display-density/package.json
+++ b/samples/grids/tree-grid/layout-display-density/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/layout-display-density/sandbox.config.json b/samples/grids/tree-grid/layout-display-density/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/layout-display-density/sandbox.config.json
+++ b/samples/grids/tree-grid/layout-display-density/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/layout-display-density/src/index.css b/samples/grids/tree-grid/layout-display-density/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/layout-display-density/src/index.css
+++ b/samples/grids/tree-grid/layout-display-density/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/layout-display-density/src/index.ts b/samples/grids/tree-grid/layout-display-density/src/index.ts
index e4e4926706..7f60ceb8e9 100644
--- a/samples/grids/tree-grid/layout-display-density/src/index.ts
+++ b/samples/grids/tree-grid/layout-display-density/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -38,7 +38,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/layout-display-density/tsconfig.json b/samples/grids/tree-grid/layout-display-density/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/layout-display-density/tsconfig.json
+++ b/samples/grids/tree-grid/layout-display-density/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/layout-display-density/webpack.config.js b/samples/grids/tree-grid/layout-display-density/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/layout-display-density/webpack.config.js
+++ b/samples/grids/tree-grid/layout-display-density/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/load-on-demand/package.json b/samples/grids/tree-grid/load-on-demand/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/load-on-demand/package.json
+++ b/samples/grids/tree-grid/load-on-demand/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/load-on-demand/sandbox.config.json b/samples/grids/tree-grid/load-on-demand/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/load-on-demand/sandbox.config.json
+++ b/samples/grids/tree-grid/load-on-demand/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/load-on-demand/src/index.ts b/samples/grids/tree-grid/load-on-demand/src/index.ts
index 6d5b7ccad8..e1c47cc0d7 100644
--- a/samples/grids/tree-grid/load-on-demand/src/index.ts
+++ b/samples/grids/tree-grid/load-on-demand/src/index.ts
@@ -1,8 +1,8 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
+
 export class Sample {
 
     constructor() {
diff --git a/samples/grids/tree-grid/load-on-demand/tsconfig.json b/samples/grids/tree-grid/load-on-demand/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/load-on-demand/tsconfig.json
+++ b/samples/grids/tree-grid/load-on-demand/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/multi-cell-selection-mode/package.json b/samples/grids/tree-grid/multi-cell-selection-mode/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/multi-cell-selection-mode/package.json
+++ b/samples/grids/tree-grid/multi-cell-selection-mode/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/multi-cell-selection-mode/sandbox.config.json b/samples/grids/tree-grid/multi-cell-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/multi-cell-selection-mode/sandbox.config.json
+++ b/samples/grids/tree-grid/multi-cell-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-cell-selection-mode/src/index.css b/samples/grids/tree-grid/multi-cell-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/multi-cell-selection-mode/src/index.css
+++ b/samples/grids/tree-grid/multi-cell-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-cell-selection-mode/src/index.ts b/samples/grids/tree-grid/multi-cell-selection-mode/src/index.ts
index ce8b293934..7683009df5 100644
--- a/samples/grids/tree-grid/multi-cell-selection-mode/src/index.ts
+++ b/samples/grids/tree-grid/multi-cell-selection-mode/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcGridComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
     private leftTreeGrid: IgcTreeGridComponent;
     private rightGrid: IgcGridComponent;
diff --git a/samples/grids/tree-grid/multi-cell-selection-mode/tsconfig.json b/samples/grids/tree-grid/multi-cell-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/multi-cell-selection-mode/tsconfig.json
+++ b/samples/grids/tree-grid/multi-cell-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/multi-column-headers-export/package.json b/samples/grids/tree-grid/multi-column-headers-export/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/multi-column-headers-export/package.json
+++ b/samples/grids/tree-grid/multi-column-headers-export/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/multi-column-headers-export/sandbox.config.json b/samples/grids/tree-grid/multi-column-headers-export/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/multi-column-headers-export/sandbox.config.json
+++ b/samples/grids/tree-grid/multi-column-headers-export/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-column-headers-export/src/index.css b/samples/grids/tree-grid/multi-column-headers-export/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/multi-column-headers-export/src/index.css
+++ b/samples/grids/tree-grid/multi-column-headers-export/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-column-headers-export/src/index.ts b/samples/grids/tree-grid/multi-column-headers-export/src/index.ts
index fec28623f2..325b76b2da 100644
--- a/samples/grids/tree-grid/multi-column-headers-export/src/index.ts
+++ b/samples/grids/tree-grid/multi-column-headers-export/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebGridDescriptionModule, WebGridToolbarDescriptionM
 import { IgcTreeGridComponent, IgcGridToolbarExporterComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
 import { IgcGridComponent, IgcExporterEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             gridToolbarExporter1.addEventListener("exportStarted", this.webGridExportEventMultiColumnHeaders);
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/multi-column-headers-export/tsconfig.json b/samples/grids/tree-grid/multi-column-headers-export/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/multi-column-headers-export/tsconfig.json
+++ b/samples/grids/tree-grid/multi-column-headers-export/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/multi-column-headers-export/webpack.config.js b/samples/grids/tree-grid/multi-column-headers-export/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/multi-column-headers-export/webpack.config.js
+++ b/samples/grids/tree-grid/multi-column-headers-export/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/package.json b/samples/grids/tree-grid/multi-column-headers-overview/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/package.json
+++ b/samples/grids/tree-grid/multi-column-headers-overview/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/sandbox.config.json b/samples/grids/tree-grid/multi-column-headers-overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/sandbox.config.json
+++ b/samples/grids/tree-grid/multi-column-headers-overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/src/index.css b/samples/grids/tree-grid/multi-column-headers-overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/src/index.css
+++ b/samples/grids/tree-grid/multi-column-headers-overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/src/index.ts b/samples/grids/tree-grid/multi-column-headers-overview/src/index.ts
index 9c2161bd87..6ed3d1ef49 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/src/index.ts
+++ b/samples/grids/tree-grid/multi-column-headers-overview/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -42,7 +42,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/tsconfig.json b/samples/grids/tree-grid/multi-column-headers-overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/tsconfig.json
+++ b/samples/grids/tree-grid/multi-column-headers-overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/webpack.config.js b/samples/grids/tree-grid/multi-column-headers-overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/webpack.config.js
+++ b/samples/grids/tree-grid/multi-column-headers-overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/multi-column-headers-styling/package.json b/samples/grids/tree-grid/multi-column-headers-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/multi-column-headers-styling/package.json
+++ b/samples/grids/tree-grid/multi-column-headers-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/multi-column-headers-styling/sandbox.config.json b/samples/grids/tree-grid/multi-column-headers-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/multi-column-headers-styling/sandbox.config.json
+++ b/samples/grids/tree-grid/multi-column-headers-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-column-headers-styling/src/index.css b/samples/grids/tree-grid/multi-column-headers-styling/src/index.css
index 62b3ec4060..0fe9368715 100644
--- a/samples/grids/tree-grid/multi-column-headers-styling/src/index.css
+++ b/samples/grids/tree-grid/multi-column-headers-styling/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-    --ig-grid-header-background: #e0f3ff;
-    --ig-grid-header-text-color: #e41c77;
-    --ig-grid-header-border-width: 1px;
-    --ig-grid-header-border-style: solid;
-    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-column-headers-styling/src/index.ts b/samples/grids/tree-grid/multi-column-headers-styling/src/index.ts
index 4063951b0b..3498a056ed 100644
--- a/samples/grids/tree-grid/multi-column-headers-styling/src/index.ts
+++ b/samples/grids/tree-grid/multi-column-headers-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatDetails;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/multi-column-headers-styling/tsconfig.json b/samples/grids/tree-grid/multi-column-headers-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/multi-column-headers-styling/tsconfig.json
+++ b/samples/grids/tree-grid/multi-column-headers-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/multi-column-headers-styling/webpack.config.js b/samples/grids/tree-grid/multi-column-headers-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/multi-column-headers-styling/webpack.config.js
+++ b/samples/grids/tree-grid/multi-column-headers-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/multi-column-headers-template/package.json b/samples/grids/tree-grid/multi-column-headers-template/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/multi-column-headers-template/package.json
+++ b/samples/grids/tree-grid/multi-column-headers-template/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/multi-column-headers-template/sandbox.config.json b/samples/grids/tree-grid/multi-column-headers-template/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/multi-column-headers-template/sandbox.config.json
+++ b/samples/grids/tree-grid/multi-column-headers-template/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-column-headers-template/src/index.css b/samples/grids/tree-grid/multi-column-headers-template/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/multi-column-headers-template/src/index.css
+++ b/samples/grids/tree-grid/multi-column-headers-template/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/multi-column-headers-template/src/index.ts b/samples/grids/tree-grid/multi-column-headers-template/src/index.ts
index 7f8a0cfd9d..519029365e 100644
--- a/samples/grids/tree-grid/multi-column-headers-template/src/index.ts
+++ b/samples/grids/tree-grid/multi-column-headers-template/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcColumnGroupComponent } from 'igniteui-webcompo
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
 import { IgcGridComponent, IgcColumnTemplateContext, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -27,7 +27,6 @@ export class Sample {
             columnGroup2.headerTemplate = this.webTreeGridColumnGroupHeaderTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/multi-column-headers-template/tsconfig.json b/samples/grids/tree-grid/multi-column-headers-template/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/multi-column-headers-template/tsconfig.json
+++ b/samples/grids/tree-grid/multi-column-headers-template/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/multi-column-headers-template/webpack.config.js b/samples/grids/tree-grid/multi-column-headers-template/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/multi-column-headers-template/webpack.config.js
+++ b/samples/grids/tree-grid/multi-column-headers-template/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/overview-styling/package.json b/samples/grids/tree-grid/overview-styling/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/overview-styling/package.json
+++ b/samples/grids/tree-grid/overview-styling/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/overview-styling/sandbox.config.json b/samples/grids/tree-grid/overview-styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/overview-styling/sandbox.config.json
+++ b/samples/grids/tree-grid/overview-styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/overview-styling/src/index.css b/samples/grids/tree-grid/overview-styling/src/index.css
index 93b62ff056..0fe9368715 100644
--- a/samples/grids/tree-grid/overview-styling/src/index.css
+++ b/samples/grids/tree-grid/overview-styling/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#treeGrid {
-    --ig-grid-header-background: #494949;
-    --ig-grid-header-text-color: #FFF;
-    --ig-grid-expand-icon-color: #FFCD0F;
-    --ig-grid-expand-icon-hover-color: #E0B710;
-    --ig-grid-row-hover-background: #F8E495;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/overview-styling/src/index.ts b/samples/grids/tree-grid/overview-styling/src/index.ts
index 4aa23f2d19..370eea12fe 100644
--- a/samples/grids/tree-grid/overview-styling/src/index.ts
+++ b/samples/grids/tree-grid/overview-styling/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesNestedData;
         }
         this._bind();
-
     }
 
     private _employeesNestedData: EmployeesNestedData = null;
diff --git a/samples/grids/tree-grid/overview-styling/tsconfig.json b/samples/grids/tree-grid/overview-styling/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/overview-styling/tsconfig.json
+++ b/samples/grids/tree-grid/overview-styling/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/overview-styling/webpack.config.js b/samples/grids/tree-grid/overview-styling/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/overview-styling/webpack.config.js
+++ b/samples/grids/tree-grid/overview-styling/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/overview/package.json b/samples/grids/tree-grid/overview/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/overview/package.json
+++ b/samples/grids/tree-grid/overview/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/overview/sandbox.config.json b/samples/grids/tree-grid/overview/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/overview/sandbox.config.json
+++ b/samples/grids/tree-grid/overview/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/overview/src/index.css b/samples/grids/tree-grid/overview/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/overview/src/index.css
+++ b/samples/grids/tree-grid/overview/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/overview/src/index.ts b/samples/grids/tree-grid/overview/src/index.ts
index 284538212d..d2cae9fed1 100644
--- a/samples/grids/tree-grid/overview/src/index.ts
+++ b/samples/grids/tree-grid/overview/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent, IgcGridToolbarTitleComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -27,7 +27,6 @@ export class Sample {
             treeGrid.data = this.employeesNestedData;
         }
         this._bind();
-
     }
 
     private _employeesNestedData: EmployeesNestedData = null;
diff --git a/samples/grids/tree-grid/overview/tsconfig.json b/samples/grids/tree-grid/overview/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/overview/tsconfig.json
+++ b/samples/grids/tree-grid/overview/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/overview/webpack.config.js b/samples/grids/tree-grid/overview/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/overview/webpack.config.js
+++ b/samples/grids/tree-grid/overview/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-adding/package.json b/samples/grids/tree-grid/row-adding/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-adding/package.json
+++ b/samples/grids/tree-grid/row-adding/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-adding/sandbox.config.json b/samples/grids/tree-grid/row-adding/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-adding/sandbox.config.json
+++ b/samples/grids/tree-grid/row-adding/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-adding/src/index.css b/samples/grids/tree-grid/row-adding/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-adding/src/index.css
+++ b/samples/grids/tree-grid/row-adding/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-adding/src/index.ts b/samples/grids/tree-grid/row-adding/src/index.ts
index 156e55f609..0c533e36e9 100644
--- a/samples/grids/tree-grid/row-adding/src/index.ts
+++ b/samples/grids/tree-grid/row-adding/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule, WebActionStripDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesNestedTreeData;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/row-adding/tsconfig.json b/samples/grids/tree-grid/row-adding/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-adding/tsconfig.json
+++ b/samples/grids/tree-grid/row-adding/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-adding/webpack.config.js b/samples/grids/tree-grid/row-adding/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-adding/webpack.config.js
+++ b/samples/grids/tree-grid/row-adding/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-classes/package.json b/samples/grids/tree-grid/row-classes/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-classes/package.json
+++ b/samples/grids/tree-grid/row-classes/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-classes/sandbox.config.json b/samples/grids/tree-grid/row-classes/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-classes/sandbox.config.json
+++ b/samples/grids/tree-grid/row-classes/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-classes/src/index.css b/samples/grids/tree-grid/row-classes/src/index.css
index de13be7ed3..0fe9368715 100644
--- a/samples/grids/tree-grid/row-classes/src/index.css
+++ b/samples/grids/tree-grid/row-classes/src/index.css
@@ -1,8 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    .activeRow {
-        border-top: 2px solid #fc81b8;
-        border-left: 3px solid #e41c77;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-classes/src/index.ts b/samples/grids/tree-grid/row-classes/src/index.ts
index 072d08f7c9..fb9b7a1df7 100644
--- a/samples/grids/tree-grid/row-classes/src/index.ts
+++ b/samples/grids/tree-grid/row-classes/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
 import { IgcRowType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid1: IgcTreeGridComponent
@@ -20,7 +20,6 @@ export class Sample {
             treeGrid1.rowClasses = this.webGridRowClassesHandler;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
@@ -32,7 +31,6 @@ export class Sample {
         return this._employeesFlatData;
     }
 
-
     public webGridRowClassesHandler = {
       activeRow: (row: IgcRowType) => row.index % 2 === 0
     };
diff --git a/samples/grids/tree-grid/row-classes/tsconfig.json b/samples/grids/tree-grid/row-classes/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-classes/tsconfig.json
+++ b/samples/grids/tree-grid/row-classes/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-classes/webpack.config.js b/samples/grids/tree-grid/row-classes/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-classes/webpack.config.js
+++ b/samples/grids/tree-grid/row-classes/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-drag-base/package.json b/samples/grids/tree-grid/row-drag-base/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/row-drag-base/package.json
+++ b/samples/grids/tree-grid/row-drag-base/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-drag-base/sandbox.config.json b/samples/grids/tree-grid/row-drag-base/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-drag-base/sandbox.config.json
+++ b/samples/grids/tree-grid/row-drag-base/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-drag-base/src/index.css b/samples/grids/tree-grid/row-drag-base/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-drag-base/src/index.css
+++ b/samples/grids/tree-grid/row-drag-base/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-drag-base/src/index.ts b/samples/grids/tree-grid/row-drag-base/src/index.ts
index 7047f63951..cf91d1ea1b 100644
--- a/samples/grids/tree-grid/row-drag-base/src/index.ts
+++ b/samples/grids/tree-grid/row-drag-base/src/index.ts
@@ -3,12 +3,12 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent, IgcGridToolbarTitleComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import { ModuleManager } from 'igniteui-webcomponents-core';
-
 import "./index.css";
 
+
+
 ModuleManager.register(
     IgcPropertyEditorPanelModule
 );
@@ -30,23 +30,22 @@ export class Sample {
         this._bind = () => {
             treeGrid.data = this.employeesNestedData;
             treeGrid2.data = [];
-            treeGrid2.emptyGridMessage = "Drag and Drop a row from the left grid to this grid";            
-            treeGrid.addEventListener("rowDragEnd", this.onGridRowDragEnd.bind(this));         
+            treeGrid2.emptyGridMessage = "Drag and Drop a row from the left grid to this grid";
+            treeGrid.addEventListener("rowDragEnd", this.onGridRowDragEnd.bind(this));
         }
         this._bind();
-
     }
 
     public addRowAndChildren(row:EmployeesNestedDataItem, newData:any[]) {
         if(newData.includes(row)){
             return;
         }
-        else if(newData.length>0 && row.Employees){            
+        else if(newData.length>0 && row.Employees){
             for(let i= row.Employees.length;i>=0;i--){
                 if(newData.includes(row.Employees[i])){
-                    let index = newData.findIndex(element => element.ID === row.Employees[i].ID);                    
+                    let index = newData.findIndex(element => element.ID === row.Employees[i].ID);
                     if (index > -1) {
-                        newData.splice(index, 1);                        
+                        newData.splice(index, 1);
                     }
                 }
             }
@@ -58,24 +57,24 @@ export class Sample {
             }
         }
 
-        newData.push(row);           
+        newData.push(row);
       }
-       
+
     public onGridRowDragEnd(args: any): void {
         const ghostElement = args.detail.dragDirective.ghostElement;
 
         if (ghostElement != null) {
 
-            const dragElementPos = ghostElement.getBoundingClientRect();            
+            const dragElementPos = ghostElement.getBoundingClientRect();
 
-            const gridPosition = this.treeGrid2.getBoundingClientRect();            
+            const gridPosition = this.treeGrid2.getBoundingClientRect();
             const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
             const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
             if (withinXBounds && withinYBounds) {
                 const newData = [...this.treeGrid2.data];
                 const draggedRowData = args.detail.dragData.data;
                 this.addRowAndChildren(draggedRowData, newData);
-                this.treeGrid2.data = newData;  
+                this.treeGrid2.data = newData;
             }
         }
     }
diff --git a/samples/grids/tree-grid/row-drag-base/tsconfig.json b/samples/grids/tree-grid/row-drag-base/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-drag-base/tsconfig.json
+++ b/samples/grids/tree-grid/row-drag-base/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-editing-options/package.json b/samples/grids/tree-grid/row-editing-options/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-editing-options/package.json
+++ b/samples/grids/tree-grid/row-editing-options/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-editing-options/sandbox.config.json b/samples/grids/tree-grid/row-editing-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-editing-options/sandbox.config.json
+++ b/samples/grids/tree-grid/row-editing-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-editing-options/src/index.css b/samples/grids/tree-grid/row-editing-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-editing-options/src/index.css
+++ b/samples/grids/tree-grid/row-editing-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-editing-options/src/index.ts b/samples/grids/tree-grid/row-editing-options/src/index.ts
index 573620f221..5fec04f3a6 100644
--- a/samples/grids/tree-grid/row-editing-options/src/index.ts
+++ b/samples/grids/tree-grid/row-editing-options/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.employeesNestedTreeData;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/row-editing-options/tsconfig.json b/samples/grids/tree-grid/row-editing-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-editing-options/tsconfig.json
+++ b/samples/grids/tree-grid/row-editing-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-editing-options/webpack.config.js b/samples/grids/tree-grid/row-editing-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-editing-options/webpack.config.js
+++ b/samples/grids/tree-grid/row-editing-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-editing-style/package.json b/samples/grids/tree-grid/row-editing-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-editing-style/package.json
+++ b/samples/grids/tree-grid/row-editing-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-editing-style/sandbox.config.json b/samples/grids/tree-grid/row-editing-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-editing-style/sandbox.config.json
+++ b/samples/grids/tree-grid/row-editing-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-editing-style/src/index.css b/samples/grids/tree-grid/row-editing-style/src/index.css
index cc7b8709b5..0fe9368715 100644
--- a/samples/grids/tree-grid/row-editing-style/src/index.css
+++ b/samples/grids/tree-grid/row-editing-style/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-#grid {
-    --ig-banner-banner-background: #292826;
-    --ig-banner-banner-message-color: #ffcd0f;
-    --ig-button-foreground: #ffcd0f;
-    --ig-button-hover-foreground: white;
-    --ig-button-font-weight: 600;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-editing-style/src/index.ts b/samples/grids/tree-grid/row-editing-style/src/index.ts
index e2b7def107..ef47bbdcc4 100644
--- a/samples/grids/tree-grid/row-editing-style/src/index.ts
+++ b/samples/grids/tree-grid/row-editing-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private grid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             grid.data = this.employeesNestedTreeData;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/row-editing-style/tsconfig.json b/samples/grids/tree-grid/row-editing-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-editing-style/tsconfig.json
+++ b/samples/grids/tree-grid/row-editing-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-editing-style/webpack.config.js b/samples/grids/tree-grid/row-editing-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-editing-style/webpack.config.js
+++ b/samples/grids/tree-grid/row-editing-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-paging-basic/package.json b/samples/grids/tree-grid/row-paging-basic/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-paging-basic/package.json
+++ b/samples/grids/tree-grid/row-paging-basic/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-paging-basic/sandbox.config.json b/samples/grids/tree-grid/row-paging-basic/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-paging-basic/sandbox.config.json
+++ b/samples/grids/tree-grid/row-paging-basic/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-paging-basic/src/index.css b/samples/grids/tree-grid/row-paging-basic/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-paging-basic/src/index.css
+++ b/samples/grids/tree-grid/row-paging-basic/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-paging-basic/src/index.ts b/samples/grids/tree-grid/row-paging-basic/src/index.ts
index d8cf109bb5..5ddbb202ef 100644
--- a/samples/grids/tree-grid/row-paging-basic/src/index.ts
+++ b/samples/grids/tree-grid/row-paging-basic/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.ordersTreeData;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/row-paging-basic/tsconfig.json b/samples/grids/tree-grid/row-paging-basic/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-paging-basic/tsconfig.json
+++ b/samples/grids/tree-grid/row-paging-basic/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-paging-basic/webpack.config.js b/samples/grids/tree-grid/row-paging-basic/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-paging-basic/webpack.config.js
+++ b/samples/grids/tree-grid/row-paging-basic/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-paging-options/package.json b/samples/grids/tree-grid/row-paging-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/row-paging-options/package.json
+++ b/samples/grids/tree-grid/row-paging-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-paging-options/sandbox.config.json b/samples/grids/tree-grid/row-paging-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-paging-options/sandbox.config.json
+++ b/samples/grids/tree-grid/row-paging-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-paging-options/src/index.css b/samples/grids/tree-grid/row-paging-options/src/index.css
index d4c0f71f0d..0fe9368715 100644
--- a/samples/grids/tree-grid/row-paging-options/src/index.css
+++ b/samples/grids/tree-grid/row-paging-options/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #treeGrid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-paging-options/src/index.ts b/samples/grids/tree-grid/row-paging-options/src/index.ts
index 97227a1d17..1a96e4565d 100644
--- a/samples/grids/tree-grid/row-paging-options/src/index.ts
+++ b/samples/grids/tree-grid/row-paging-options/src/index.ts
@@ -5,11 +5,11 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcTreeGridComponent, IgcPaginatorComponent, IgcPaginatorResourceStrings } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,6 +35,7 @@ export class Sample {
         }
         return this._paginatorResourceStrings1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -52,7 +53,6 @@ export class Sample {
             paginator.resourceStrings = this.paginatorResourceStrings1;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/row-paging-options/tsconfig.json b/samples/grids/tree-grid/row-paging-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-paging-options/tsconfig.json
+++ b/samples/grids/tree-grid/row-paging-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-paging-options/webpack.config.js b/samples/grids/tree-grid/row-paging-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-paging-options/webpack.config.js
+++ b/samples/grids/tree-grid/row-paging-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-paging-style/package.json b/samples/grids/tree-grid/row-paging-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-paging-style/package.json
+++ b/samples/grids/tree-grid/row-paging-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-paging-style/sandbox.config.json b/samples/grids/tree-grid/row-paging-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-paging-style/sandbox.config.json
+++ b/samples/grids/tree-grid/row-paging-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-paging-style/src/index.css b/samples/grids/tree-grid/row-paging-style/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-paging-style/src/index.css
+++ b/samples/grids/tree-grid/row-paging-style/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-paging-style/src/index.ts b/samples/grids/tree-grid/row-paging-style/src/index.ts
index d8cf109bb5..5ddbb202ef 100644
--- a/samples/grids/tree-grid/row-paging-style/src/index.ts
+++ b/samples/grids/tree-grid/row-paging-style/src/index.ts
@@ -2,11 +2,11 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -19,7 +19,6 @@ export class Sample {
             treeGrid.data = this.ordersTreeData;
         }
         this._bind();
-
     }
 
     private _ordersTreeData: OrdersTreeData = null;
diff --git a/samples/grids/tree-grid/row-paging-style/tsconfig.json b/samples/grids/tree-grid/row-paging-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-paging-style/tsconfig.json
+++ b/samples/grids/tree-grid/row-paging-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-paging-style/webpack.config.js b/samples/grids/tree-grid/row-paging-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-paging-style/webpack.config.js
+++ b/samples/grids/tree-grid/row-paging-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-pinning-extra-column/package.json b/samples/grids/tree-grid/row-pinning-extra-column/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-pinning-extra-column/package.json
+++ b/samples/grids/tree-grid/row-pinning-extra-column/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-pinning-extra-column/sandbox.config.json b/samples/grids/tree-grid/row-pinning-extra-column/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-pinning-extra-column/sandbox.config.json
+++ b/samples/grids/tree-grid/row-pinning-extra-column/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-pinning-extra-column/src/index.css b/samples/grids/tree-grid/row-pinning-extra-column/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-pinning-extra-column/src/index.css
+++ b/samples/grids/tree-grid/row-pinning-extra-column/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-pinning-extra-column/src/index.ts b/samples/grids/tree-grid/row-pinning-extra-column/src/index.ts
index dc4d9c5c3f..8b18972138 100644
--- a/samples/grids/tree-grid/row-pinning-extra-column/src/index.ts
+++ b/samples/grids/tree-grid/row-pinning-extra-column/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcPinningConfig, RowPinningPosition, IgcColumnCo
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -23,6 +23,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private column1: IgcColumnComponent
     private _bind: () => void;
 
@@ -36,7 +37,6 @@ export class Sample {
             column1.bodyTemplate = this.webTreeGridRowPinCellTemplate;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/row-pinning-extra-column/tsconfig.json b/samples/grids/tree-grid/row-pinning-extra-column/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-pinning-extra-column/tsconfig.json
+++ b/samples/grids/tree-grid/row-pinning-extra-column/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-pinning-extra-column/webpack.config.js b/samples/grids/tree-grid/row-pinning-extra-column/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-pinning-extra-column/webpack.config.js
+++ b/samples/grids/tree-grid/row-pinning-extra-column/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-pinning-options/package.json b/samples/grids/tree-grid/row-pinning-options/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/row-pinning-options/package.json
+++ b/samples/grids/tree-grid/row-pinning-options/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-pinning-options/sandbox.config.json b/samples/grids/tree-grid/row-pinning-options/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-pinning-options/sandbox.config.json
+++ b/samples/grids/tree-grid/row-pinning-options/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-pinning-options/src/index.css b/samples/grids/tree-grid/row-pinning-options/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-pinning-options/src/index.css
+++ b/samples/grids/tree-grid/row-pinning-options/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-pinning-options/src/index.ts b/samples/grids/tree-grid/row-pinning-options/src/index.ts
index dfb4bc9eb7..12b3ae7d10 100644
--- a/samples/grids/tree-grid/row-pinning-options/src/index.ts
+++ b/samples/grids/tree-grid/row-pinning-options/src/index.ts
@@ -6,11 +6,11 @@ import { IgcTreeGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionSt
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -35,6 +35,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private actionStrip: IgcActionStripComponent
     private _bind: () => void;
 
@@ -55,7 +56,6 @@ export class Sample {
             treeGrid.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/row-pinning-options/tsconfig.json b/samples/grids/tree-grid/row-pinning-options/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-pinning-options/tsconfig.json
+++ b/samples/grids/tree-grid/row-pinning-options/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-pinning-options/webpack.config.js b/samples/grids/tree-grid/row-pinning-options/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-pinning-options/webpack.config.js
+++ b/samples/grids/tree-grid/row-pinning-options/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-pinning-style/package.json b/samples/grids/tree-grid/row-pinning-style/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-pinning-style/package.json
+++ b/samples/grids/tree-grid/row-pinning-style/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-pinning-style/sandbox.config.json b/samples/grids/tree-grid/row-pinning-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-pinning-style/sandbox.config.json
+++ b/samples/grids/tree-grid/row-pinning-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-pinning-style/src/index.css b/samples/grids/tree-grid/row-pinning-style/src/index.css
index 0f7c3da158..0fe9368715 100644
--- a/samples/grids/tree-grid/row-pinning-style/src/index.css
+++ b/samples/grids/tree-grid/row-pinning-style/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #treeGrid {
-        --ig-grid-pinned-border-width: 5px;
-        --ig-grid-pinned-border-style: double;
-        --ig-grid-pinned-border-color: #FFCD0F;
-        --ig-grid-cell-active-border-color: #FFCD0F;
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-pinning-style/src/index.ts b/samples/grids/tree-grid/row-pinning-style/src/index.ts
index 71201433c1..a06c8e77a0 100644
--- a/samples/grids/tree-grid/row-pinning-style/src/index.ts
+++ b/samples/grids/tree-grid/row-pinning-style/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebTreeGridDescriptionModule, WebActionStripDescript
 import { IgcTreeGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -22,6 +22,7 @@ export class Sample {
         }
         return this._pinningConfig1;
     }
+
     private actionStrip: IgcActionStripComponent
     private _bind: () => void;
 
@@ -36,7 +37,6 @@ export class Sample {
             treeGrid.pinning = this.pinningConfig1;
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/row-pinning-style/tsconfig.json b/samples/grids/tree-grid/row-pinning-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-pinning-style/tsconfig.json
+++ b/samples/grids/tree-grid/row-pinning-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-pinning-style/webpack.config.js b/samples/grids/tree-grid/row-pinning-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-pinning-style/webpack.config.js
+++ b/samples/grids/tree-grid/row-pinning-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-reorder/package.json b/samples/grids/tree-grid/row-reorder/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-reorder/package.json
+++ b/samples/grids/tree-grid/row-reorder/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-reorder/sandbox.config.json b/samples/grids/tree-grid/row-reorder/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-reorder/sandbox.config.json
+++ b/samples/grids/tree-grid/row-reorder/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-reorder/src/index.css b/samples/grids/tree-grid/row-reorder/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-reorder/src/index.css
+++ b/samples/grids/tree-grid/row-reorder/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-reorder/src/index.ts b/samples/grids/tree-grid/row-reorder/src/index.ts
index db63553975..ac71b0adc8 100644
--- a/samples/grids/tree-grid/row-reorder/src/index.ts
+++ b/samples/grids/tree-grid/row-reorder/src/index.ts
@@ -3,11 +3,11 @@ import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcom
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
 import { IgcRowDragStartEventArgs, IgcRowDragEndEventArgs } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -24,7 +24,6 @@ export class Sample {
             treeGrid.addEventListener("rowDragEnd", this.webTreeGridReorderRowHandler);
         }
         this._bind();
-
     }
 
     private _employeesNestedTreeData: EmployeesNestedTreeData = null;
diff --git a/samples/grids/tree-grid/row-reorder/tsconfig.json b/samples/grids/tree-grid/row-reorder/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-reorder/tsconfig.json
+++ b/samples/grids/tree-grid/row-reorder/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-reorder/webpack.config.js b/samples/grids/tree-grid/row-reorder/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-reorder/webpack.config.js
+++ b/samples/grids/tree-grid/row-reorder/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-selection-mode/package.json b/samples/grids/tree-grid/row-selection-mode/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/row-selection-mode/package.json
+++ b/samples/grids/tree-grid/row-selection-mode/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-selection-mode/sandbox.config.json b/samples/grids/tree-grid/row-selection-mode/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-selection-mode/sandbox.config.json
+++ b/samples/grids/tree-grid/row-selection-mode/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-selection-mode/src/index.css b/samples/grids/tree-grid/row-selection-mode/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-selection-mode/src/index.css
+++ b/samples/grids/tree-grid/row-selection-mode/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-selection-mode/src/index.ts b/samples/grids/tree-grid/row-selection-mode/src/index.ts
index 38be945e1c..3bf545fb48 100644
--- a/samples/grids/tree-grid/row-selection-mode/src/index.ts
+++ b/samples/grids/tree-grid/row-selection-mode/src/index.ts
@@ -4,11 +4,11 @@ import { ComponentRenderer, WebTreeGridDescriptionModule, PropertyEditorPanelDes
 import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+
 defineAllComponents();
 
 import "./index.css";
@@ -37,7 +37,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatData;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/row-selection-mode/tsconfig.json b/samples/grids/tree-grid/row-selection-mode/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-selection-mode/tsconfig.json
+++ b/samples/grids/tree-grid/row-selection-mode/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-selection-mode/webpack.config.js b/samples/grids/tree-grid/row-selection-mode/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-selection-mode/webpack.config.js
+++ b/samples/grids/tree-grid/row-selection-mode/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-selection-template-excel/package.json b/samples/grids/tree-grid/row-selection-template-excel/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-selection-template-excel/package.json
+++ b/samples/grids/tree-grid/row-selection-template-excel/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-selection-template-excel/sandbox.config.json b/samples/grids/tree-grid/row-selection-template-excel/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-selection-template-excel/sandbox.config.json
+++ b/samples/grids/tree-grid/row-selection-template-excel/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-selection-template-excel/src/index.css b/samples/grids/tree-grid/row-selection-template-excel/src/index.css
index d4c0f71f0d..0fe9368715 100644
--- a/samples/grids/tree-grid/row-selection-template-excel/src/index.css
+++ b/samples/grids/tree-grid/row-selection-template-excel/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-    #treeGrid {
-        --ig-size: var(--ig-size-medium);
-    }
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-selection-template-excel/src/index.ts b/samples/grids/tree-grid/row-selection-template-excel/src/index.ts
index 0d500f2baa..9c63e6989e 100644
--- a/samples/grids/tree-grid/row-selection-template-excel/src/index.ts
+++ b/samples/grids/tree-grid/row-selection-template-excel/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent, IgcPaginatorComponent, IgcPaginatorResourceString
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
 import { IgcRowSelectorTemplateContext, IgcGridComponent, IgcHeadSelectorTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -24,6 +24,7 @@ export class Sample {
         }
         return this._paginatorResourceStrings1;
     }
+
     private _bind: () => void;
 
     constructor() {
@@ -37,7 +38,6 @@ export class Sample {
             paginator.resourceStrings = this.paginatorResourceStrings1;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/row-selection-template-excel/tsconfig.json b/samples/grids/tree-grid/row-selection-template-excel/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-selection-template-excel/tsconfig.json
+++ b/samples/grids/tree-grid/row-selection-template-excel/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-selection-template-excel/webpack.config.js b/samples/grids/tree-grid/row-selection-template-excel/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-selection-template-excel/webpack.config.js
+++ b/samples/grids/tree-grid/row-selection-template-excel/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-selection-template-numbers/package.json b/samples/grids/tree-grid/row-selection-template-numbers/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-selection-template-numbers/package.json
+++ b/samples/grids/tree-grid/row-selection-template-numbers/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-selection-template-numbers/sandbox.config.json b/samples/grids/tree-grid/row-selection-template-numbers/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-selection-template-numbers/sandbox.config.json
+++ b/samples/grids/tree-grid/row-selection-template-numbers/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-selection-template-numbers/src/index.css b/samples/grids/tree-grid/row-selection-template-numbers/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-selection-template-numbers/src/index.css
+++ b/samples/grids/tree-grid/row-selection-template-numbers/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-selection-template-numbers/src/index.ts b/samples/grids/tree-grid/row-selection-template-numbers/src/index.ts
index a6bd5cca7d..4dc7b6b1fb 100644
--- a/samples/grids/tree-grid/row-selection-template-numbers/src/index.ts
+++ b/samples/grids/tree-grid/row-selection-template-numbers/src/index.ts
@@ -3,11 +3,11 @@ import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
 import { IgcRowSelectorTemplateContext, IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -22,7 +22,6 @@ export class Sample {
             treeGrid.headSelectorTemplate = this.webGridHeaderRowSelectorTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
@@ -34,7 +33,6 @@ export class Sample {
         return this._employeesFlatData;
     }
 
-
     public webGridRowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
         if (ctx.implicit.selected) {
             return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
diff --git a/samples/grids/tree-grid/row-selection-template-numbers/tsconfig.json b/samples/grids/tree-grid/row-selection-template-numbers/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-selection-template-numbers/tsconfig.json
+++ b/samples/grids/tree-grid/row-selection-template-numbers/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-selection-template-numbers/webpack.config.js b/samples/grids/tree-grid/row-selection-template-numbers/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-selection-template-numbers/webpack.config.js
+++ b/samples/grids/tree-grid/row-selection-template-numbers/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/row-styles/package.json b/samples/grids/tree-grid/row-styles/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/row-styles/package.json
+++ b/samples/grids/tree-grid/row-styles/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/row-styles/sandbox.config.json b/samples/grids/tree-grid/row-styles/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/row-styles/sandbox.config.json
+++ b/samples/grids/tree-grid/row-styles/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-styles/src/index.css b/samples/grids/tree-grid/row-styles/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/row-styles/src/index.css
+++ b/samples/grids/tree-grid/row-styles/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-styles/src/index.ts b/samples/grids/tree-grid/row-styles/src/index.ts
index fa9f7a0316..5d50908879 100644
--- a/samples/grids/tree-grid/row-styles/src/index.ts
+++ b/samples/grids/tree-grid/row-styles/src/index.ts
@@ -4,11 +4,11 @@ import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
 import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
 import { IgcRowType } from 'igniteui-webcomponents-grids/grids';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -22,7 +22,6 @@ export class Sample {
             treeGrid.rowStyles = this.webTreeGridRowStylesHandler;
         }
         this._bind();
-
     }
 
     private _employeesFlatDetails: EmployeesFlatDetails = null;
diff --git a/samples/grids/tree-grid/row-styles/tsconfig.json b/samples/grids/tree-grid/row-styles/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/row-styles/tsconfig.json
+++ b/samples/grids/tree-grid/row-styles/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/row-styles/webpack.config.js b/samples/grids/tree-grid/row-styles/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/row-styles/webpack.config.js
+++ b/samples/grids/tree-grid/row-styles/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/state-persistence-about/package.json b/samples/grids/tree-grid/state-persistence-about/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/tree-grid/state-persistence-about/package.json
+++ b/samples/grids/tree-grid/state-persistence-about/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/state-persistence-about/src/index.ts b/samples/grids/tree-grid/state-persistence-about/src/index.ts
index 14e8b9e92b..ba99d622f1 100644
--- a/samples/grids/tree-grid/state-persistence-about/src/index.ts
+++ b/samples/grids/tree-grid/state-persistence-about/src/index.ts
@@ -8,7 +8,7 @@ export class Sample {
 
     constructor() {
         var backBtn = document.getElementById("backBtn") as IgcButtonComponent;
-        
+
         this._bind = () => {
             backBtn.addEventListener("click", () => { window.location.replace("./grids/tree-grid/state-persistence-main");});
         }
diff --git a/samples/grids/tree-grid/state-persistence-about/tsconfig.json b/samples/grids/tree-grid/state-persistence-about/tsconfig.json
index 2c74e00627..de23257dd8 100644
--- a/samples/grids/tree-grid/state-persistence-about/tsconfig.json
+++ b/samples/grids/tree-grid/state-persistence-about/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/state-persistence-about/webpack.config.js b/samples/grids/tree-grid/state-persistence-about/webpack.config.js
index 4f82e885b8..9d11a6155c 100644
--- a/samples/grids/tree-grid/state-persistence-about/webpack.config.js
+++ b/samples/grids/tree-grid/state-persistence-about/webpack.config.js
@@ -35,7 +35,7 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: '[name].[fullhash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
             globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
@@ -96,8 +96,8 @@ module.exports = env => {
                 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: 'index-cs',
-                template: 'index.html',
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/tree-grid/state-persistence-main/package.json b/samples/grids/tree-grid/state-persistence-main/package.json
index d3b1f66218..1f8161c9cc 100644
--- a/samples/grids/tree-grid/state-persistence-main/package.json
+++ b/samples/grids/tree-grid/state-persistence-main/package.json
@@ -27,10 +27,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/state-persistence-main/src/index.css b/samples/grids/tree-grid/state-persistence-main/src/index.css
index 9e0f296aa9..0fe9368715 100644
--- a/samples/grids/tree-grid/state-persistence-main/src/index.css
+++ b/samples/grids/tree-grid/state-persistence-main/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.horizontal {
-    gap: 10px;
-    flex-basis: fit-content;
-    flex-wrap: wrap;
-}
-.sampleContainer {
-  padding: 0.5rem
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/state-persistence-main/src/index.ts b/samples/grids/tree-grid/state-persistence-main/src/index.ts
index eb2111e7ef..ed9a628290 100644
--- a/samples/grids/tree-grid/state-persistence-main/src/index.ts
+++ b/samples/grids/tree-grid/state-persistence-main/src/index.ts
@@ -34,8 +34,8 @@ export class Sample {
         columnSelection: true,
         moving: true
     };
-    private columnsLoaded: Promise<void>;
 
+    private columnsLoaded: Promise<void>;
 
     constructor() {
         var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
@@ -64,7 +64,6 @@ export class Sample {
         grid.filterMode = 'excelStyleFilter';
         grid.columnSelection = 'multiple';
         grid.rowSelection = 'multiple';
-
         saveStateBtn.addEventListener('click', (ev: any) => { this.saveGridState(); });
         restoreStateBtn.addEventListener('click', (ev: any) => { this.restoreGridState(); });
         resetStateBtn.addEventListener('click', (ev: any) => { this.resetGridState(); });
@@ -77,9 +76,9 @@ export class Sample {
             cb.addEventListener("igcChange", (ev: CustomEvent) => { this.onChange(ev, cb.id); });
         });
 
-        window.addEventListener("load", async () => { 
+        window.addEventListener("load", async () => {
             await this.columnsLoaded;
-            this.restoreGridState(); 
+            this.restoreGridState();
         });
         window.addEventListener("beforeunload", () => { this.saveGridState(); });
     }
@@ -136,7 +135,7 @@ export class Sample {
         window.location.reload();
     }
 
-    private onColumnInit(event: any) { 
+    private onColumnInit(event: any) {
         if(event.detail.index === this.grid.columns.length - 1) {
            this.columnsLoaded = new Promise((resolve) => resolve());
         }
diff --git a/samples/grids/tree-grid/state-persistence-main/tsconfig.json b/samples/grids/tree-grid/state-persistence-main/tsconfig.json
index 2c74e00627..de23257dd8 100644
--- a/samples/grids/tree-grid/state-persistence-main/tsconfig.json
+++ b/samples/grids/tree-grid/state-persistence-main/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/state-persistence-main/webpack.config.js b/samples/grids/tree-grid/state-persistence-main/webpack.config.js
index 4f82e885b8..9d11a6155c 100644
--- a/samples/grids/tree-grid/state-persistence-main/webpack.config.js
+++ b/samples/grids/tree-grid/state-persistence-main/webpack.config.js
@@ -35,7 +35,7 @@ module.exports = env => {
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
         output: {
-            filename: '[name].[fullhash].bundle.js',
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
             globalObject: 'this',
             path: path.resolve(__dirname, 'dist'),
         },
@@ -96,8 +96,8 @@ module.exports = env => {
                 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: 'index-cs',
-                template: 'index.html',
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/tree-grid/toolbar-sample-1/package.json b/samples/grids/tree-grid/toolbar-sample-1/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/toolbar-sample-1/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-1/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/toolbar-sample-1/sandbox.config.json b/samples/grids/tree-grid/toolbar-sample-1/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/toolbar-sample-1/sandbox.config.json
+++ b/samples/grids/tree-grid/toolbar-sample-1/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-1/src/index.css b/samples/grids/tree-grid/toolbar-sample-1/src/index.css
index 4ffa793996..0fe9368715 100644
--- a/samples/grids/tree-grid/toolbar-sample-1/src/index.css
+++ b/samples/grids/tree-grid/toolbar-sample-1/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cell__inner {
-    display: flex;
-    align-items: center;
-}
-.name {
-    margin-left: 30px;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-1/src/index.ts b/samples/grids/tree-grid/toolbar-sample-1/src/index.ts
index 109300f898..3230324b91 100644
--- a/samples/grids/tree-grid/toolbar-sample-1/src/index.ts
+++ b/samples/grids/tree-grid/toolbar-sample-1/src/index.ts
@@ -3,10 +3,10 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -26,7 +26,6 @@ export class Sample {
             column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatAvatars: EmployeesFlatAvatars = null;
@@ -38,7 +37,6 @@ export class Sample {
         return this._employeesFlatAvatars;
     }
 
-
         public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
         return html`<div class="cell__inner">
         <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
diff --git a/samples/grids/tree-grid/toolbar-sample-1/tsconfig.json b/samples/grids/tree-grid/toolbar-sample-1/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/toolbar-sample-1/tsconfig.json
+++ b/samples/grids/tree-grid/toolbar-sample-1/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/toolbar-sample-1/webpack.config.js b/samples/grids/tree-grid/toolbar-sample-1/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/toolbar-sample-1/webpack.config.js
+++ b/samples/grids/tree-grid/toolbar-sample-1/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/toolbar-sample-2/package.json b/samples/grids/tree-grid/toolbar-sample-2/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/toolbar-sample-2/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-2/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/toolbar-sample-2/sandbox.config.json b/samples/grids/tree-grid/toolbar-sample-2/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/toolbar-sample-2/sandbox.config.json
+++ b/samples/grids/tree-grid/toolbar-sample-2/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-2/src/index.css b/samples/grids/tree-grid/toolbar-sample-2/src/index.css
index 98b81be55e..0fe9368715 100644
--- a/samples/grids/tree-grid/toolbar-sample-2/src/index.css
+++ b/samples/grids/tree-grid/toolbar-sample-2/src/index.css
@@ -1,16 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cell__inner {
-    display: flex;
-    align-items: center;
-}
-
-.name {
-    margin-left: 30px;
-}
-
-.control_panel {
-    width: 700px;
-    margin-bottom: 10px;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-2/src/index.ts b/samples/grids/tree-grid/toolbar-sample-2/src/index.ts
index 9c9b94fb98..b96a0ed44b 100644
--- a/samples/grids/tree-grid/toolbar-sample-2/src/index.ts
+++ b/samples/grids/tree-grid/toolbar-sample-2/src/index.ts
@@ -2,12 +2,12 @@ import { IgcCellTemplateContext, IgcColumnComponent, IgcTreeGridComponent } from
 import { defineComponents, IgcAvatarComponent, IgcInputComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
 import { EmployeesFlatAvatars } from './EmployeesFlatAvatars';
 import { html } from 'lit-html';
-
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
-
 import "./index.css";
 
+
+
 defineComponents(IgcAvatarComponent, IgcInputComponent, IgcSwitchComponent);
 
 export class Sample {
@@ -59,7 +59,7 @@ export class Sample {
         }
         return this._employeesFlatAvatars;
     }
-    
+
     public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
         return html`<div class="cell__inner">
             <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
diff --git a/samples/grids/tree-grid/toolbar-sample-2/tsconfig.json b/samples/grids/tree-grid/toolbar-sample-2/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/toolbar-sample-2/tsconfig.json
+++ b/samples/grids/tree-grid/toolbar-sample-2/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/toolbar-sample-3/package.json b/samples/grids/tree-grid/toolbar-sample-3/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/toolbar-sample-3/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-3/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/toolbar-sample-3/sandbox.config.json b/samples/grids/tree-grid/toolbar-sample-3/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/toolbar-sample-3/sandbox.config.json
+++ b/samples/grids/tree-grid/toolbar-sample-3/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-3/src/index.css b/samples/grids/tree-grid/toolbar-sample-3/src/index.css
index 4ffa793996..0fe9368715 100644
--- a/samples/grids/tree-grid/toolbar-sample-3/src/index.css
+++ b/samples/grids/tree-grid/toolbar-sample-3/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cell__inner {
-    display: flex;
-    align-items: center;
-}
-.name {
-    margin-left: 30px;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-3/src/index.ts b/samples/grids/tree-grid/toolbar-sample-3/src/index.ts
index f52d0359b6..02c530acf9 100644
--- a/samples/grids/tree-grid/toolbar-sample-3/src/index.ts
+++ b/samples/grids/tree-grid/toolbar-sample-3/src/index.ts
@@ -4,10 +4,10 @@ import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatA
 import { IgcExporterOptionsBase, IgcGridToolbarExportEventArgs } from 'igniteui-webcomponents-grids/grids';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -29,7 +29,6 @@ export class Sample {
             column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatAvatars: EmployeesFlatAvatars = null;
@@ -41,7 +40,6 @@ export class Sample {
         return this._employeesFlatAvatars;
     }
 
-
     public webTreeGridToolbarExporting(evt: CustomEvent<IgcGridToolbarExportEventArgs>): void {
         const args = evt.detail;
         const options: IgcExporterOptionsBase = args.options;
diff --git a/samples/grids/tree-grid/toolbar-sample-3/tsconfig.json b/samples/grids/tree-grid/toolbar-sample-3/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/toolbar-sample-3/tsconfig.json
+++ b/samples/grids/tree-grid/toolbar-sample-3/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/toolbar-sample-3/webpack.config.js b/samples/grids/tree-grid/toolbar-sample-3/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/toolbar-sample-3/webpack.config.js
+++ b/samples/grids/tree-grid/toolbar-sample-3/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/toolbar-sample-4/package.json b/samples/grids/tree-grid/toolbar-sample-4/package.json
index b68931a64a..2d8406afa0 100644
--- a/samples/grids/tree-grid/toolbar-sample-4/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-4/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/toolbar-sample-4/sandbox.config.json b/samples/grids/tree-grid/toolbar-sample-4/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/toolbar-sample-4/sandbox.config.json
+++ b/samples/grids/tree-grid/toolbar-sample-4/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-4/src/index.css b/samples/grids/tree-grid/toolbar-sample-4/src/index.css
index bc0d64e5ae..0fe9368715 100644
--- a/samples/grids/tree-grid/toolbar-sample-4/src/index.css
+++ b/samples/grids/tree-grid/toolbar-sample-4/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cell__inner {
-    display: flex;
-    align-items: center;
-}
-
-.name {
-    margin-left: 30px;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-4/src/index.ts b/samples/grids/tree-grid/toolbar-sample-4/src/index.ts
index f30c941532..5101546e55 100644
--- a/samples/grids/tree-grid/toolbar-sample-4/src/index.ts
+++ b/samples/grids/tree-grid/toolbar-sample-4/src/index.ts
@@ -2,12 +2,12 @@ import { IgcCellTemplateContext, IgcColumnComponent, IgcTreeGridComponent } from
 import { defineComponents, IgcAvatarComponent, IgcButtonComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
 import { EmployeesFlatAvatars } from './EmployeesFlatAvatars';
 import { html } from 'lit-html';
-
 import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
-
 import "./index.css";
 
+
+
 defineComponents(IgcButtonComponent, IgcIconComponent, IgcAvatarComponent);
 
 const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg>`;
@@ -36,7 +36,7 @@ export class Sample {
         }
         return this._employeesFlatAvatars;
     }
-    
+
     public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
         return html`<div class="cell__inner">
             <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
diff --git a/samples/grids/tree-grid/toolbar-sample-4/tsconfig.json b/samples/grids/tree-grid/toolbar-sample-4/tsconfig.json
index 861fa3aeb1..de23257dd8 100644
--- a/samples/grids/tree-grid/toolbar-sample-4/tsconfig.json
+++ b/samples/grids/tree-grid/toolbar-sample-4/tsconfig.json
@@ -1,33 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/toolbar-style/package.json b/samples/grids/tree-grid/toolbar-style/package.json
index dc50bbc8f5..f0d6ac50b0 100644
--- a/samples/grids/tree-grid/toolbar-style/package.json
+++ b/samples/grids/tree-grid/toolbar-style/package.json
@@ -24,10 +24,10 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/toolbar-style/sandbox.config.json b/samples/grids/tree-grid/toolbar-style/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/toolbar-style/sandbox.config.json
+++ b/samples/grids/tree-grid/toolbar-style/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-style/src/index.css b/samples/grids/tree-grid/toolbar-style/src/index.css
index aaf900966b..0fe9368715 100644
--- a/samples/grids/tree-grid/toolbar-style/src/index.css
+++ b/samples/grids/tree-grid/toolbar-style/src/index.css
@@ -1,17 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.cell__inner {
-    display: flex;
-    align-items: center;
-}
-.name {
-    margin-left: 30px;
-}
-
-#grid {
-    --ig-grid-toolbar-background-color: #2a2b2f;
-    --ig-grid-toolbar-title-text-color: #ffcd0f;
-    --ig-grid-toolbar-dropdown-background: #2a2b2f;
-}
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-style/src/index.ts b/samples/grids/tree-grid/toolbar-style/src/index.ts
index 95fba8d55d..850479007f 100644
--- a/samples/grids/tree-grid/toolbar-style/src/index.ts
+++ b/samples/grids/tree-grid/toolbar-style/src/index.ts
@@ -3,10 +3,10 @@ import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents
 import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
 import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
 import { html, nothing } from 'lit-html';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineAllComponents } from 'igniteui-webcomponents';
+
 defineAllComponents();
 
 import "./index.css";
@@ -26,7 +26,6 @@ export class Sample {
             column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
         }
         this._bind();
-
     }
 
     private _employeesFlatAvatars: EmployeesFlatAvatars = null;
@@ -38,7 +37,6 @@ export class Sample {
         return this._employeesFlatAvatars;
     }
 
-
         public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
         return html`<div class="cell__inner">
         <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
diff --git a/samples/grids/tree-grid/toolbar-style/tsconfig.json b/samples/grids/tree-grid/toolbar-style/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/toolbar-style/tsconfig.json
+++ b/samples/grids/tree-grid/toolbar-style/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/toolbar-style/webpack.config.js b/samples/grids/tree-grid/toolbar-style/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/toolbar-style/webpack.config.js
+++ b/samples/grids/tree-grid/toolbar-style/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/package.json b/samples/grids/tree-grid/using-primary-foreign-keys/package.json
index bffd17003a..e64b93a333 100644
--- a/samples/grids/tree-grid/using-primary-foreign-keys/package.json
+++ b/samples/grids/tree-grid/using-primary-foreign-keys/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-grids": "5.1.0",
-    "igniteui-webcomponents-inputs": "5.1.0",
-    "igniteui-webcomponents-layouts": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-grids": "5.1.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.1.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/sandbox.config.json b/samples/grids/tree-grid/using-primary-foreign-keys/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/grids/tree-grid/using-primary-foreign-keys/sandbox.config.json
+++ b/samples/grids/tree-grid/using-primary-foreign-keys/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/src/index.css b/samples/grids/tree-grid/using-primary-foreign-keys/src/index.css
index 8b42ec3ed2..0fe9368715 100644
--- a/samples/grids/tree-grid/using-primary-foreign-keys/src/index.css
+++ b/samples/grids/tree-grid/using-primary-foreign-keys/src/index.css
@@ -1,3 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/src/index.ts b/samples/grids/tree-grid/using-primary-foreign-keys/src/index.ts
index 065a7ebece..16de9b5c75 100644
--- a/samples/grids/tree-grid/using-primary-foreign-keys/src/index.ts
+++ b/samples/grids/tree-grid/using-primary-foreign-keys/src/index.ts
@@ -1,11 +1,11 @@
 import 'igniteui-webcomponents-grids/grids/combined';
 import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
-
 import "./index.css";
 
+
+
 export class Sample {
 
     private treeGrid: IgcTreeGridComponent
@@ -18,7 +18,6 @@ export class Sample {
             treeGrid.data = this.employeesFlatData;
         }
         this._bind();
-
     }
 
     private _employeesFlatData: EmployeesFlatData = null;
diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/tsconfig.json b/samples/grids/tree-grid/using-primary-foreign-keys/tsconfig.json
index a15284fdc2..de23257dd8 100644
--- a/samples/grids/tree-grid/using-primary-foreign-keys/tsconfig.json
+++ b/samples/grids/tree-grid/using-primary-foreign-keys/tsconfig.json
@@ -1,34 +1,14 @@
 {
   "compilerOptions": {
-    "noImplicitReturns": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "declarationDir": "dist/types",
-    "moduleResolution": "node",
-    "declaration": true,
-    "target": "es2015",
-    "module": "es2015",
-    "strict": true,
-    "strictNullChecks": false,
-    "baseUrl": ".",
-    "paths": {
-      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
-      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
-      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
-      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
-      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
-      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
-      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
-      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
-      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
-      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
-      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
-      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
-      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
-      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
-      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
-    }
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
   },
   "include": [
       "src/**/*"
diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/webpack.config.js b/samples/grids/tree-grid/using-primary-foreign-keys/webpack.config.js
index 1de7f08279..9d11a6155c 100644
--- a/samples/grids/tree-grid/using-primary-foreign-keys/webpack.config.js
+++ b/samples/grids/tree-grid/using-primary-foreign-keys/webpack.config.js
@@ -29,6 +29,8 @@ module.exports = env => {
 
     return {
         entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
             path.resolve(__dirname, 'src')
         ] : path.resolve(__dirname, 'src'),
         devtool: isProd ? false : 'source-map',
diff --git a/samples/grids/tree/basic-example/.prettierrc b/samples/grids/tree/basic-example/.prettierrc
index cb0498d36a..15a7c7c6cf 100644
--- a/samples/grids/tree/basic-example/.prettierrc
+++ b/samples/grids/tree/basic-example/.prettierrc
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}
\ No newline at end of file
diff --git a/samples/grids/tree/basic-example/src/index.css b/samples/grids/tree/basic-example/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/grids/tree/basic-example/src/index.css
+++ b/samples/grids/tree/basic-example/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree/basic-example/tsconfig.json b/samples/grids/tree/basic-example/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/grids/tree/basic-example/tsconfig.json
+++ b/samples/grids/tree/basic-example/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/grids/tree/load-on-demand-virtualized/.prettierrc b/samples/grids/tree/load-on-demand-virtualized/.prettierrc
index 1c933eb945..15a7c7c6cf 100644
--- a/samples/grids/tree/load-on-demand-virtualized/.prettierrc
+++ b/samples/grids/tree/load-on-demand-virtualized/.prettierrc
@@ -1,11 +1,11 @@
 {
-    "printWidth": 120,
-    "tabWidth": 4,
-    "useTabs": false,
-    "semi": true,
-    "singleQuote": false,
-    "trailingComma": "none",
-    "bracketSpacing": true,
-    "jsxBracketSameLine": false,
-    "fluid": false
-}
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/grids/tree/load-on-demand-virtualized/sandbox.config.json b/samples/grids/tree/load-on-demand-virtualized/sandbox.config.json
index 2ab51ac3f9..5c5b54fe21 100644
--- a/samples/grids/tree/load-on-demand-virtualized/sandbox.config.json
+++ b/samples/grids/tree/load-on-demand-virtualized/sandbox.config.json
@@ -4,3 +4,4 @@
     "view": "browser",
     "template": "parcel"
 }
+  
\ No newline at end of file
diff --git a/samples/grids/tree/load-on-demand-virtualized/src/index.css b/samples/grids/tree/load-on-demand-virtualized/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/grids/tree/load-on-demand-virtualized/src/index.css
+++ b/samples/grids/tree/load-on-demand-virtualized/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree/load-on-demand-virtualized/tsconfig.json b/samples/grids/tree/load-on-demand-virtualized/tsconfig.json
index 4e48434483..de23257dd8 100644
--- a/samples/grids/tree/load-on-demand-virtualized/tsconfig.json
+++ b/samples/grids/tree/load-on-demand-virtualized/tsconfig.json
@@ -8,8 +8,7 @@
       "declaration": true,
       "target": "es2015",
       "module": "es2015",
-      "strict": true,
-      "experimentalDecorators": true
+      "strict": true
   },
   "include": [
       "src/**/*"
@@ -18,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/grids/tree/load-on-demand-virtualized/webpack.config.js b/samples/grids/tree/load-on-demand-virtualized/webpack.config.js
index 15e131c0d0..9d11a6155c 100644
--- a/samples/grids/tree/load-on-demand-virtualized/webpack.config.js
+++ b/samples/grids/tree/load-on-demand-virtualized/webpack.config.js
@@ -1,99 +1,103 @@
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const path = require("path");
-const webpack = require("webpack");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = (env) => {
-    const nodeEnv = process.env.NODE_ENV || "development";
-    const isProd = nodeEnv === "production";
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
     const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
     console.log(">> webpack nodeEnv=" + nodeEnv);
     console.log(">> webpack isProd=" + isProd);
     console.log(">> webpack isLegacy=" + isLegacy);
     const presets = [
-        [
-            "@babel/preset-env",
-            {
-                useBuiltIns: "usage",
-                corejs: 3,
-                targets: {
-                    browsers: isLegacy ? ["defaults"] : ["last 2 Chrome versions", "last 2 Safari versions", "last 2 iOS versions", "last 2 Firefox versions", "last 2 Edge versions"]
-                }
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
             }
-        ],
+        }],
         "@babel/preset-typescript"
     ];
 
     return {
-        entry: isLegacy ? [path.resolve(__dirname, "node_modules/@webcomponents/custom-elements"), path.resolve(__dirname, "node_modules/@webcomponents/template"), path.resolve(__dirname, "src")] : path.resolve(__dirname, "src"),
-        devtool: isProd ? false : "source-map",
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
         output: {
-            filename: isProd ? "[fullhash].bundle.js" : "[fullhash].bundle.js",
-            globalObject: "this",
-            path: path.resolve(__dirname, "dist")
-        },
-
-        devServer: {
-            client: {
-                overlay: false
-            }
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
         },
 
         resolve: {
-            mainFields: ["esm2015", "module", "main"],
-            extensions: [".ts", ".js", ".json"],
-            plugins: [
-                new TsconfigPathsPlugin({
-                    configFile: "./tsconfig.json",
-                    extensions: [".ts", ".js"],
-                    mainFields: ["esm2015", "module", "main"]
-                })
-            ]
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
         },
 
         module: {
             rules: [
-                { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
-                { test: /\.(csv|tsv)$/, use: ["csv-loader"] },
-                { test: /\.xml$/, use: ["xml-loader"] },
-                { test: /\.css$/, sideEffects: true, use: ["style-loader", "css-loader"] },
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
                 {
                     test: /worker\.(ts|js)$/,
                     use: [
-                        { loader: "worker-loader" },
+                        { loader: 'worker-loader' },
                         {
-                            loader: "babel-loader",
-                            options: {
-                                compact: isProd ? true : false,
-                                presets: presets,
-                                plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
                             }
                         }
                     ]
                 },
                 {
-                    test: /\.(ts|js)$/,
-                    loader: "babel-loader",
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
                     options: {
-                        compact: isProd ? true : false,
-                        presets: presets,
-                        plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
                     },
-                    exclude: function (modulePath) {
-                        return /node_modules/.test(modulePath) && !/igniteui-webcomponents/.test(modulePath) && !/lit-html/.test(modulePath);
-                    }
-                }
-            ]
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
         },
 
         plugins: [
             new webpack.DefinePlugin({
-                "process.env.NODE_ENV": JSON.stringify(nodeEnv)
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: "for-cs",
-                template: "index.html"
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/grids/tree/load-on-demand/.prettierrc b/samples/grids/tree/load-on-demand/.prettierrc
index cb0498d36a..15a7c7c6cf 100644
--- a/samples/grids/tree/load-on-demand/.prettierrc
+++ b/samples/grids/tree/load-on-demand/.prettierrc
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}
\ No newline at end of file
diff --git a/samples/grids/tree/load-on-demand/sandbox.config.json b/samples/grids/tree/load-on-demand/sandbox.config.json
index 2ab51ac3f9..5c5b54fe21 100644
--- a/samples/grids/tree/load-on-demand/sandbox.config.json
+++ b/samples/grids/tree/load-on-demand/sandbox.config.json
@@ -4,3 +4,4 @@
     "view": "browser",
     "template": "parcel"
 }
+  
\ No newline at end of file
diff --git a/samples/grids/tree/load-on-demand/src/index.css b/samples/grids/tree/load-on-demand/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/grids/tree/load-on-demand/src/index.css
+++ b/samples/grids/tree/load-on-demand/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/grids/tree/load-on-demand/tsconfig.json b/samples/grids/tree/load-on-demand/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/grids/tree/load-on-demand/tsconfig.json
+++ b/samples/grids/tree/load-on-demand/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/src/index.css b/samples/inputs/button-group/alignment/src/index.css
index e224a9ca33..0fe9368715 100644
--- a/samples/inputs/button-group/alignment/src/index.css
+++ b/samples/inputs/button-group/alignment/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-button-group {
-    width: 200px;
-}
-
-igc-ripple {
-    --color: gray;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/src/index.ts b/samples/inputs/button-group/alignment/src/index.ts
index 8a1078b247..e0a793139e 100644
--- a/samples/inputs/button-group/alignment/src/index.ts
+++ b/samples/inputs/button-group/alignment/src/index.ts
@@ -8,4 +8,4 @@ export class ButtonGroupAlignment {
     }
 }
 
-new ButtonGroupAlignment();
\ No newline at end of file
+new ButtonGroupAlignment();
diff --git a/samples/inputs/button-group/overview/src/index.css b/samples/inputs/button-group/overview/src/index.css
index 59cdda9df7..0fe9368715 100644
--- a/samples/inputs/button-group/overview/src/index.css
+++ b/samples/inputs/button-group/overview/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-button-group {
-    max-width: 400px;
-}
-
-igc-ripple {
-    --color: gray;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/button-group/overview/src/index.ts b/samples/inputs/button-group/overview/src/index.ts
index 71c53890d4..e2c28a3f29 100644
--- a/samples/inputs/button-group/overview/src/index.ts
+++ b/samples/inputs/button-group/overview/src/index.ts
@@ -37,4 +37,4 @@ export class ButtonGroupOverview {
     }
 }
 
-new ButtonGroupOverview();
\ No newline at end of file
+new ButtonGroupOverview();
diff --git a/samples/inputs/button-group/selection/src/index.css b/samples/inputs/button-group/selection/src/index.css
index c7e74ab1f4..0fe9368715 100644
--- a/samples/inputs/button-group/selection/src/index.css
+++ b/samples/inputs/button-group/selection/src/index.css
@@ -1,19 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.radio-group-container {
-    width: 400px;
-    margin-bottom: 1rem;
-}
-
-igc-radio-group {
-    padding: 0.5rem;
-}
-
-igc-button-group {
-    width: 200px;
-}
-
-igc-ripple {
-    --color: gray;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/src/index.ts b/samples/inputs/button-group/selection/src/index.ts
index 5454962886..91d0b36350 100644
--- a/samples/inputs/button-group/selection/src/index.ts
+++ b/samples/inputs/button-group/selection/src/index.ts
@@ -45,4 +45,4 @@ export class ButtonGroupSelection {
     }
 }
 
-new ButtonGroupSelection();
\ No newline at end of file
+new ButtonGroupSelection();
diff --git a/samples/inputs/button-group/size/src/index.css b/samples/inputs/button-group/size/src/index.css
index 19ba3286d0..0fe9368715 100644
--- a/samples/inputs/button-group/size/src/index.css
+++ b/samples/inputs/button-group/size/src/index.css
@@ -1,6 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-button-group {
-    --ig-size: var(--ig-size-large);
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/src/index.ts b/samples/inputs/button-group/size/src/index.ts
index 462645e6cd..0b15bf484f 100644
--- a/samples/inputs/button-group/size/src/index.ts
+++ b/samples/inputs/button-group/size/src/index.ts
@@ -15,4 +15,4 @@ export class ButtonGroupSize {
   }
 }
 
-new ButtonGroupSize();
\ No newline at end of file
+new ButtonGroupSize();
diff --git a/samples/inputs/button-group/styling/src/index.css b/samples/inputs/button-group/styling/src/index.css
index 4c4814d446..0fe9368715 100644
--- a/samples/inputs/button-group/styling/src/index.css
+++ b/samples/inputs/button-group/styling/src/index.css
@@ -1,30 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-button-group {
-    width: 200px;
-}
-
-igc-ripple {
-    --color: gray;
-}
-
-igc-toggle-button::part(toggle) {
-    color: #fdfdfd;
-    background: #2f4d6a;
-}
-
-igc-toggle-button::part(toggle):hover {
-    color: #fdfdfd;
-    background: #1f3347;
-}
-
-igc-toggle-button[disabled]::part(toggle) {
-    color: gray;
-    background: lightgray;
-}
-
-igc-toggle-button[selected]::part(toggle) {
-    color: #fdfdfd;
-    background: #1f3347;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/src/index.ts b/samples/inputs/button-group/styling/src/index.ts
index b6c91178f4..7a33e389bf 100644
--- a/samples/inputs/button-group/styling/src/index.ts
+++ b/samples/inputs/button-group/styling/src/index.ts
@@ -8,4 +8,4 @@ export class ButtonGroupStyling {
     }
 }
 
-new ButtonGroupStyling();
\ No newline at end of file
+new ButtonGroupStyling();
diff --git a/samples/inputs/button/size/src/index.ts b/samples/inputs/button/size/src/index.ts
index abe366cc55..5d171b2944 100644
--- a/samples/inputs/button/size/src/index.ts
+++ b/samples/inputs/button/size/src/index.ts
@@ -22,7 +22,7 @@ export class ButtonSizing {
             this.flatButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
             this.containedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
             this.fabButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
-        });        
+        });
     }
 }
 
diff --git a/samples/inputs/combo/features/src/index.css b/samples/inputs/combo/features/src/index.css
index ae63539c88..0fe9368715 100644
--- a/samples/inputs/combo/features/src/index.css
+++ b/samples/inputs/combo/features/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.options {
-    display: flex;
-    flex-direction: column;
-    margin-top: 12px; 
-    gap: 8px;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/combo/selection/src/index.css b/samples/inputs/combo/selection/src/index.css
index 968620263b..0fe9368715 100644
--- a/samples/inputs/combo/selection/src/index.css
+++ b/samples/inputs/combo/selection/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-.button-container {
-    display: flex;
-    margin-top: 16px;
-    gap: 8px;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/combo/simplified/src/index.css b/samples/inputs/combo/simplified/src/index.css
index ae63539c88..0fe9368715 100644
--- a/samples/inputs/combo/simplified/src/index.css
+++ b/samples/inputs/combo/simplified/src/index.css
@@ -1,9 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.options {
-    display: flex;
-    flex-direction: column;
-    margin-top: 12px; 
-    gap: 8px;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/combo/styling/src/index.css b/samples/inputs/combo/styling/src/index.css
index a596b95f1b..0fe9368715 100644
--- a/samples/inputs/combo/styling/src/index.css
+++ b/samples/inputs/combo/styling/src/index.css
@@ -1,33 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-igc-combo::part(label),
-igc-combo::part(empty),
-igc-combo::part(group-header) {
-    color: #2B3A55;
-}
-
-igc-combo::part(native-input),
-igc-combo::part(list-wrapper) {
-    background-color: #F2E5E5;
-}
-
-igc-combo::part(item selected) {
-    background: #E8C4C4;
-}
-
-igc-combo::part(item selected active),
-igc-combo::part(item selected):hover {
-    background: #CE7777;
-}
-
-igc-combo::part(prefix),
-igc-combo::part(suffix),
-igc-combo::part(case-icon) {
-    color: #F2E5E5;
-    background-color: #2B3A55;
-}
-
-igc-combo::part(checkbox checked)::after {
-    background: #2B3A55;
-    box-shadow: none;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/combo/templates/src/index.css b/samples/inputs/combo/templates/src/index.css
index 5c44cbceb8..0fe9368715 100644
--- a/samples/inputs/combo/templates/src/index.css
+++ b/samples/inputs/combo/templates/src/index.css
@@ -1,12 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-combo::part(header),
-igc-combo::part(footer) {
-    padding: 12px 8px;
-    text-align: center;
-}
-
-igc-combo::part(empty) {
-    font-size: 16px;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/combo/templates/src/index.ts b/samples/inputs/combo/templates/src/index.ts
index 7577d76e81..a0a27f3c26 100644
--- a/samples/inputs/combo/templates/src/index.ts
+++ b/samples/inputs/combo/templates/src/index.ts
@@ -47,7 +47,6 @@ export class ComboTemplates {
     protected itemTemplate: ComboItemTemplate<City> = ({ item }) => {
         return html` <span><b>${item.name}</b> [${item.id}]</span>`;
     };
-
     protected groupHeaderTemplate: ComboItemTemplate<City> = ({ item }) => {
         return html`<span>Country of ${item.country}</span>`;
     };
diff --git a/samples/inputs/date-time-input/step-up-down/src/index.ts b/samples/inputs/date-time-input/step-up-down/src/index.ts
index 0ae596928a..ca895aa2eb 100644
--- a/samples/inputs/date-time-input/step-up-down/src/index.ts
+++ b/samples/inputs/date-time-input/step-up-down/src/index.ts
@@ -27,11 +27,11 @@ export class DateTimeInputStepUpDown {
         const up = document.getElementById('up');
         const down = document.getElementById('down');
 
-        up!.addEventListener('click', () => {   
+        up!.addEventListener('click', () => {
             input.stepUp("month" as DatePart);
         });
 
-        down!.addEventListener('click', () => {   
+        down!.addEventListener('click', () => {
             input.stepDown("date" as DatePart);
         });
 
diff --git a/samples/inputs/icon-button/styling/src/index.css b/samples/inputs/icon-button/styling/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/inputs/icon-button/styling/src/index.css
+++ b/samples/inputs/icon-button/styling/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/icon-button/variant/src/index.ts b/samples/inputs/icon-button/variant/src/index.ts
index 6ba73102ca..7ac6cd0512 100644
--- a/samples/inputs/icon-button/variant/src/index.ts
+++ b/samples/inputs/icon-button/variant/src/index.ts
@@ -5,7 +5,6 @@ defineComponents(IgcIconButtonComponent);
 const thumbUpIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
 
-
 export class IconButtonVariants {
     constructor() {
         registerIconFromText("thumb-up", thumbUpIcon, "material");
diff --git a/samples/inputs/input/size/src/index.ts b/samples/inputs/input/size/src/index.ts
index daad80b737..18cd17009e 100644
--- a/samples/inputs/input/size/src/index.ts
+++ b/samples/inputs/input/size/src/index.ts
@@ -18,12 +18,12 @@ export class InputSize {
         this.inputDisabled = document.getElementById('input-disabled') as IgcInputComponent;
         this.inputReadonly = document.getElementById('input-readonly') as IgcInputComponent;
         registerIconFromText("phone", phoneIcon);
-        
+
         this.radioGroup.addEventListener('click', (radio: any) => {
             this.inputRequired.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
             this.inputDisabled.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
             this.inputReadonly.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
-        }); 
+        });
     }
 }
 
diff --git a/samples/inputs/mask-input/applying-mask/.prettierrc b/samples/inputs/mask-input/applying-mask/.prettierrc
index cb0498d36a..15a7c7c6cf 100644
--- a/samples/inputs/mask-input/applying-mask/.prettierrc
+++ b/samples/inputs/mask-input/applying-mask/.prettierrc
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}
\ No newline at end of file
diff --git a/samples/inputs/mask-input/applying-mask/src/index.css b/samples/inputs/mask-input/applying-mask/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/inputs/mask-input/applying-mask/src/index.css
+++ b/samples/inputs/mask-input/applying-mask/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/mask-input/applying-mask/tsconfig.json b/samples/inputs/mask-input/applying-mask/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/inputs/mask-input/applying-mask/tsconfig.json
+++ b/samples/inputs/mask-input/applying-mask/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/inputs/mask-input/overview/.prettierrc b/samples/inputs/mask-input/overview/.prettierrc
index cb0498d36a..15a7c7c6cf 100644
--- a/samples/inputs/mask-input/overview/.prettierrc
+++ b/samples/inputs/mask-input/overview/.prettierrc
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}
\ No newline at end of file
diff --git a/samples/inputs/mask-input/overview/src/index.css b/samples/inputs/mask-input/overview/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/inputs/mask-input/overview/src/index.css
+++ b/samples/inputs/mask-input/overview/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/mask-input/overview/tsconfig.json b/samples/inputs/mask-input/overview/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/inputs/mask-input/overview/tsconfig.json
+++ b/samples/inputs/mask-input/overview/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/inputs/mask-input/value-modes/.prettierrc b/samples/inputs/mask-input/value-modes/.prettierrc
index cb0498d36a..15a7c7c6cf 100644
--- a/samples/inputs/mask-input/value-modes/.prettierrc
+++ b/samples/inputs/mask-input/value-modes/.prettierrc
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}
\ No newline at end of file
diff --git a/samples/inputs/mask-input/value-modes/src/index.css b/samples/inputs/mask-input/value-modes/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/inputs/mask-input/value-modes/src/index.css
+++ b/samples/inputs/mask-input/value-modes/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/mask-input/value-modes/tsconfig.json b/samples/inputs/mask-input/value-modes/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/inputs/mask-input/value-modes/tsconfig.json
+++ b/samples/inputs/mask-input/value-modes/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/inputs/radio/styling/src/index.css b/samples/inputs/radio/styling/src/index.css
index 9f94f15bdd..0fe9368715 100644
--- a/samples/inputs/radio/styling/src/index.css
+++ b/samples/inputs/radio/styling/src/index.css
@@ -1,11 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-:root {
-    --ig-primary-h: 60deg;
-    --ig-primary-s: 100%;
-    --ig-primary-l: 25%;
-}
-
-igc-radio::part(control) {
-    --size: 18px;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/rating/basic/src/index.css b/samples/inputs/rating/basic/src/index.css
index cb2d060e11..0fe9368715 100644
--- a/samples/inputs/rating/basic/src/index.css
+++ b/samples/inputs/rating/basic/src/index.css
@@ -1,5 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-.size-large {
-    --ig-size: var(--ig-size-large);
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/rating/single-selection/src/index.css b/samples/inputs/rating/single-selection/src/index.css
index c74824388c..0fe9368715 100644
--- a/samples/inputs/rating/single-selection/src/index.css
+++ b/samples/inputs/rating/single-selection/src/index.css
@@ -1,6 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-rating::part(symbols) {
-    gap: 8px; 
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/rating/styling/src/index.css b/samples/inputs/rating/styling/src/index.css
index 3b69b0b124..0fe9368715 100644
--- a/samples/inputs/rating/styling/src/index.css
+++ b/samples/inputs/rating/styling/src/index.css
@@ -1,28 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-rating {
-    --symbol-size: 44px;
-    --symbol-full-color: hsla(var(--ig-warn-A400), var(--ig-warn-a));
-    --symbol-empty-color: hsla(var(--ig-warn-A400), var(--ig-warn-a));
-}
-
-igc-rating[disabled] {
-    --symbol-full-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-    --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-
-igc-rating::part(label) {
-    font-size: 18px;
-    font-weight: 600;
-    text-transform: var(--ig-overline-text-transform);
-    color: hsla(var(--ig-gray-600), var(--ig-gray-a));
-}
-
-igc-rating::part(symbols) {
-    gap: 8px; 
-}
-
-.size-large {
-    --ig-size: var(--ig-size-large);
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/form-integration/sandbox.config.json b/samples/inputs/textarea/form-integration/sandbox.config.json
index 2ab51ac3f9..5c5b54fe21 100644
--- a/samples/inputs/textarea/form-integration/sandbox.config.json
+++ b/samples/inputs/textarea/form-integration/sandbox.config.json
@@ -4,3 +4,4 @@
     "view": "browser",
     "template": "parcel"
 }
+  
\ No newline at end of file
diff --git a/samples/inputs/textarea/form-integration/src/index.css b/samples/inputs/textarea/form-integration/src/index.css
index 7a32d0ee73..0fe9368715 100644
--- a/samples/inputs/textarea/form-integration/src/index.css
+++ b/samples/inputs/textarea/form-integration/src/index.css
@@ -1,6 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.controls {
-    margin-top: 1rem;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/form-integration/tsconfig.json b/samples/inputs/textarea/form-integration/tsconfig.json
index b4a0e0068d..de23257dd8 100644
--- a/samples/inputs/textarea/form-integration/tsconfig.json
+++ b/samples/inputs/textarea/form-integration/tsconfig.json
@@ -1,15 +1,20 @@
 {
-    "compilerOptions": {
-        "noImplicitReturns": true,
-        "esModuleInterop": true,
-        "noImplicitAny": true,
-        "declarationDir": "dist/types",
-        "moduleResolution": "node",
-        "declaration": true,
-        "target": "es2015",
-        "module": "es2015",
-        "strict": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist"]
-}
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/textarea/form-integration/webpack.config.js b/samples/inputs/textarea/form-integration/webpack.config.js
index bd525cc131..9d11a6155c 100644
--- a/samples/inputs/textarea/form-integration/webpack.config.js
+++ b/samples/inputs/textarea/form-integration/webpack.config.js
@@ -1,93 +1,103 @@
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const path = require("path");
-const webpack = require("webpack");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = (env) => {
-    const nodeEnv = process.env.NODE_ENV || "development";
-    const isProd = nodeEnv === "production";
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
     const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
     console.log(">> webpack nodeEnv=" + nodeEnv);
     console.log(">> webpack isProd=" + isProd);
     console.log(">> webpack isLegacy=" + isLegacy);
     const presets = [
-        [
-            "@babel/preset-env",
-            {
-                useBuiltIns: "usage",
-                corejs: 3,
-                targets: {
-                    browsers: isLegacy ? ["defaults"] : ["last 2 Chrome versions", "last 2 Safari versions", "last 2 iOS versions", "last 2 Firefox versions", "last 2 Edge versions"]
-                }
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
             }
-        ],
+        }],
         "@babel/preset-typescript"
     ];
 
     return {
-        entry: isLegacy ? [path.resolve(__dirname, "node_modules/@webcomponents/custom-elements"), path.resolve(__dirname, "node_modules/@webcomponents/template"), path.resolve(__dirname, "src")] : path.resolve(__dirname, "src"),
-        devtool: isProd ? false : "source-map",
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
         output: {
-            filename: isProd ? "[fullhash].bundle.js" : "[fullhash].bundle.js",
-            globalObject: "this",
-            path: path.resolve(__dirname, "dist")
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
         },
 
         resolve: {
-            mainFields: ["esm2015", "module", "main"],
-            extensions: [".ts", ".js", ".json"],
-            plugins: [
-                new TsconfigPathsPlugin({
-                    configFile: "./tsconfig.json",
-                    extensions: [".ts", ".js"],
-                    mainFields: ["esm2015", "module", "main"]
-                })
-            ]
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
         },
 
         module: {
             rules: [
-                { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
-                { test: /\.(csv|tsv)$/, use: ["csv-loader"] },
-                { test: /\.xml$/, use: ["xml-loader"] },
-                { test: /\.css$/, sideEffects: true, use: ["style-loader", "css-loader"] },
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
                 {
                     test: /worker\.(ts|js)$/,
                     use: [
-                        { loader: "worker-loader" },
+                        { loader: 'worker-loader' },
                         {
-                            loader: "babel-loader",
-                            options: {
-                                compact: isProd ? true : false,
-                                presets: presets,
-                                plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
                             }
                         }
                     ]
                 },
                 {
-                    test: /\.(ts|js)$/,
-                    loader: "babel-loader",
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
                     options: {
-                        compact: isProd ? true : false,
-                        presets: presets,
-                        plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
                     },
-                    exclude: function (modulePath) {
-                        return /node_modules/.test(modulePath) && !/igniteui-webcomponents/.test(modulePath) && !/lit-html/.test(modulePath);
-                    }
-                }
-            ]
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
         },
 
         plugins: [
             new webpack.DefinePlugin({
-                "process.env.NODE_ENV": JSON.stringify(nodeEnv)
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: "for-cs",
-                template: "index.html"
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/inputs/textarea/overview/sandbox.config.json b/samples/inputs/textarea/overview/sandbox.config.json
index 2ab51ac3f9..5c5b54fe21 100644
--- a/samples/inputs/textarea/overview/sandbox.config.json
+++ b/samples/inputs/textarea/overview/sandbox.config.json
@@ -4,3 +4,4 @@
     "view": "browser",
     "template": "parcel"
 }
+  
\ No newline at end of file
diff --git a/samples/inputs/textarea/overview/src/index.css b/samples/inputs/textarea/overview/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/inputs/textarea/overview/src/index.css
+++ b/samples/inputs/textarea/overview/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/overview/tsconfig.json b/samples/inputs/textarea/overview/tsconfig.json
index b4a0e0068d..de23257dd8 100644
--- a/samples/inputs/textarea/overview/tsconfig.json
+++ b/samples/inputs/textarea/overview/tsconfig.json
@@ -1,15 +1,20 @@
 {
-    "compilerOptions": {
-        "noImplicitReturns": true,
-        "esModuleInterop": true,
-        "noImplicitAny": true,
-        "declarationDir": "dist/types",
-        "moduleResolution": "node",
-        "declaration": true,
-        "target": "es2015",
-        "module": "es2015",
-        "strict": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist"]
-}
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/textarea/overview/webpack.config.js b/samples/inputs/textarea/overview/webpack.config.js
index bd525cc131..9d11a6155c 100644
--- a/samples/inputs/textarea/overview/webpack.config.js
+++ b/samples/inputs/textarea/overview/webpack.config.js
@@ -1,93 +1,103 @@
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const path = require("path");
-const webpack = require("webpack");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = (env) => {
-    const nodeEnv = process.env.NODE_ENV || "development";
-    const isProd = nodeEnv === "production";
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
     const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
     console.log(">> webpack nodeEnv=" + nodeEnv);
     console.log(">> webpack isProd=" + isProd);
     console.log(">> webpack isLegacy=" + isLegacy);
     const presets = [
-        [
-            "@babel/preset-env",
-            {
-                useBuiltIns: "usage",
-                corejs: 3,
-                targets: {
-                    browsers: isLegacy ? ["defaults"] : ["last 2 Chrome versions", "last 2 Safari versions", "last 2 iOS versions", "last 2 Firefox versions", "last 2 Edge versions"]
-                }
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
             }
-        ],
+        }],
         "@babel/preset-typescript"
     ];
 
     return {
-        entry: isLegacy ? [path.resolve(__dirname, "node_modules/@webcomponents/custom-elements"), path.resolve(__dirname, "node_modules/@webcomponents/template"), path.resolve(__dirname, "src")] : path.resolve(__dirname, "src"),
-        devtool: isProd ? false : "source-map",
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
         output: {
-            filename: isProd ? "[fullhash].bundle.js" : "[fullhash].bundle.js",
-            globalObject: "this",
-            path: path.resolve(__dirname, "dist")
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
         },
 
         resolve: {
-            mainFields: ["esm2015", "module", "main"],
-            extensions: [".ts", ".js", ".json"],
-            plugins: [
-                new TsconfigPathsPlugin({
-                    configFile: "./tsconfig.json",
-                    extensions: [".ts", ".js"],
-                    mainFields: ["esm2015", "module", "main"]
-                })
-            ]
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
         },
 
         module: {
             rules: [
-                { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
-                { test: /\.(csv|tsv)$/, use: ["csv-loader"] },
-                { test: /\.xml$/, use: ["xml-loader"] },
-                { test: /\.css$/, sideEffects: true, use: ["style-loader", "css-loader"] },
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
                 {
                     test: /worker\.(ts|js)$/,
                     use: [
-                        { loader: "worker-loader" },
+                        { loader: 'worker-loader' },
                         {
-                            loader: "babel-loader",
-                            options: {
-                                compact: isProd ? true : false,
-                                presets: presets,
-                                plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
                             }
                         }
                     ]
                 },
                 {
-                    test: /\.(ts|js)$/,
-                    loader: "babel-loader",
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
                     options: {
-                        compact: isProd ? true : false,
-                        presets: presets,
-                        plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
                     },
-                    exclude: function (modulePath) {
-                        return /node_modules/.test(modulePath) && !/igniteui-webcomponents/.test(modulePath) && !/lit-html/.test(modulePath);
-                    }
-                }
-            ]
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
         },
 
         plugins: [
             new webpack.DefinePlugin({
-                "process.env.NODE_ENV": JSON.stringify(nodeEnv)
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: "for-cs",
-                template: "index.html"
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/inputs/textarea/resize/sandbox.config.json b/samples/inputs/textarea/resize/sandbox.config.json
index 2ab51ac3f9..5c5b54fe21 100644
--- a/samples/inputs/textarea/resize/sandbox.config.json
+++ b/samples/inputs/textarea/resize/sandbox.config.json
@@ -4,3 +4,4 @@
     "view": "browser",
     "template": "parcel"
 }
+  
\ No newline at end of file
diff --git a/samples/inputs/textarea/resize/src/index.css b/samples/inputs/textarea/resize/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/inputs/textarea/resize/src/index.css
+++ b/samples/inputs/textarea/resize/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/resize/tsconfig.json b/samples/inputs/textarea/resize/tsconfig.json
index b4a0e0068d..de23257dd8 100644
--- a/samples/inputs/textarea/resize/tsconfig.json
+++ b/samples/inputs/textarea/resize/tsconfig.json
@@ -1,15 +1,20 @@
 {
-    "compilerOptions": {
-        "noImplicitReturns": true,
-        "esModuleInterop": true,
-        "noImplicitAny": true,
-        "declarationDir": "dist/types",
-        "moduleResolution": "node",
-        "declaration": true,
-        "target": "es2015",
-        "module": "es2015",
-        "strict": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist"]
-}
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/textarea/resize/webpack.config.js b/samples/inputs/textarea/resize/webpack.config.js
index bd525cc131..9d11a6155c 100644
--- a/samples/inputs/textarea/resize/webpack.config.js
+++ b/samples/inputs/textarea/resize/webpack.config.js
@@ -1,93 +1,103 @@
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const path = require("path");
-const webpack = require("webpack");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = (env) => {
-    const nodeEnv = process.env.NODE_ENV || "development";
-    const isProd = nodeEnv === "production";
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
     const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
     console.log(">> webpack nodeEnv=" + nodeEnv);
     console.log(">> webpack isProd=" + isProd);
     console.log(">> webpack isLegacy=" + isLegacy);
     const presets = [
-        [
-            "@babel/preset-env",
-            {
-                useBuiltIns: "usage",
-                corejs: 3,
-                targets: {
-                    browsers: isLegacy ? ["defaults"] : ["last 2 Chrome versions", "last 2 Safari versions", "last 2 iOS versions", "last 2 Firefox versions", "last 2 Edge versions"]
-                }
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
             }
-        ],
+        }],
         "@babel/preset-typescript"
     ];
 
     return {
-        entry: isLegacy ? [path.resolve(__dirname, "node_modules/@webcomponents/custom-elements"), path.resolve(__dirname, "node_modules/@webcomponents/template"), path.resolve(__dirname, "src")] : path.resolve(__dirname, "src"),
-        devtool: isProd ? false : "source-map",
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
         output: {
-            filename: isProd ? "[fullhash].bundle.js" : "[fullhash].bundle.js",
-            globalObject: "this",
-            path: path.resolve(__dirname, "dist")
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
         },
 
         resolve: {
-            mainFields: ["esm2015", "module", "main"],
-            extensions: [".ts", ".js", ".json"],
-            plugins: [
-                new TsconfigPathsPlugin({
-                    configFile: "./tsconfig.json",
-                    extensions: [".ts", ".js"],
-                    mainFields: ["esm2015", "module", "main"]
-                })
-            ]
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
         },
 
         module: {
             rules: [
-                { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
-                { test: /\.(csv|tsv)$/, use: ["csv-loader"] },
-                { test: /\.xml$/, use: ["xml-loader"] },
-                { test: /\.css$/, sideEffects: true, use: ["style-loader", "css-loader"] },
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
                 {
                     test: /worker\.(ts|js)$/,
                     use: [
-                        { loader: "worker-loader" },
+                        { loader: 'worker-loader' },
                         {
-                            loader: "babel-loader",
-                            options: {
-                                compact: isProd ? true : false,
-                                presets: presets,
-                                plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
                             }
                         }
                     ]
                 },
                 {
-                    test: /\.(ts|js)$/,
-                    loader: "babel-loader",
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
                     options: {
-                        compact: isProd ? true : false,
-                        presets: presets,
-                        plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
                     },
-                    exclude: function (modulePath) {
-                        return /node_modules/.test(modulePath) && !/igniteui-webcomponents/.test(modulePath) && !/lit-html/.test(modulePath);
-                    }
-                }
-            ]
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
         },
 
         plugins: [
             new webpack.DefinePlugin({
-                "process.env.NODE_ENV": JSON.stringify(nodeEnv)
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: "for-cs",
-                template: "index.html"
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/inputs/textarea/slots/sandbox.config.json b/samples/inputs/textarea/slots/sandbox.config.json
index 2ab51ac3f9..5c5b54fe21 100644
--- a/samples/inputs/textarea/slots/sandbox.config.json
+++ b/samples/inputs/textarea/slots/sandbox.config.json
@@ -4,3 +4,4 @@
     "view": "browser",
     "template": "parcel"
 }
+  
\ No newline at end of file
diff --git a/samples/inputs/textarea/slots/src/index.css b/samples/inputs/textarea/slots/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/inputs/textarea/slots/src/index.css
+++ b/samples/inputs/textarea/slots/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/slots/tsconfig.json b/samples/inputs/textarea/slots/tsconfig.json
index b4a0e0068d..de23257dd8 100644
--- a/samples/inputs/textarea/slots/tsconfig.json
+++ b/samples/inputs/textarea/slots/tsconfig.json
@@ -1,15 +1,20 @@
 {
-    "compilerOptions": {
-        "noImplicitReturns": true,
-        "esModuleInterop": true,
-        "noImplicitAny": true,
-        "declarationDir": "dist/types",
-        "moduleResolution": "node",
-        "declaration": true,
-        "target": "es2015",
-        "module": "es2015",
-        "strict": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist"]
-}
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/textarea/slots/webpack.config.js b/samples/inputs/textarea/slots/webpack.config.js
index bd525cc131..9d11a6155c 100644
--- a/samples/inputs/textarea/slots/webpack.config.js
+++ b/samples/inputs/textarea/slots/webpack.config.js
@@ -1,93 +1,103 @@
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const path = require("path");
-const webpack = require("webpack");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = (env) => {
-    const nodeEnv = process.env.NODE_ENV || "development";
-    const isProd = nodeEnv === "production";
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
     const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
     console.log(">> webpack nodeEnv=" + nodeEnv);
     console.log(">> webpack isProd=" + isProd);
     console.log(">> webpack isLegacy=" + isLegacy);
     const presets = [
-        [
-            "@babel/preset-env",
-            {
-                useBuiltIns: "usage",
-                corejs: 3,
-                targets: {
-                    browsers: isLegacy ? ["defaults"] : ["last 2 Chrome versions", "last 2 Safari versions", "last 2 iOS versions", "last 2 Firefox versions", "last 2 Edge versions"]
-                }
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
             }
-        ],
+        }],
         "@babel/preset-typescript"
     ];
 
     return {
-        entry: isLegacy ? [path.resolve(__dirname, "node_modules/@webcomponents/custom-elements"), path.resolve(__dirname, "node_modules/@webcomponents/template"), path.resolve(__dirname, "src")] : path.resolve(__dirname, "src"),
-        devtool: isProd ? false : "source-map",
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
         output: {
-            filename: isProd ? "[fullhash].bundle.js" : "[fullhash].bundle.js",
-            globalObject: "this",
-            path: path.resolve(__dirname, "dist")
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
         },
 
         resolve: {
-            mainFields: ["esm2015", "module", "main"],
-            extensions: [".ts", ".js", ".json"],
-            plugins: [
-                new TsconfigPathsPlugin({
-                    configFile: "./tsconfig.json",
-                    extensions: [".ts", ".js"],
-                    mainFields: ["esm2015", "module", "main"]
-                })
-            ]
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
         },
 
         module: {
             rules: [
-                { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
-                { test: /\.(csv|tsv)$/, use: ["csv-loader"] },
-                { test: /\.xml$/, use: ["xml-loader"] },
-                { test: /\.css$/, sideEffects: true, use: ["style-loader", "css-loader"] },
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
                 {
                     test: /worker\.(ts|js)$/,
                     use: [
-                        { loader: "worker-loader" },
+                        { loader: 'worker-loader' },
                         {
-                            loader: "babel-loader",
-                            options: {
-                                compact: isProd ? true : false,
-                                presets: presets,
-                                plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
                             }
                         }
                     ]
                 },
                 {
-                    test: /\.(ts|js)$/,
-                    loader: "babel-loader",
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
                     options: {
-                        compact: isProd ? true : false,
-                        presets: presets,
-                        plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
                     },
-                    exclude: function (modulePath) {
-                        return /node_modules/.test(modulePath) && !/igniteui-webcomponents/.test(modulePath) && !/lit-html/.test(modulePath);
-                    }
-                }
-            ]
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
         },
 
         plugins: [
             new webpack.DefinePlugin({
-                "process.env.NODE_ENV": JSON.stringify(nodeEnv)
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: "for-cs",
-                template: "index.html"
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/inputs/textarea/styling/sandbox.config.json b/samples/inputs/textarea/styling/sandbox.config.json
index 2ab51ac3f9..5c5b54fe21 100644
--- a/samples/inputs/textarea/styling/sandbox.config.json
+++ b/samples/inputs/textarea/styling/sandbox.config.json
@@ -4,3 +4,4 @@
     "view": "browser",
     "template": "parcel"
 }
+  
\ No newline at end of file
diff --git a/samples/inputs/textarea/styling/src/index.css b/samples/inputs/textarea/styling/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/inputs/textarea/styling/src/index.css
+++ b/samples/inputs/textarea/styling/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/styling/tsconfig.json b/samples/inputs/textarea/styling/tsconfig.json
index b4a0e0068d..de23257dd8 100644
--- a/samples/inputs/textarea/styling/tsconfig.json
+++ b/samples/inputs/textarea/styling/tsconfig.json
@@ -1,15 +1,20 @@
 {
-    "compilerOptions": {
-        "noImplicitReturns": true,
-        "esModuleInterop": true,
-        "noImplicitAny": true,
-        "declarationDir": "dist/types",
-        "moduleResolution": "node",
-        "declaration": true,
-        "target": "es2015",
-        "module": "es2015",
-        "strict": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist"]
-}
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/textarea/styling/webpack.config.js b/samples/inputs/textarea/styling/webpack.config.js
index bd525cc131..9d11a6155c 100644
--- a/samples/inputs/textarea/styling/webpack.config.js
+++ b/samples/inputs/textarea/styling/webpack.config.js
@@ -1,93 +1,103 @@
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const path = require("path");
-const webpack = require("webpack");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = (env) => {
-    const nodeEnv = process.env.NODE_ENV || "development";
-    const isProd = nodeEnv === "production";
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
     const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
     console.log(">> webpack nodeEnv=" + nodeEnv);
     console.log(">> webpack isProd=" + isProd);
     console.log(">> webpack isLegacy=" + isLegacy);
     const presets = [
-        [
-            "@babel/preset-env",
-            {
-                useBuiltIns: "usage",
-                corejs: 3,
-                targets: {
-                    browsers: isLegacy ? ["defaults"] : ["last 2 Chrome versions", "last 2 Safari versions", "last 2 iOS versions", "last 2 Firefox versions", "last 2 Edge versions"]
-                }
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
             }
-        ],
+        }],
         "@babel/preset-typescript"
     ];
 
     return {
-        entry: isLegacy ? [path.resolve(__dirname, "node_modules/@webcomponents/custom-elements"), path.resolve(__dirname, "node_modules/@webcomponents/template"), path.resolve(__dirname, "src")] : path.resolve(__dirname, "src"),
-        devtool: isProd ? false : "source-map",
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
         output: {
-            filename: isProd ? "[fullhash].bundle.js" : "[fullhash].bundle.js",
-            globalObject: "this",
-            path: path.resolve(__dirname, "dist")
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
         },
 
         resolve: {
-            mainFields: ["esm2015", "module", "main"],
-            extensions: [".ts", ".js", ".json"],
-            plugins: [
-                new TsconfigPathsPlugin({
-                    configFile: "./tsconfig.json",
-                    extensions: [".ts", ".js"],
-                    mainFields: ["esm2015", "module", "main"]
-                })
-            ]
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
         },
 
         module: {
             rules: [
-                { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
-                { test: /\.(csv|tsv)$/, use: ["csv-loader"] },
-                { test: /\.xml$/, use: ["xml-loader"] },
-                { test: /\.css$/, sideEffects: true, use: ["style-loader", "css-loader"] },
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
                 {
                     test: /worker\.(ts|js)$/,
                     use: [
-                        { loader: "worker-loader" },
+                        { loader: 'worker-loader' },
                         {
-                            loader: "babel-loader",
-                            options: {
-                                compact: isProd ? true : false,
-                                presets: presets,
-                                plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
                             }
                         }
                     ]
                 },
                 {
-                    test: /\.(ts|js)$/,
-                    loader: "babel-loader",
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
                     options: {
-                        compact: isProd ? true : false,
-                        presets: presets,
-                        plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
                     },
-                    exclude: function (modulePath) {
-                        return /node_modules/.test(modulePath) && !/igniteui-webcomponents/.test(modulePath) && !/lit-html/.test(modulePath);
-                    }
-                }
-            ]
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
         },
 
         plugins: [
             new webpack.DefinePlugin({
-                "process.env.NODE_ENV": JSON.stringify(nodeEnv)
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
             }),
             new HtmlWebpackPlugin({
-                title: "for-cs",
-                template: "index.html"
+                title: 'for-cs',
+                template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
         ]
diff --git a/samples/layouts/avatar/image/src/index.ts b/samples/layouts/avatar/image/src/index.ts
index cb131dfb3b..d46a87c84a 100644
--- a/samples/layouts/avatar/image/src/index.ts
+++ b/samples/layouts/avatar/image/src/index.ts
@@ -3,7 +3,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 defineComponents(IgcAvatarComponent, IgcIconComponent);
 const homeIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>'; 
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
 
 export class ImageAvatar {
     constructor() {
diff --git a/samples/layouts/card/integration/.prettierrc b/samples/layouts/card/integration/.prettierrc
index cb0498d36a..15a7c7c6cf 100644
--- a/samples/layouts/card/integration/.prettierrc
+++ b/samples/layouts/card/integration/.prettierrc
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}
\ No newline at end of file
diff --git a/samples/layouts/card/integration/src/index.css b/samples/layouts/card/integration/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/layouts/card/integration/src/index.css
+++ b/samples/layouts/card/integration/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/card/integration/src/index.ts b/samples/layouts/card/integration/src/index.ts
index 19d11b84d9..7a83a89380 100644
--- a/samples/layouts/card/integration/src/index.ts
+++ b/samples/layouts/card/integration/src/index.ts
@@ -1,4 +1,4 @@
-import { 
+import {
   defineComponents,
   IgcNavDrawerComponent,
   IgcIconComponent,
@@ -43,11 +43,11 @@ export class CardIntegrationComponent {
   constructor() {
     const btn = document.getElementById('drawerToggle');
     const navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
-    
+
     btn!.addEventListener('click', () => {
       navDrawer.toggle();
     });
-    
+
     registerIconFromText('logout', logout);
     registerIconFromText('list', list);
     registerIconFromText('dashboard', dashboard);
diff --git a/samples/layouts/card/integration/tsconfig.json b/samples/layouts/card/integration/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/layouts/card/integration/tsconfig.json
+++ b/samples/layouts/card/integration/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/layouts/carousel/animations/src/index.css b/samples/layouts/carousel/animations/src/index.css
index 2d82443ecf..0fe9368715 100644
--- a/samples/layouts/carousel/animations/src/index.css
+++ b/samples/layouts/carousel/animations/src/index.css
@@ -1,49 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.carousel-wrapper {
-    height: 600px;
-    width: 90%;
-    margin: 20px auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.action-wrapper {
-    height: 40px;
-    width: 500px;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-}
-
-.action {
-    display: flex;
-    align-items: center;
-}
-
-.slide-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-}
-
-igc-carousel {
-    border: 0.5px solid #dde0e4;
-}
-
-igc-select {
-    width: 150px;
-    margin-left: 10px;
-    --ig-size: var(--ig-size-small);
-}
-
-igc-card {
-    border: none;
-}
-
-igc-card-header {
-    padding: 8px 16px;
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/carousel/components/src/index.css b/samples/layouts/carousel/components/src/index.css
index b588a05ace..0fe9368715 100644
--- a/samples/layouts/carousel/components/src/index.css
+++ b/samples/layouts/carousel/components/src/index.css
@@ -1,28 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.carousel-container {
-    padding: 16px;
-}
-
-igc-carousel {
-    margin-inline: auto;
-    max-width: 75%;
-    height: 500px;
-}
-
-igc-carousel-slide {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-igc-carousel-slide div {
-    text-align: center;
-    max-width: 40%;
-    margin-inline: auto;
-}
-
-igc-carousel-slide div * {
-    margin-block: 8px;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/carousel/overview/src/index.css b/samples/layouts/carousel/overview/src/index.css
index af4562e186..0fe9368715 100644
--- a/samples/layouts/carousel/overview/src/index.css
+++ b/samples/layouts/carousel/overview/src/index.css
@@ -1,31 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-.carousel-container {
-    padding: 16px;
-}
-
-.image-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-img {
-    object-fit: fill;
-    max-width: 90%;
-}
-
-igc-carousel {
-    margin-inline: auto;
-    max-width: 75%;
-    height: 450px;
-}
-
-igc-carousel-slide::part(base) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    max-width: 75%;
-    margin-inline: auto;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/carousel/thumbnail/src/index.css b/samples/layouts/carousel/thumbnail/src/index.css
index 8d5a7b6cbc..0fe9368715 100644
--- a/samples/layouts/carousel/thumbnail/src/index.css
+++ b/samples/layouts/carousel/thumbnail/src/index.css
@@ -1,16 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-carousel {
-    margin-inline: auto;
-    max-width: 75%;
-}
-
-igc-carousel::part(indicators) {
-    border-radius: 2px;
-}
-
-.blurred {
-    filter: blur(2px);
-    opacity: 0.5;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/divider/middle/src/index.ts b/samples/layouts/divider/middle/src/index.ts
index ac76319cd4..2b6bc7fb6d 100644
--- a/samples/layouts/divider/middle/src/index.ts
+++ b/samples/layouts/divider/middle/src/index.ts
@@ -5,7 +5,7 @@ import './DividerStyling.css';
 defineComponents(IgcDividerComponent);
 
 export class SelectStyling {
-    constructor() {        
+    constructor() {
     }
 }
 
diff --git a/samples/layouts/divider/vertical/src/index.ts b/samples/layouts/divider/vertical/src/index.ts
index ac76319cd4..2b6bc7fb6d 100644
--- a/samples/layouts/divider/vertical/src/index.ts
+++ b/samples/layouts/divider/vertical/src/index.ts
@@ -5,7 +5,7 @@ import './DividerStyling.css';
 defineComponents(IgcDividerComponent);
 
 export class SelectStyling {
-    constructor() {        
+    constructor() {
     }
 }
 
diff --git a/samples/layouts/dock-manager/add-content-runtime/src/index.ts b/samples/layouts/dock-manager/add-content-runtime/src/index.ts
index 8a8c4d2a47..fc29d0754b 100644
--- a/samples/layouts/dock-manager/add-content-runtime/src/index.ts
+++ b/samples/layouts/dock-manager/add-content-runtime/src/index.ts
@@ -1,6 +1,6 @@
 import './DockManagerStyles.css'
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
-import { 
+import {
     IgcContentPane,
     IgcDockManagerPaneType,
     IgcSplitPane,
@@ -43,7 +43,7 @@ export class DockManagerAddContentRuntime {
         const addContentPaneBtn = document.getElementById('contentPaneBtn');
         const addTabGroupPaneBtn = document.getElementById('tabGroupPaneBtn');
         const addFloatingPaneBtn = document.getElementById('floatingPaneBtn');
-       
+
         this.dockManager.layout = {
             rootPane: {
                 type: IgcDockManagerPaneType.splitPane,
@@ -139,7 +139,7 @@ export class DockManagerAddContentRuntime {
             };
 
             this.dockManager.layout.rootPane.panes.push(cp);
-        
+
             this.attachPane();
         })
 
@@ -150,9 +150,9 @@ export class DockManagerAddContentRuntime {
               header: `New Document ${this.counter}`,
             };
 
-            let tabGroup = this.docHostRootPane.panes.find((p: IgcDockManagerPane) => 
+            let tabGroup = this.docHostRootPane.panes.find((p: IgcDockManagerPane) =>
                 p.type === IgcDockManagerPaneType.tabGroupPane) as IgcTabGroupPane;
-    
+
             if (tabGroup) {
                 tabGroup.panes.push(cp);
             } else {
@@ -162,7 +162,7 @@ export class DockManagerAddContentRuntime {
                 };
                 this.docHostRootPane.panes.push(tg);
             }
-            
+
             this.attachPane();
         })
 
@@ -183,7 +183,7 @@ export class DockManagerAddContentRuntime {
             }
 
             this.dockManager.layout.floatingPanes!.push(sp);
-        
+
             this.attachPane();
         })
     }
@@ -194,7 +194,6 @@ export class DockManagerAddContentRuntime {
         content.innerHTML = 'This pane is added at runtime';
 
         this.dockManager.appendChild(content);
-    
         this.dockManager.layout = { ...this.dockManager.layout };
         this.counter++;
     }
diff --git a/samples/layouts/dock-manager/contained-in-boundaries/src/index.ts b/samples/layouts/dock-manager/contained-in-boundaries/src/index.ts
index 0250b30ba9..700ed11776 100644
--- a/samples/layouts/dock-manager/contained-in-boundaries/src/index.ts
+++ b/samples/layouts/dock-manager/contained-in-boundaries/src/index.ts
@@ -1,6 +1,6 @@
 import './DockManagerStyles.css'
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
-import { 
+import {
     IgcDockManagerPaneType,
     IgcSplitPane,
     IgcSplitPaneOrientation,
diff --git a/samples/layouts/dock-manager/customize-buttons/.prettierrc b/samples/layouts/dock-manager/customize-buttons/.prettierrc
index cb0498d36a..15a7c7c6cf 100644
--- a/samples/layouts/dock-manager/customize-buttons/.prettierrc
+++ b/samples/layouts/dock-manager/customize-buttons/.prettierrc
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}
\ No newline at end of file
diff --git a/samples/layouts/dock-manager/customize-buttons/sandbox.config.json b/samples/layouts/dock-manager/customize-buttons/sandbox.config.json
index 2ab51ac3f9..5c5b54fe21 100644
--- a/samples/layouts/dock-manager/customize-buttons/sandbox.config.json
+++ b/samples/layouts/dock-manager/customize-buttons/sandbox.config.json
@@ -4,3 +4,4 @@
     "view": "browser",
     "template": "parcel"
 }
+  
\ No newline at end of file
diff --git a/samples/layouts/dock-manager/customize-buttons/src/index.css b/samples/layouts/dock-manager/customize-buttons/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/layouts/dock-manager/customize-buttons/src/index.css
+++ b/samples/layouts/dock-manager/customize-buttons/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/dock-manager/customize-buttons/tsconfig.json b/samples/layouts/dock-manager/customize-buttons/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/layouts/dock-manager/customize-buttons/tsconfig.json
+++ b/samples/layouts/dock-manager/customize-buttons/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/layouts/dock-manager/embedding-frames/package.json b/samples/layouts/dock-manager/embedding-frames/package.json
index 27c582f4c8..ec2d4ac25c 100644
--- a/samples/layouts/dock-manager/embedding-frames/package.json
+++ b/samples/layouts/dock-manager/embedding-frames/package.json
@@ -24,7 +24,7 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.15.2",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/layouts/dock-manager/focus-panes/src/index.ts b/samples/layouts/dock-manager/focus-panes/src/index.ts
index f39c711049..656c2464c9 100644
--- a/samples/layouts/dock-manager/focus-panes/src/index.ts
+++ b/samples/layouts/dock-manager/focus-panes/src/index.ts
@@ -1,6 +1,6 @@
 import './DockManagerStyles.css'
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
-import { 
+import {
     IgcDockManagerPaneType,
     IgcSplitPane,
     IgcSplitPaneOrientation,
@@ -39,7 +39,7 @@ export class DockManagerAddContentRuntime {
         const focusFloatingPaneBtn = document.getElementById('focusFloating');
         const focusUnpinnedPaneBtn = document.getElementById('focusUnpinned');
         const focusRegularPaneBtn = document.getElementById('focusRegular');
-       
+
         this.dockManager.layout = {
             rootPane: {
                 type: IgcDockManagerPaneType.splitPane,
diff --git a/samples/layouts/dock-manager/hide-pane-headers/src/index.ts b/samples/layouts/dock-manager/hide-pane-headers/src/index.ts
index 0ec8b4bcf5..cbb011658c 100644
--- a/samples/layouts/dock-manager/hide-pane-headers/src/index.ts
+++ b/samples/layouts/dock-manager/hide-pane-headers/src/index.ts
@@ -1,6 +1,6 @@
 import './DockManagerStyles.css'
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
-import { 
+import {
     IgcDockManagerPaneType,
     IgcSplitPane,
     IgcSplitPaneOrientation,
diff --git a/samples/layouts/dock-manager/hiding-panes/package.json b/samples/layouts/dock-manager/hiding-panes/package.json
index 6990bff704..56435d2f48 100644
--- a/samples/layouts/dock-manager/hiding-panes/package.json
+++ b/samples/layouts/dock-manager/hiding-panes/package.json
@@ -24,7 +24,7 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.15.2",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/layouts/dock-manager/hiding-panes/src/index.ts b/samples/layouts/dock-manager/hiding-panes/src/index.ts
index f58e2265d8..58eb4c6f92 100644
--- a/samples/layouts/dock-manager/hiding-panes/src/index.ts
+++ b/samples/layouts/dock-manager/hiding-panes/src/index.ts
@@ -150,7 +150,7 @@ export class DockManagerHidePanes {
         for (const pane of ev.detail.panes) {
             pane.hidden = true;
             this.setHiddenPane(pane);
-            
+
             if (this.dockManager.maximizedPane)
             {
                 if (this.dockManager.maximizedPane === pane ||
diff --git a/samples/layouts/dock-manager/overview/package.json b/samples/layouts/dock-manager/overview/package.json
index 0218b1c806..c705e02f0e 100644
--- a/samples/layouts/dock-manager/overview/package.json
+++ b/samples/layouts/dock-manager/overview/package.json
@@ -24,7 +24,7 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.15.2",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/layouts/dock-manager/proximity-dock/src/index.ts b/samples/layouts/dock-manager/proximity-dock/src/index.ts
index 4b038911af..2a98684732 100644
--- a/samples/layouts/dock-manager/proximity-dock/src/index.ts
+++ b/samples/layouts/dock-manager/proximity-dock/src/index.ts
@@ -1,6 +1,6 @@
 import './DockManagerStyles.css'
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
-import { 
+import {
     IgcDockManagerPaneType,
     IgcSplitPane,
     IgcSplitPaneOrientation,
diff --git a/samples/layouts/dock-manager/styling/package.json b/samples/layouts/dock-manager/styling/package.json
index 6406fd3a4a..103a103161 100644
--- a/samples/layouts/dock-manager/styling/package.json
+++ b/samples/layouts/dock-manager/styling/package.json
@@ -26,7 +26,7 @@
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.15.2",
     "igniteui-webcomponents": "5.1.2",
-    "igniteui-webcomponents-core": "5.1.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/layouts/dock-manager/styling/src/index.ts b/samples/layouts/dock-manager/styling/src/index.ts
index 2b4a0dc3be..f977a538fc 100644
--- a/samples/layouts/dock-manager/styling/src/index.ts
+++ b/samples/layouts/dock-manager/styling/src/index.ts
@@ -225,14 +225,14 @@ export class DockManagerStylePanes {
             ]
         }
     };
-    
+
     layouts:IgcDockManagerLayout[] = [];
     index = 0;
     newIndex = -1;
 
     constructor() {
         this.layouts = [this.layout, this.layout1, this.layout2];
-        
+
         this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent;
         this.handleLayoutViews(document.body.clientWidth);
 
diff --git a/samples/layouts/dock-manager/toggle-inner-dock/src/index.ts b/samples/layouts/dock-manager/toggle-inner-dock/src/index.ts
index dbdde3c851..a1fc2bc0b1 100644
--- a/samples/layouts/dock-manager/toggle-inner-dock/src/index.ts
+++ b/samples/layouts/dock-manager/toggle-inner-dock/src/index.ts
@@ -1,6 +1,6 @@
 import './DockManagerStyles.css'
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
-import { 
+import {
     IgcDockManagerPaneType,
     IgcSplitPane,
     IgcSplitPaneOrientation,
@@ -140,7 +140,7 @@ export class DockManagerToggleInnerDock {
         };
 
         innerDockBtn!.addEventListener('click', () => {
-            this.dockManager.allowInnerDock = !this.dockManager.allowInnerDock;       
+            this.dockManager.allowInnerDock = !this.dockManager.allowInnerDock;
         })
     }
 }
diff --git a/samples/layouts/dock-manager/updating-panes/package.json b/samples/layouts/dock-manager/updating-panes/package.json
index 8b37b826af..5053829d2e 100644
--- a/samples/layouts/dock-manager/updating-panes/package.json
+++ b/samples/layouts/dock-manager/updating-panes/package.json
@@ -24,10 +24,10 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.15.2",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-gauges": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/layouts/icon/sizing/sandbox.config.json b/samples/layouts/icon/sizing/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/layouts/icon/sizing/sandbox.config.json
+++ b/samples/layouts/icon/sizing/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/layouts/icon/sizing/tsconfig.json b/samples/layouts/icon/sizing/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/layouts/icon/sizing/tsconfig.json
+++ b/samples/layouts/icon/sizing/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/layouts/icon/styling/sandbox.config.json b/samples/layouts/icon/styling/sandbox.config.json
index 52c7875103..5c5b54fe21 100644
--- a/samples/layouts/icon/styling/sandbox.config.json
+++ b/samples/layouts/icon/styling/sandbox.config.json
@@ -3,4 +3,5 @@
     "hardReloadOnChange": false,
     "view": "browser",
     "template": "parcel"
-}
\ No newline at end of file
+}
+  
\ No newline at end of file
diff --git a/samples/layouts/icon/styling/src/index.css b/samples/layouts/icon/styling/src/index.css
index 6a5ec2a4fb..0fe9368715 100644
--- a/samples/layouts/icon/styling/src/index.css
+++ b/samples/layouts/icon/styling/src/index.css
@@ -1,7 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-icon {
-  --size: 48px;
-  color: olive;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/icon/styling/tsconfig.json b/samples/layouts/icon/styling/tsconfig.json
index 7c639d7f0c..de23257dd8 100644
--- a/samples/layouts/icon/styling/tsconfig.json
+++ b/samples/layouts/icon/styling/tsconfig.json
@@ -17,4 +17,4 @@
       "node_modules",
       "dist"
   ]
-}
+}
\ No newline at end of file
diff --git a/samples/layouts/stepper/animations/src/index.css b/samples/layouts/stepper/animations/src/index.css
index df6b7ed3dc..0fe9368715 100644
--- a/samples/layouts/stepper/animations/src/index.css
+++ b/samples/layouts/stepper/animations/src/index.css
@@ -1,16 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-.container {
-    padding: 1rem;
-}
-
-.settings {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 1.125rem;
-    background: hsl(var(--ig-gray-100));
-    padding: 1.125rem;
-    border: 1px solid hsl(var(--ig-gray-300));
-    border-radius: .25rem;
-    margin-bottom: 2rem;
-}
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/stepper/linear/src/index.ts b/samples/layouts/stepper/linear/src/index.ts
index ce8689fa44..3859c2bfc8 100644
--- a/samples/layouts/stepper/linear/src/index.ts
+++ b/samples/layouts/stepper/linear/src/index.ts
@@ -1,8 +1,8 @@
 import { defineComponents, IgcStepperComponent, IgcStepComponent, IgcInputComponent, IgcButtonComponent, IgcRadioComponent, IgcSwitchComponent } from "igniteui-webcomponents";
-
 import "igniteui-webcomponents/themes/light/bootstrap.css";
 import "./StepperLinear.css";
 
+
 defineComponents(IgcStepperComponent, IgcInputComponent, IgcButtonComponent, IgcRadioComponent, IgcSwitchComponent);
 
 export class StepperLinear {
@@ -43,10 +43,10 @@ export class StepperLinear {
         if (this.activeStep!.optional || !this.nextButton) {
             return;
         }
-    
+
         const form = this.activeStep!.querySelector("form") as HTMLFormElement;
         const isFormInvalid = !form.checkValidity();
-    
+
         this.activeStep!.invalid = isFormInvalid;
         this.nextButton.disabled = this.stepper.linear ? isFormInvalid : false;
     }
diff --git a/samples/layouts/stepper/overview/src/index.ts b/samples/layouts/stepper/overview/src/index.ts
index 047541f6ea..ebef580b4d 100644
--- a/samples/layouts/stepper/overview/src/index.ts
+++ b/samples/layouts/stepper/overview/src/index.ts
@@ -156,4 +156,4 @@ export class StepperOverview {
     }
 }
 
-new StepperOverview();
\ No newline at end of file
+new StepperOverview();
diff --git a/samples/layouts/tabs/prefix-suffix/src/index.css b/samples/layouts/tabs/prefix-suffix/src/index.css
index c048c972ee..0fe9368715 100644
--- a/samples/layouts/tabs/prefix-suffix/src/index.css
+++ b/samples/layouts/tabs/prefix-suffix/src/index.css
@@ -1,10 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
-
-igc-icon {
-    --ig-size: var(--ig-size-small);
-}
-
-igc-icon-button {
-    --ig-size: var(--ig-size-small);
-}
\ No newline at end of file
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/tabs/scrolling/src/index.ts b/samples/layouts/tabs/scrolling/src/index.ts
index acb365820c..004f1234ba 100644
--- a/samples/layouts/tabs/scrolling/src/index.ts
+++ b/samples/layouts/tabs/scrolling/src/index.ts
@@ -8,7 +8,7 @@ export class TabsScrolling {
 
     constructor() {
         this.tabs = document.getElementById('tabs') as IgcTabsComponent;
-        
+
         for(let i = 0; i < 18; i++) {
             this.tabs.insertAdjacentHTML('beforeend',
                 `<igc-tab panel=${i}> Tab ${i + 1}</igc-tab>
diff --git a/samples/maps/geo-map/binding-data-csv/package.json b/samples/maps/geo-map/binding-data-csv/package.json
index 2c67a49f6e..8a94595be5 100644
--- a/samples/maps/geo-map/binding-data-csv/package.json
+++ b/samples/maps/geo-map/binding-data-csv/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/binding-data-json-points/package.json b/samples/maps/geo-map/binding-data-json-points/package.json
index 0146c8eadb..e9ecaf8ab2 100644
--- a/samples/maps/geo-map/binding-data-json-points/package.json
+++ b/samples/maps/geo-map/binding-data-json-points/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/binding-data-model/package.json b/samples/maps/geo-map/binding-data-model/package.json
index f6aff7edd7..1ca8da1a6d 100644
--- a/samples/maps/geo-map/binding-data-model/package.json
+++ b/samples/maps/geo-map/binding-data-model/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/binding-data-model/src/index.ts b/samples/maps/geo-map/binding-data-model/src/index.ts
index de335ccbf6..2c22ece219 100644
--- a/samples/maps/geo-map/binding-data-model/src/index.ts
+++ b/samples/maps/geo-map/binding-data-model/src/index.ts
@@ -43,7 +43,7 @@ export class MapBindingDataModel {
             { origin: cityLAX, dest: citySYD, color: 'Gray' },
         ];
 
-        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;        
+        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
         this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });
 
         for (const flight of this.flights) {
diff --git a/samples/maps/geo-map/binding-multiple-shapes/package.json b/samples/maps/geo-map/binding-multiple-shapes/package.json
index 111a69bbb5..3efe0a530e 100644
--- a/samples/maps/geo-map/binding-multiple-shapes/package.json
+++ b/samples/maps/geo-map/binding-multiple-shapes/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/binding-multiple-sources/package.json b/samples/maps/geo-map/binding-multiple-sources/package.json
index fc86aa8f67..33615fb659 100644
--- a/samples/maps/geo-map/binding-multiple-sources/package.json
+++ b/samples/maps/geo-map/binding-multiple-sources/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/binding-shp-points/package.json b/samples/maps/geo-map/binding-shp-points/package.json
index 2f891717ed..659049692e 100644
--- a/samples/maps/geo-map/binding-shp-points/package.json
+++ b/samples/maps/geo-map/binding-shp-points/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/binding-shp-polygons/package.json b/samples/maps/geo-map/binding-shp-polygons/package.json
index 1c1f9544fe..424b5ede8e 100644
--- a/samples/maps/geo-map/binding-shp-polygons/package.json
+++ b/samples/maps/geo-map/binding-shp-polygons/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/binding-shp-polygons/src/index.ts b/samples/maps/geo-map/binding-shp-polygons/src/index.ts
index df6bebbd16..20b21a94b7 100644
--- a/samples/maps/geo-map/binding-shp-polygons/src/index.ts
+++ b/samples/maps/geo-map/binding-shp-polygons/src/index.ts
@@ -22,7 +22,7 @@ export class MapBindingShapefilePolygons {
         this.onDataLoaded = this.onDataLoaded.bind(this);
 
         this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
-        this.geoMap.backgroundContent = undefined;        
+        this.geoMap.backgroundContent = undefined;
         this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });
 
         const url = 'https://static.infragistics.com/xplatform';
diff --git a/samples/maps/geo-map/binding-shp-polylines/package.json b/samples/maps/geo-map/binding-shp-polylines/package.json
index 18375e87a8..a0a0d99fa8 100644
--- a/samples/maps/geo-map/binding-shp-polylines/package.json
+++ b/samples/maps/geo-map/binding-shp-polylines/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/binding-shp-polylines/src/index.ts b/samples/maps/geo-map/binding-shp-polylines/src/index.ts
index 0a9e126537..7c0a9c8f16 100644
--- a/samples/maps/geo-map/binding-shp-polylines/src/index.ts
+++ b/samples/maps/geo-map/binding-shp-polylines/src/index.ts
@@ -20,7 +20,7 @@ export class MapBindingShapefilePolylines {
 
         this.onDataLoaded = this.onDataLoaded.bind(this);
 
-        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;        
+        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
         this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });
 
         const url = 'https://static.infragistics.com/xplatform';
diff --git a/samples/maps/geo-map/custom-tooltips/package.json b/samples/maps/geo-map/custom-tooltips/package.json
index 1d998a8a14..fd0e0e6567 100644
--- a/samples/maps/geo-map/custom-tooltips/package.json
+++ b/samples/maps/geo-map/custom-tooltips/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/display-all-imagery/package.json b/samples/maps/geo-map/display-all-imagery/package.json
index 591baeafe8..6a59b379ef 100644
--- a/samples/maps/geo-map/display-all-imagery/package.json
+++ b/samples/maps/geo-map/display-all-imagery/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/display-all-imagery/src/index.ts b/samples/maps/geo-map/display-all-imagery/src/index.ts
index c693e81728..517d27b3a5 100644
--- a/samples/maps/geo-map/display-all-imagery/src/index.ts
+++ b/samples/maps/geo-map/display-all-imagery/src/index.ts
@@ -19,12 +19,11 @@ export class MapImagerySources {
         this.onMapTypeSelectionChange = this.onMapTypeSelectionChange.bind(this);
 
         this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
-
-        this.geoMap.zoomToGeographic({ left: -120, top: 30, width: 45, height: 20 });            
+        this.geoMap.zoomToGeographic({ left: -120, top: 30, width: 45, height: 20 });
 
         let dropDown: HTMLSelectElement = document.getElementById('mapTypeSelect') as HTMLSelectElement;
         dropDown.addEventListener("change", this.onMapTypeSelectionChange);
-        
+
         let openStreetOption: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
         openStreetOption.textContent = "OpenStreetMaps (default)";
 
@@ -34,7 +33,7 @@ export class MapImagerySources {
         let bingAerialNoLabelsOption: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
         bingAerialNoLabelsOption.textContent = "Bing Maps Aerial Without Labels";
 
-        let bingAerialLabelsOption: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;        
+        let bingAerialLabelsOption: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
         bingAerialLabelsOption.textContent = "Bing Maps Aerial With Labels";
 
         dropDown.add(openStreetOption);
@@ -49,17 +48,17 @@ export class MapImagerySources {
             let option: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
             let style = esriKeys[i];
 
-            option.textContent = "Esri " + style;              
-            option.value = esriVals[i];     
+            option.textContent = "Esri " + style;
+            option.value = esriVals[i];
 
             dropDown.add(option);
         }
     }
 
-    public onMapTypeSelectionChange(e: any){    
+    public onMapTypeSelectionChange(e: any){
         if (this.geoMap === undefined) return;
 
-        let value: string = e.target.value;        
+        let value: string = e.target.value;
 
         if(value.includes("OpenStreetMap")){
             console.log("OSM");
diff --git a/samples/maps/geo-map/display-bing-imagery/package.json b/samples/maps/geo-map/display-bing-imagery/package.json
index 3cd96cf53c..0a03cf9559 100644
--- a/samples/maps/geo-map/display-bing-imagery/package.json
+++ b/samples/maps/geo-map/display-bing-imagery/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/display-esri-imagery/package.json b/samples/maps/geo-map/display-esri-imagery/package.json
index 71bb3492e0..ba80df0255 100644
--- a/samples/maps/geo-map/display-esri-imagery/package.json
+++ b/samples/maps/geo-map/display-esri-imagery/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/display-heat-imagery/package.json b/samples/maps/geo-map/display-heat-imagery/package.json
index c4df682d5b..ce321e959c 100644
--- a/samples/maps/geo-map/display-heat-imagery/package.json
+++ b/samples/maps/geo-map/display-heat-imagery/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/display-osm-imagery/package.json b/samples/maps/geo-map/display-osm-imagery/package.json
index 7754123969..e36372f42c 100644
--- a/samples/maps/geo-map/display-osm-imagery/package.json
+++ b/samples/maps/geo-map/display-osm-imagery/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/marker-template/package.json b/samples/maps/geo-map/marker-template/package.json
index 94a15bfb5a..5a26022762 100644
--- a/samples/maps/geo-map/marker-template/package.json
+++ b/samples/maps/geo-map/marker-template/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/marker-type/package.json b/samples/maps/geo-map/marker-type/package.json
index 7407d797b7..a968435bb0 100644
--- a/samples/maps/geo-map/marker-type/package.json
+++ b/samples/maps/geo-map/marker-type/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/navigation/package.json b/samples/maps/geo-map/navigation/package.json
index 6fcaeff6f0..3dd7a88e7f 100644
--- a/samples/maps/geo-map/navigation/package.json
+++ b/samples/maps/geo-map/navigation/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/navigation/src/index.ts b/samples/maps/geo-map/navigation/src/index.ts
index e74a9d8cdd..36442372a2 100644
--- a/samples/maps/geo-map/navigation/src/index.ts
+++ b/samples/maps/geo-map/navigation/src/index.ts
@@ -47,7 +47,6 @@ export class MapNavigation {
         this.geoMap.actualWindowRectChanged = this.onMapWindowChanged;
         this.geoMap.zoomable = true;
         this.geoMap.addEventListener('mousemove', this.onMapMouseMove, false);
-
         const usaRegion = { left: -134.5, top: 16.0, width: 70.0, height: 37.0 };
         this.geoMap.zoomToGeographic(usaRegion);
     }
diff --git a/samples/maps/geo-map/overview/package.json b/samples/maps/geo-map/overview/package.json
index d4eacac9f5..7869395a1b 100644
--- a/samples/maps/geo-map/overview/package.json
+++ b/samples/maps/geo-map/overview/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/shape-styling/package.json b/samples/maps/geo-map/shape-styling/package.json
index 09206b316f..9e6a98900e 100644
--- a/samples/maps/geo-map/shape-styling/package.json
+++ b/samples/maps/geo-map/shape-styling/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/synchronization/package.json b/samples/maps/geo-map/synchronization/package.json
index ff8478bc08..8c0c17835a 100644
--- a/samples/maps/geo-map/synchronization/package.json
+++ b/samples/maps/geo-map/synchronization/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/triangulating-data/package.json b/samples/maps/geo-map/triangulating-data/package.json
index b5f7a79722..96d2f72c66 100644
--- a/samples/maps/geo-map/triangulating-data/package.json
+++ b/samples/maps/geo-map/triangulating-data/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/type-scatter-area-series/package.json b/samples/maps/geo-map/type-scatter-area-series/package.json
index 8ccb43a3f9..cd763eba87 100644
--- a/samples/maps/geo-map/type-scatter-area-series/package.json
+++ b/samples/maps/geo-map/type-scatter-area-series/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/type-scatter-area-series/src/index.ts b/samples/maps/geo-map/type-scatter-area-series/src/index.ts
index 963f6dca6e..08efce93f3 100644
--- a/samples/maps/geo-map/type-scatter-area-series/src/index.ts
+++ b/samples/maps/geo-map/type-scatter-area-series/src/index.ts
@@ -20,7 +20,7 @@ export class MapTypeScatterAreaSeries {
 
         this.onDataLoaded = this.onDataLoaded.bind(this);
 
-        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;        
+        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
         this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });
 
         const url = 'https://static.infragistics.com/xplatform';
diff --git a/samples/maps/geo-map/type-scatter-bubble-series/package.json b/samples/maps/geo-map/type-scatter-bubble-series/package.json
index 108b9d6f35..5b26f77e28 100644
--- a/samples/maps/geo-map/type-scatter-bubble-series/package.json
+++ b/samples/maps/geo-map/type-scatter-bubble-series/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/type-scatter-bubble-series/src/index.ts b/samples/maps/geo-map/type-scatter-bubble-series/src/index.ts
index 8046515257..4482159041 100644
--- a/samples/maps/geo-map/type-scatter-bubble-series/src/index.ts
+++ b/samples/maps/geo-map/type-scatter-bubble-series/src/index.ts
@@ -19,7 +19,7 @@ export class MapTypeScatterBubbleSeries {
 
     constructor() {
 
-        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;        
+        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
         this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });
 
         this.addSeriesWith(WorldLocations.getAll());
diff --git a/samples/maps/geo-map/type-scatter-contour-series/package.json b/samples/maps/geo-map/type-scatter-contour-series/package.json
index 61162fe3e2..a52365e785 100644
--- a/samples/maps/geo-map/type-scatter-contour-series/package.json
+++ b/samples/maps/geo-map/type-scatter-contour-series/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/type-scatter-contour-series/src/index.ts b/samples/maps/geo-map/type-scatter-contour-series/src/index.ts
index ed96938841..e4032ea3b7 100644
--- a/samples/maps/geo-map/type-scatter-contour-series/src/index.ts
+++ b/samples/maps/geo-map/type-scatter-contour-series/src/index.ts
@@ -21,7 +21,7 @@ export class MapTypeScatterContourSeries {
 
         this.onDataLoaded = this.onDataLoaded.bind(this);
 
-        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;        
+        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
         this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });
 
         const url = 'https://static.infragistics.com/xplatform';
diff --git a/samples/maps/geo-map/type-scatter-density-series/package.json b/samples/maps/geo-map/type-scatter-density-series/package.json
index c2f605b101..3319c51947 100644
--- a/samples/maps/geo-map/type-scatter-density-series/package.json
+++ b/samples/maps/geo-map/type-scatter-density-series/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/type-scatter-symbol-series/package.json b/samples/maps/geo-map/type-scatter-symbol-series/package.json
index 25b08ca94f..82931624b7 100644
--- a/samples/maps/geo-map/type-scatter-symbol-series/package.json
+++ b/samples/maps/geo-map/type-scatter-symbol-series/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/type-scatter-symbol-series/src/index.ts b/samples/maps/geo-map/type-scatter-symbol-series/src/index.ts
index 2ae3df5785..47e56a4ee6 100644
--- a/samples/maps/geo-map/type-scatter-symbol-series/src/index.ts
+++ b/samples/maps/geo-map/type-scatter-symbol-series/src/index.ts
@@ -19,7 +19,7 @@ export class MapTypeScatterSymbolSeries {
 
     constructor() {
 
-        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;        
+        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
         this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });
 
         this.addSeriesWith(WorldLocations.getCities(), 'Gray');
diff --git a/samples/maps/geo-map/type-shape-polygon-series/package.json b/samples/maps/geo-map/type-shape-polygon-series/package.json
index b7588fafa8..e88492302a 100644
--- a/samples/maps/geo-map/type-shape-polygon-series/package.json
+++ b/samples/maps/geo-map/type-shape-polygon-series/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/type-shape-polygon-series/src/index.ts b/samples/maps/geo-map/type-shape-polygon-series/src/index.ts
index c5661da530..d446b716bd 100644
--- a/samples/maps/geo-map/type-shape-polygon-series/src/index.ts
+++ b/samples/maps/geo-map/type-shape-polygon-series/src/index.ts
@@ -20,7 +20,7 @@ export class MapTypeScatterPolygonSeries {
 
         this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
         this.geoMap.backgroundContent = undefined;
-        // zooming map to region of North America        
+        // zooming map to region of North America
         this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });
 
         // loading a shapefile with geographic shapes
diff --git a/samples/maps/geo-map/type-shape-polyline-series/package.json b/samples/maps/geo-map/type-shape-polyline-series/package.json
index 13b41445ac..d4a7b59e3a 100644
--- a/samples/maps/geo-map/type-shape-polyline-series/package.json
+++ b/samples/maps/geo-map/type-shape-polyline-series/package.json
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.1.0",
-    "igniteui-webcomponents-core": "5.1.0",
-    "igniteui-webcomponents-maps": "5.1.0",
+    "igniteui-webcomponents-charts": "5.1.1-beta.0",
+    "igniteui-webcomponents-core": "5.1.1-beta.0",
+    "igniteui-webcomponents-maps": "5.1.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
diff --git a/samples/maps/geo-map/type-shape-polyline-series/src/index.ts b/samples/maps/geo-map/type-shape-polyline-series/src/index.ts
index 678901c0e6..79c10f58b0 100644
--- a/samples/maps/geo-map/type-shape-polyline-series/src/index.ts
+++ b/samples/maps/geo-map/type-shape-polyline-series/src/index.ts
@@ -18,7 +18,7 @@ export class MapTypeScatterPolylineSeries {
 
         this.onDataLoaded = this.onDataLoaded.bind(this);
 
-        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;        
+        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
         this.geoMap.updateZoomWindow({ left: 0.195, top: 0.325, width: 0.2, height: 0.1 });
 
         // loading a shapefile with geographic shapes
diff --git a/samples/menus/nav-drawer/add-mini/src/index.ts b/samples/menus/nav-drawer/add-mini/src/index.ts
index 110d476eb5..daa51d74b4 100644
--- a/samples/menus/nav-drawer/add-mini/src/index.ts
+++ b/samples/menus/nav-drawer/add-mini/src/index.ts
@@ -28,11 +28,11 @@ export class NavDrawerAddMini {
       navDrawer.onclick = (e) => {
         const target = e.target as HTMLElement;
         const drawerItem = target.closest('igc-nav-drawer-item');
-     
+
         if (drawerItem) {
           const iconName = drawerItem.querySelector('igc-icon')!.name;
           const icons = document.querySelectorAll(`igc-icon`);
-          
+
           icons.forEach(icon => {
             const parentItem = icon.parentElement! as IgcNavDrawerItemComponent;
 
@@ -46,7 +46,7 @@ export class NavDrawerAddMini {
       }
 
       registerIconFromText('search', searchIcon);
-      
+
       registerIconFromText('home', homeIcon);
     }
 }
diff --git a/samples/menus/nav-drawer/add-positions-navbar/src/index.ts b/samples/menus/nav-drawer/add-positions-navbar/src/index.ts
index ab47e1a3a6..bfbcbf1f81 100644
--- a/samples/menus/nav-drawer/add-positions-navbar/src/index.ts
+++ b/samples/menus/nav-drawer/add-positions-navbar/src/index.ts
@@ -10,7 +10,7 @@ const searchIcon =
 const homeIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
 
-const menuIcon = 
+const menuIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>';
 export class NavDrawerAddPositionsNavbar {
     constructor() {
@@ -53,7 +53,6 @@ export class NavDrawerAddPositionsNavbar {
           navDrawer.position = radio.target.value;
       });
 
-      
       registerIconFromText('home', homeIcon);
       registerIconFromText('menu', menuIcon);
       registerIconFromText('search', searchIcon);
diff --git a/samples/menus/nav-drawer/styling/src/index.ts b/samples/menus/nav-drawer/styling/src/index.ts
index f94aba6741..80ccf3ed86 100644
--- a/samples/menus/nav-drawer/styling/src/index.ts
+++ b/samples/menus/nav-drawer/styling/src/index.ts
@@ -1,4 +1,4 @@
-import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent, IgcIconComponent, 
+import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent, IgcIconComponent,
          registerIconFromText, IgcIconButtonComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './drawer-styling.css';
diff --git a/samples/notifications/banner/banner-sample-1/src/index.ts b/samples/notifications/banner/banner-sample-1/src/index.ts
index 32a47a7719..1a21a28b71 100644
--- a/samples/notifications/banner/banner-sample-1/src/index.ts
+++ b/samples/notifications/banner/banner-sample-1/src/index.ts
@@ -6,7 +6,7 @@ defineComponents(IgcBannerComponent, IgcNavbarComponent, IgcIconComponent, IgcCa
 
 const refreshIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>';
- 
+
 export class BannerSample1 {
     constructor() {
         registerIconFromText('refresh', refreshIcon);
diff --git a/samples/notifications/toast/styling/src/index.css b/samples/notifications/toast/styling/src/index.css
index 98682b8543..0fe9368715 100644
--- a/samples/notifications/toast/styling/src/index.css
+++ b/samples/notifications/toast/styling/src/index.css
@@ -1,2 +1,2 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/scheduling/date-picker/dialog-mode/src/index.ts b/samples/scheduling/date-picker/dialog-mode/src/index.ts
index 9f100eb7bb..0a08b525fb 100644
--- a/samples/scheduling/date-picker/dialog-mode/src/index.ts
+++ b/samples/scheduling/date-picker/dialog-mode/src/index.ts
@@ -8,7 +8,7 @@ export class DatePickerDialogMode {
         let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
         const date = new Date();
         datePicker.value = date;
-    }   
+    }
 }
 
 new DatePickerDialogMode();
diff --git a/samples/scheduling/date-picker/form/src/index.ts b/samples/scheduling/date-picker/form/src/index.ts
index dc4de9ea8c..08e7ce9c73 100644
--- a/samples/scheduling/date-picker/form/src/index.ts
+++ b/samples/scheduling/date-picker/form/src/index.ts
@@ -24,13 +24,13 @@ export class DatePickerOverview {
             datePickerValue.innerHTML = `Date picker value: ${datePicker.value ? datePicker.value.toLocaleString() : null}`;
             formStatus.innerHTML = `Form valid: ${form.checkValidity()}`;
         });
-    }   
+    }
 
     public reset(){
         let form = document.getElementById('form') as HTMLFormElement;
         let datePickerValue = document.getElementById('datePickerValue') as HTMLElement;
         let formStatus = document.getElementById('formStatus') as HTMLElement;
-        
+
         datePickerValue.innerHTML = "Date picker value: ";
         formStatus.innerHTML = "Form valid: ";
         form.reset();
diff --git a/samples/scheduling/date-picker/format/src/index.ts b/samples/scheduling/date-picker/format/src/index.ts
index 98b12867dc..f817667430 100644
--- a/samples/scheduling/date-picker/format/src/index.ts
+++ b/samples/scheduling/date-picker/format/src/index.ts
@@ -8,7 +8,7 @@ export class DatePickerFormat {
         let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
         const date = new Date();
         datePicker.value = date;
-    }   
+    }
 }
 
 new DatePickerFormat();
diff --git a/samples/scheduling/date-picker/overview/src/index.ts b/samples/scheduling/date-picker/overview/src/index.ts
index fda9a816f9..6336e974f3 100644
--- a/samples/scheduling/date-picker/overview/src/index.ts
+++ b/samples/scheduling/date-picker/overview/src/index.ts
@@ -8,7 +8,7 @@ export class DatePickerOverview {
         let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
         const date = new Date();
         datePicker.value = date;
-    }   
+    }
 }
 
 new DatePickerOverview();
diff --git a/samples/scheduling/date-picker/styling/src/index.ts b/samples/scheduling/date-picker/styling/src/index.ts
index 2968953d2c..22da1f55a6 100644
--- a/samples/scheduling/date-picker/styling/src/index.ts
+++ b/samples/scheduling/date-picker/styling/src/index.ts
@@ -6,7 +6,7 @@ defineComponents(IgcDatePickerComponent, IgcInputComponent);
 
 export class DatePickerDialogMode {
     constructor() {
-    }   
+    }
 }
 
 new DatePickerDialogMode();