feat(*): updating to 18.2.0 rc

ChronosSF · ChronosSF · commit a306f13c927c · 2024-10-21T17:01:59.000+03:00
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-rc.0",
     "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-rc.0",
     "igniteui-dockmanager": "^1.14.2",
     "igniteui-live-editing": "^2.3.0",
     "igniteui-webcomponents": "^4.7.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/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/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
@@ -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;
 		}
 	}

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`	`}`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ igx-buttongroup {`
`42`	`42`	`min-width: 70px;`
`43`	`43`	`justify-self: flex-start;`
`44`	`44`	`text-align: left;`
`45`		`- color: hsla(var(--ig-secondary-600));`
	`45`	`+ color: var(--ig-secondary-600);`
`46`	`46`	`user-select: none;`
`47`	`47`	`}`
`48`	`48`	`}`