Revert "Update igniteui-angular to 18.2.0-beta.2" (#3543)

teodosiah · gedinakova · web-flow · commit 0a6e0b58bfc1 · 2024-10-18T16:34:55.000+03:00
* Revert "Update igniteui-angular to 18.2.0-beta.2 

* fix(query-builder): revert styling in the QB sample

---------

Co-authored-by: Galina Edinakova &lt;gedinakova@infragistics.com&gt;
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 --legacy-peer-deps
+        run: npm ci
 
       - 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 --legacy-peer-deps
+        run: npm ci
 
       - 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 --legacy-peer-deps'
+    customCommand: 'install'
     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.2.0-beta.2",
+    "igniteui-angular": "^18.1.7",
     "igniteui-angular-charts": "^18.0.0",
     "igniteui-angular-core": "^18.0.0",
     "igniteui-angular-extras": "^18.0.5",
-    "igniteui-angular-i18n": "^18.2.0-beta.2",
+    "igniteui-angular-i18n": "^18.1.0",
     "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($sb-size: 6px));
+    @include scrollbar(scrollbar-theme($scrollbar-size: 6px));
     width: 100%;
     height: 90%;
     display: inline-flex;
@@ -50,6 +50,7 @@
 
 $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),
@@ -91,7 +92,7 @@ $custom-badge-theme: badge-theme(
 
     .grid-chart-contextmenu-wrapper {
         igx-grid {
-            @include scrollbar(scrollbar-theme($sb-size: 16px));
+            @include scrollbar(scrollbar-theme($scrollbar-size: 16px));
         }
     }
 
@@ -124,7 +125,7 @@ $custom-badge-theme: badge-theme(
     }
 
     igx-tab-content {
-        @include scrollbar(scrollbar-theme($sb-size: 10px));
+        @include scrollbar(scrollbar-theme($scrollbar-size: 10px));
     }
 
 }
@@ -146,7 +147,7 @@ $custom-badge-theme: badge-theme(
 $font-family: 'Titillium Web', 'Roboto', 'Helvetica Neue', sans-serif;
 
 .tab-options-wrapper {
-    @include scrollbar(scrollbar-theme($sb-size: 6px));
+    @include scrollbar(scrollbar-theme($scrollbar-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: var(--ig-surface-500);
+		background: hsla(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,6 +21,7 @@
 
 $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 var(--ig-secondary-500);
+    border: 1px solid hsl(var(--ig-secondary-500));
     border-radius: rem(4px);
 
     igx-icon {
         --size: #{rem(48px)};
-        color: var(--ig-secondary-500);
+        color: hsl(var(--ig-secondary-500));
     }
 }
 
@@ -31,5 +31,5 @@ igx-icon[backdrop] {
     inset-inline: calc(100% - var(--size));
     z-index: -1;
     position: absolute;
-    color: var(--ig-gray-300);
+    color: hsl(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.autoGenerate = true;
+        target.shouldGenerate = 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: var(--ig-secondary-600);
+			color: hsla(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: var(--ig-gray-900);
+		color: hsla(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: var(--ig-secondary-600);
+			color: hsla(var(--ig-secondary-600));
 			user-select: none;
 		}
 	}
 
 	> * {
 		padding: 8px 0;
 		line-height: 18px;
-		border-bottom: 1px dashed var(--ig-gray-400);
+		border-bottom: 1px dashed hsla(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: var(--ig-secondary-600);
+			color: hsla(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: var(--ig-surface-500);
+		background: hsla(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
-        [entities]="[{ name: '', fields: fields}]"
+        [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,2 +1,3 @@
-<igx-query-builder #queryBuilder [entities]="[{ name: '', fields: fields}]">
+<igx-query-builder #queryBuilder
+    [fields]="fields">    
 </igx-query-builder>
diff --git a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss
@@ -5,7 +5,6 @@ $black: #292826;
 $muted-yellow: #ffe482;
 
 $custom-query-builder: query-builder-theme($background: $black,
-        $tree-background: $black,
         $header-background: $black,
         $header-foreground: $yellow);
 
@@ -69,10 +68,8 @@ $custom-drop-down: drop-down-theme($schema: $dark-material-schema,
     margin: 16px;
 
     ::ng-deep {
-        @include theme($palette: $dark-material-palette );
-
-        @include css-vars($custom-query-builder);
         @include css-vars($custom-drop-down);
+        @include css-vars($custom-query-builder);
         @include css-vars($custom-button-group);
         @include css-vars($custom-input-group);
         @include css-vars($custom-chip);
@@ -91,24 +88,8 @@ $custom-drop-down: drop-down-theme($schema: $dark-material-schema,
                 color: $yellow
             }
 
-            .igx-icon-button--flat{
-                height: 32px;
-            }
-
-            .igx-filter-tree__inputs-actions igx-icon {
-                color: $yellow
-            }
-
-            .igx-filter-tree__inputs-actions igx-icon:hover {
-                color: $muted-yellow
-            }
-
-            .igx-filter-tree__inputs-actions igx-icon:focus {
-                color: $muted-yellow
-            }
-
             .igx-filter-tree__expression-actions igx-icon {
-                color: $yellow !important
+                color: $yellow
             }
 
             .igx-filter-tree__expression-actions igx-icon:hover {
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: var(--ig-surface-500);
+        background-color: hsla(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: var(--ig-secondary-500)
+        background-color: hsla(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: var(--ig-success-500);
+            color: hsla(var(--ig-success-500));
         }
 
         .downFontValue {
-            color: var(--ig-error-500);
+            color: hsla(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: var(--ig-success-500);
+            color: hsla(var(--ig-success-500));
         }
 
         .downFontValue {
-            color: var(--ig-error-500);
+            color: hsla(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: var(--ig-success-500);
+            color: hsla(var(--ig-success-500));
         }
 
         .downFontValue {
-            color: var(--ig-error-500);
+            color: hsla(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: var(--ig-surface-500);
+    background: hsla(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 var(--ig-gray-300);
+        border-left: 1px solid hsla(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: var(--ig-surface-500);
+    background: hsla(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
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
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: var(--ig-surface-500);`
	`4`	`+ background: hsla(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 var(--ig-secondary-500);`
	`19`	`+ border: 1px solid hsl(var(--ig-secondary-500));`
`20`	`20`	`border-radius: rem(4px);`
`21`	`21`
`22`	`22`	`igx-icon {`
`23`	`23`	`--size: #{rem(48px)};`
`24`		`- color: var(--ig-secondary-500);`
	`24`	`+ color: hsl(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: var(--ig-gray-300);`
	`34`	`+ color: hsl(var(--ig-gray-300));`
`35`	`35`	`}`