Update igniteui-angular to 18.2.0-beta.2 (#3535)

teodosiah · web-flow · commit 0a1d71793ce1 · 2024-10-10T12:30:12.000+03:00
* chore(*): update i18n and temp use --legacy-peer-deps
* chore(*): update and migrate to 18.2.0-beta.2
diff --git a/.github/workflows/build-app-crm.yml b/.github/workflows/build-app-crm.yml
@@ -49,7 +49,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Run lint
         run: npm run lint
diff --git a/.github/workflows/build-app-lob.yml b/.github/workflows/build-app-lob.yml
@@ -54,7 +54,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Run lint
         run: npm run lint
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
@@ -17,7 +17,7 @@ steps:
 - task: Npm@1
   inputs:
     command: 'custom'
-    customCommand: 'install'
+    customCommand: 'install --legacy-peer-deps'
     customEndpoint: 'public proget'
   env:
     AZURE_PIPELINES: "true"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,11 +65,11 @@
     "bootstrap": "5.3.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^18.1.7",
+    "igniteui-angular": "^18.2.0-beta.2",
     "igniteui-angular-charts": "^18.0.0",
     "igniteui-angular-core": "^18.0.0",
     "igniteui-angular-extras": "^18.0.5",
-    "igniteui-angular-i18n": "^18.1.0",
+    "igniteui-angular-i18n": "^18.2.0-beta.2",
     "igniteui-dockmanager": "^1.14.2",
     "igniteui-live-editing": "^2.3.0",
     "igniteui-webcomponents": "^4.7.0",
@@ -111,4 +111,4 @@
     "typescript": "5.4.5",
     "webpack-bundle-analyzer": "^4.10.0"
   }
-}
+}
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss b/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;
diff --git a/projects/app-lob/src/app/index/docs-layout.component.scss b/projects/app-lob/src/app/index/docs-layout.component.scss
@@ -1,6 +1,6 @@
 ::ng-deep {
 	.custom-body {
 		color: var(--ig-surface-500-contrast);
-		background: hsla(var(--ig-surface-500));
+		background: var(--ig-surface-500);
 	}
 }
diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss b/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
 );
diff --git a/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.scss b/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.scss
@@ -16,12 +16,12 @@ igx-avatar {
     z-index: 1;
     --ig-size: var(--ig-size-medium);
     --background: hsla(var(--ig-secondary-500), 6%);
-    border: 1px solid hsl(var(--ig-secondary-500));
+    border: 1px solid var(--ig-secondary-500);
     border-radius: rem(4px);
 
     igx-icon {
         --size: #{rem(48px)};
-        color: hsl(var(--ig-secondary-500));
+        color: var(--ig-secondary-500);
     }
 }
 
@@ -31,5 +31,5 @@ igx-icon[backdrop] {
     inset-inline: calc(100% - var(--size));
     z-index: -1;
     position: absolute;
-    color: hsl(var(--ig-gray-300));
+    color: var(--ig-gray-300);
 }
diff --git a/src/app/grid/grid-multi-cell-selection/grid-multi-cell-selection.component.ts b/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;
diff --git a/src/app/grid/grid-summary-template/grid-summary-template.component.scss b/src/app/grid/grid-summary-template/grid-summary-template.component.scss
@@ -42,7 +42,7 @@ igx-buttongroup {
 			min-width: 70px;
 			justify-self: flex-start;
 			text-align: left;
-			color: hsla(var(--ig-secondary-600));
+			color: var(--ig-secondary-600);
 			user-select: none;
 		}
 	}
