feat(*): update to 18.2.0-beta.1 and apply migrations

package.json

@@ -65,7 +65,7 @@
     "bootstrap": "5.3.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^18.1.7",
+    "igniteui-angular": "^18.2.0-beta.1",
     "igniteui-angular-charts": "^18.0.0",
     "igniteui-angular-core": "^18.0.0",
     "igniteui-angular-extras": "^18.0.5",
@@ -111,4 +111,4 @@
     "typescript": "5.4.5",
     "webpack-bundle-analyzer": "^4.10.0"
   }
-}
+}

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss

@@ -32,7 +32,7 @@
 
 .selection-area {
 
-    @include scrollbar(scrollbar-theme($scrollbar-size: 6px));
+    @include scrollbar(scrollbar-theme($sb-size: 6px));
     width: 100%;
     height: 90%;
     display: inline-flex;
@@ -50,7 +50,6 @@
 
 $custom-badge-theme: badge-theme(
     $border-color: contrast-color($color: 'gray', $variant: 900),
-    $border-width: #{rem(2px)},
     $icon-color: contrast-color($color: 'gray', $variant: 900),
     $text-color: contrast-color($color: 'gray', $variant: 50),
     $background-color: contrast-color($color: 'gray', $variant: 500),
@@ -92,7 +91,7 @@ $custom-badge-theme: badge-theme(
 
     .grid-chart-contextmenu-wrapper {
         igx-grid {
-            @include scrollbar(scrollbar-theme($scrollbar-size: 16px));
+            @include scrollbar(scrollbar-theme($sb-size: 16px));
         }
     }
 
@@ -125,7 +124,7 @@ $custom-badge-theme: badge-theme(
     }
 
     igx-tab-content {
-        @include scrollbar(scrollbar-theme($scrollbar-size: 10px));
+        @include scrollbar(scrollbar-theme($sb-size: 10px));
     }
 
 }
@@ -147,7 +146,7 @@ $custom-badge-theme: badge-theme(
 $font-family: 'Titillium Web', 'Roboto', 'Helvetica Neue', sans-serif;
 
 .tab-options-wrapper {
-    @include scrollbar(scrollbar-theme($scrollbar-size: 6px));
+    @include scrollbar(scrollbar-theme($sb-size: 6px));
 
     display: flex;
     flex-flow: column;

src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss

@@ -21,7 +21,6 @@
 
 $custom-badge-theme: badge-theme(
     $border-color: white,
-    $border-width: 1px,
     $icon-color: white,
     $text-color: black
 );

src/app/grid/grid-multi-cell-selection/grid-multi-cell-selection.component.ts

@@ -15,7 +15,7 @@ export class GridMultiCellSelectionComponent {
 
     public transferData(source: IgxGridComponent, target: IgxGridComponent,
                         notification: IgxToastComponent) {
-        target.shouldGenerate = true;
+        target.autoGenerate = true;
         target.clearCellSelection();
         this.targetData = source.getSelectedData();
         notification.positionSettings.verticalDirection = VerticalAlignment.Middle;

src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html

@@ -1,6 +1,6 @@
 <div class="wrapper">
     <igx-query-builder #queryBuilder
-        [fields]="fields"
+        [entities]="[{ name: '', fields: fields}]"
         [expressionTree]="expressionTree">
         <igx-query-builder-header [title]="'Query Builder Overview'" [showLegend]="true">        
         </igx-query-builder-header>

src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html

@@ -1,3 +1,3 @@
 <igx-query-builder #queryBuilder
-    [fields]="fields">    
+    [entities]="[{ name: '', fields: fields}]">    
 </igx-query-builder>

src/app/tree-grid/tree-grid-multi-cell-selection/tree-grid-multi-cell-selection.component.ts

@@ -20,7 +20,7 @@ export class TreeGridMultiCellSelectionComponent {
 
     public transferData(source: IgxTreeGridComponent, target: IgxGridComponent,
                         notification: IgxToastComponent) {
-        target.shouldGenerate = true;
+        target.autoGenerate = true;
         target.clearCellSelection();
         this.targetData = source.getSelectedData();
         notification.positionSettings.verticalDirection = VerticalAlignment.Middle;