diff --git a/browser/package.json b/browser/package.json
index 358cb4770..182aeaa3a 100644
--- a/browser/package.json
+++ b/browser/package.json
@@ -49,7 +49,7 @@
     "igniteui-angular-spreadsheet": "17.2.0",
     "igniteui-angular-spreadsheet-chart-adapter": "17.2.0",
     "igniteui-theming": "3.3.1",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "immediate": "3.2.3",
     "intl": "1.2.5",
     "jszip": "3.8.0",
diff --git a/samples/charts/category-chart/annotations-all/package.json b/samples/charts/category-chart/annotations-all/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/annotations-all/package.json
+++ b/samples/charts/category-chart/annotations-all/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-callouts/package.json b/samples/charts/category-chart/annotations-callouts/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/annotations-callouts/package.json
+++ b/samples/charts/category-chart/annotations-callouts/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-crosshairs/package.json b/samples/charts/category-chart/annotations-crosshairs/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/annotations-crosshairs/package.json
+++ b/samples/charts/category-chart/annotations-crosshairs/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-custom/package.json b/samples/charts/category-chart/annotations-custom/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/annotations-custom/package.json
+++ b/samples/charts/category-chart/annotations-custom/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-final-value/package.json b/samples/charts/category-chart/annotations-final-value/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/annotations-final-value/package.json
+++ b/samples/charts/category-chart/annotations-final-value/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-highlighting/package.json b/samples/charts/category-chart/annotations-highlighting/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/annotations-highlighting/package.json
+++ b/samples/charts/category-chart/annotations-highlighting/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-gap/package.json b/samples/charts/category-chart/axis-gap/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/axis-gap/package.json
+++ b/samples/charts/category-chart/axis-gap/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-gridlines/package.json b/samples/charts/category-chart/axis-gridlines/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/axis-gridlines/package.json
+++ b/samples/charts/category-chart/axis-gridlines/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-inverted/package.json b/samples/charts/category-chart/axis-inverted/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/axis-inverted/package.json
+++ b/samples/charts/category-chart/axis-inverted/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-labels/package.json b/samples/charts/category-chart/axis-labels/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/axis-labels/package.json
+++ b/samples/charts/category-chart/axis-labels/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-locations/package.json b/samples/charts/category-chart/axis-locations/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/axis-locations/package.json
+++ b/samples/charts/category-chart/axis-locations/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-overlap/package.json b/samples/charts/category-chart/axis-overlap/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/axis-overlap/package.json
+++ b/samples/charts/category-chart/axis-overlap/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-range/package.json b/samples/charts/category-chart/axis-range/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/axis-range/package.json
+++ b/samples/charts/category-chart/axis-range/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-tickmarks/package.json b/samples/charts/category-chart/axis-tickmarks/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/axis-tickmarks/package.json
+++ b/samples/charts/category-chart/axis-tickmarks/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/chart-highlight-filter/package.json b/samples/charts/category-chart/chart-highlight-filter/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/chart-highlight-filter/package.json
+++ b/samples/charts/category-chart/chart-highlight-filter/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
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 b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/package.json
+++ b/samples/charts/category-chart/column-chart-with-tooltips/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/data-aggregations/package.json b/samples/charts/category-chart/data-aggregations/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/data-aggregations/package.json
+++ b/samples/charts/category-chart/data-aggregations/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/data-tooltip-positioning/package.json b/samples/charts/category-chart/data-tooltip-positioning/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/package.json
+++ b/samples/charts/category-chart/data-tooltip-positioning/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/marker-options/package.json b/samples/charts/category-chart/marker-options/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/marker-options/package.json
+++ b/samples/charts/category-chart/marker-options/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/value-lines/package.json b/samples/charts/category-chart/value-lines/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/category-chart/value-lines/package.json
+++ b/samples/charts/category-chart/value-lines/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/data-chart/axis-label-rotation/package.json b/samples/charts/data-chart/axis-label-rotation/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/data-chart/axis-label-rotation/package.json
+++ b/samples/charts/data-chart/axis-label-rotation/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
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 b575b10ae..cb59b7ad2 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
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 b575b10ae..cb59b7ad2 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
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/data-chart/chart-highlight-filter/package.json b/samples/charts/data-chart/chart-highlight-filter/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/data-chart/chart-highlight-filter/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/data-chart/transition-event/package.json b/samples/charts/data-chart/transition-event/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/data-chart/transition-event/package.json
+++ b/samples/charts/data-chart/transition-event/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/sparkline/markers/package.json b/samples/charts/sparkline/markers/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/sparkline/markers/package.json
+++ b/samples/charts/sparkline/markers/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/sparkline/normal-range/package.json b/samples/charts/sparkline/normal-range/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/sparkline/normal-range/package.json
+++ b/samples/charts/sparkline/normal-range/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/sparkline/trendlines/package.json b/samples/charts/sparkline/trendlines/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/sparkline/trendlines/package.json
+++ b/samples/charts/sparkline/trendlines/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/sparkline/unknown-values/package.json b/samples/charts/sparkline/unknown-values/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/sparkline/unknown-values/package.json
+++ b/samples/charts/sparkline/unknown-values/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/toolbar/theming/package.json b/samples/charts/toolbar/theming/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/toolbar/theming/package.json
+++ b/samples/charts/toolbar/theming/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/tree-map/layout/package.json b/samples/charts/tree-map/layout/package.json
index b575b10ae..cb59b7ad2 100644
--- a/samples/charts/tree-map/layout/package.json
+++ b/samples/charts/tree-map/layout/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.2.0",
     "igniteui-angular-inputs": "17.2.0",
     "igniteui-angular-layouts": "17.2.0",
-    "igniteui-webcomponents": "4.6.0",
+    "igniteui-webcomponents": "4.7.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",