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

This reverts commit 0a1d717.
IgniteUI · Oct 10, 2024 · 09dedb5 · 09dedb5
1 parent 0a1d717
commit 09dedb5
Show file tree

Hide file tree

Showing 27 changed files with 56 additions and 54 deletions.
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/...d-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss b/...d-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/...p/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html b/...p/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,3 +1,3 @@
 <igx-query-builder #queryBuilder
-    [entities]="[{ name: '', fields: fields}]">    
+    [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: 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/...app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.scss b/...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
@@ -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($igx-light-palette, 'secondary');
+            background-color: color($custom-mat-light-theme, 'secondary');
         }
 
         .mat-mdc-slider.secondary .mdc-slider__track--active_fill,
         .mat-mdc-slider.secondary .mdc-slider__thumb-knob {
-            border-color: color($igx-light-palette, 'secondary');
+            border-color: color($custom-mat-light-theme, 'secondary');
         }
 
         .mat-mdc-slider.secondary .mat-mdc-slider-visual-thumb .mat-ripple > * {
-            background-color: color($igx-light-palette, 'secondary');
+            background-color: color($custom-mat-light-theme, '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($igx-light-palette, 'surface');
+            background-color: color($custom-mat-light-theme, '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.autoGenerate = true;
+        target.shouldGenerate = true;
         target.clearCellSelection();
         this.targetData = source.getSelectedData();
         notification.positionSettings.verticalDirection = VerticalAlignment.Middle;