diff --git a/src/app/hierarchical-grid/hgrid-summary-export/hgrid-summary-export.component.scss b/src/app/hierarchical-grid/hgrid-summary-export/hgrid-summary-export.component.scss
@@ -28,7 +28,7 @@ igx-buttongroup {
 		align-items: center;
 		gap: 4px;
 		justify-content: space-between;
-		color: hsla(var(--ig-gray-900));
+		color: var(--ig-gray-900);
 
 		span {
 			user-select: all;
@@ -42,15 +42,15 @@ igx-buttongroup {
 			min-width: 70px;
 			justify-self: flex-start;
 			text-align: left;
-			color: hsla(var(--ig-secondary-600));
+			color: var(--ig-secondary-600);
 			user-select: none;
 		}
 	}
 
 	> * {
 		padding: 8px 0;
 		line-height: 18px;
-		border-bottom: 1px dashed hsla(var(--ig-gray-400));
+		border-bottom: 1px dashed var(--ig-gray-400);
 
 		&:last-child {
 			border-bottom: none;
diff --git a/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.scss b/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.scss
@@ -42,7 +42,7 @@ igx-buttongroup {
 			min-width: 70px;
 			justify-self: flex-start;
 			text-align: left;
-			color: hsla(var(--ig-secondary-600));
+			color: var(--ig-secondary-600);
 			user-select: none;
 		}
 	}
diff --git a/src/app/index/docs-layout.component.scss b/src/app/index/docs-layout.component.scss
@@ -1,6 +1,6 @@
 ::ng-deep {
 	.custom-body {
 		color: var(--ig-surface-500-contrast);
-		background: hsla(var(--ig-surface-500));
+		background: var(--ig-surface-500);
 	}
 }
diff --git a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html b/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>
diff --git a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html b/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>
diff --git a/src/app/interactions/toggle/toggle-samples.scss b/src/app/interactions/toggle/toggle-samples.scss
@@ -25,7 +25,7 @@
 
     .custom-body & {
         color: var(--ig-surface-500-contrast);
-        background-color: hsla(var(--ig-surface-500));
+        background-color: var(--ig-surface-500);
     }
 }
 
diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.scss b/src/app/lists/list/list-item-selection/list-item-selection.component.scss
@@ -3,7 +3,7 @@
     padding: 16px;
 
     .selected {
-        background-color: hsla(var(--ig-secondary-500))
+        background-color: var(--ig-secondary-500)
     }
 
     .list-sample {
diff --git a/src/app/pivot-grid/pivot-features/pivot-features.component.scss b/src/app/pivot-grid/pivot-features/pivot-features.component.scss
@@ -5,11 +5,11 @@
 
     ::ng-deep {
         .upFontValue {
-            color: hsla(var(--ig-success-500));
+            color: var(--ig-success-500);
         }
 
         .downFontValue {
-            color: hsla(var(--ig-error-500));
+            color: var(--ig-error-500);
         }
 
         igx-pivot-data-selector {
diff --git a/src/app/pivot-grid/pivot-layout/pivot-layout.component.scss b/src/app/pivot-grid/pivot-layout/pivot-layout.component.scss
@@ -5,11 +5,11 @@
 
     ::ng-deep {
         .upFontValue {
-            color: hsla(var(--ig-success-500));
+            color: var(--ig-success-500);
         }
 
         .downFontValue {
-            color: hsla(var(--ig-error-500));
+            color: var(--ig-error-500);
         }
 
         igx-pivot-data-selector {
diff --git a/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.scss b/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.scss
@@ -5,11 +5,11 @@
 
     ::ng-deep {
         .upFontValue {
-            color: hsla(var(--ig-success-500));
+            color: var(--ig-success-500);
         }
 
         .downFontValue {
-            color: hsla(var(--ig-error-500));
+            color: var(--ig-error-500);
         }
     }
 
diff --git a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss
@@ -14,7 +14,7 @@
 .info {
     display: flex;
     justify-content: center;
-    background: hsla(var(--ig-surface-500));
+    background: var(--ig-surface-500);
 }
 
 .info > span {
diff --git a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.scss b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.scss
@@ -44,7 +44,7 @@ small {
         flex-direction: column;
         gap: 8px;
         background: hsla(var(--ig-gray-50));
-        border-left: 1px solid hsla(var(--ig-gray-300));
+        border-left: 1px solid var(--ig-gray-300);
         padding: $padding;
         overflow-x: auto;
     }
diff --git a/src/app/scheduling/calendar/multiview/multiview.component.scss b/src/app/scheduling/calendar/multiview/multiview.component.scss
@@ -20,7 +20,7 @@
 .stay__info {
     display: flex;
     justify-content: center;
-    background: hsla(var(--ig-surface-500));
+    background: var(--ig-surface-500);
 }
 
 .stay__info > span {
diff --git a/src/app/theming/angular/angular-sample.component.scss b/src/app/theming/angular/angular-sample.component.scss
@@ -202,24 +202,24 @@ igx-expansion-panel-body {
         .warning {
             color: color($igx-light-palette, "warn");
         }
-    }
+   }
 
     ::ng-deep {
         @include theme($igx-light-palette);
         @include mat.all-component-themes($custom-mat-light-theme);
 
         .mat-mdc-slider.secondary .mdc-slider__track--inactive,
         .mat-mdc-slider.secondary .mdc-slider__thumb-knob {
-            background-color: color($custom-mat-light-theme, 'secondary');
+            background-color: color($igx-light-palette, 'secondary');
         }
 
         .mat-mdc-slider.secondary .mdc-slider__track--active_fill,
         .mat-mdc-slider.secondary .mdc-slider__thumb-knob {
-            border-color: color($custom-mat-light-theme, 'secondary');
+            border-color: color($igx-light-palette, 'secondary');
         }
 
         .mat-mdc-slider.secondary .mat-mdc-slider-visual-thumb .mat-ripple > * {
-            background-color: color($custom-mat-light-theme, 'secondary');
+            background-color: color($igx-light-palette, 'secondary');
             opacity: .12;
         }
 
@@ -229,7 +229,7 @@ igx-expansion-panel-body {
 
         .mat-mdc-form-field-focus-overlay,
         .mdc-text-field--filled:not(.mdc-text-field--disabled) {
-            background-color: color($custom-mat-light-theme, 'surface');
+            background-color: color($igx-light-palette, 'surface');
         }
     }
 }
diff --git a/src/app/tree-grid/tree-grid-multi-cell-selection/tree-grid-multi-cell-selection.component.ts b/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;
diff --git a/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.scss b/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.scss

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`::ng-deep {`
`2`	`2`	`.custom-body {`
`3`	`3`	`color: var(--ig-surface-500-contrast);`
`4`		`- background: hsla(var(--ig-surface-500));`
	`4`	`+ background: var(--ig-surface-500);`
`5`	`5`	`}`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,12 @@ igx-avatar {`
`16`	`16`	`z-index: 1;`
`17`	`17`	`--ig-size: var(--ig-size-medium);`
`18`	`18`	`--background: hsla(var(--ig-secondary-500), 6%);`
`19`		`- border: 1px solid hsl(var(--ig-secondary-500));`
	`19`	`+ border: 1px solid var(--ig-secondary-500);`
`20`	`20`	`border-radius: rem(4px);`
`21`	`21`
`22`	`22`	`igx-icon {`
`23`	`23`	`--size: #{rem(48px)};`
`24`		`- color: hsl(var(--ig-secondary-500));`
	`24`	`+ color: var(--ig-secondary-500);`
`25`	`25`	`}`
`26`	`26`	`}`
`27`	`27`
`@@ -31,5 +31,5 @@ igx-icon[backdrop] {`
`31`	`31`	`inset-inline: calc(100% - var(--size));`
`32`	`32`	`z-index: -1;`
`33`	`33`	`position: absolute;`
`34`		`- color: hsl(var(--ig-gray-300));`
	`34`	`+ color: var(--ig-gray-300);`
`35`	`35`	`}`