Merge pull request #3553 from IgniteUI/vnext

Updating production from staging
IgniteUI · Oct 25, 2024 · e3f4262 · e3f4262
2 parents f2d5067 + 921b194
commit e3f4262
Show file tree

Hide file tree

Showing 35 changed files with 5,314 additions and 6,793 deletions.
diff --git a/live-editing/configs/ComboConfigGenerator.ts b/live-editing/configs/ComboConfigGenerator.ts
@@ -10,7 +10,8 @@ import {
     IgxToastModule,
     IgxIconModule,
     IgxPrefixModule,
-    IgxSimpleComboModule
+    IgxSimpleComboModule,
+    IgxProgressBarModule
 } from 'igniteui-angular';
 import { IgxFinancialChartModule } from 'igniteui-angular-charts';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing';
@@ -131,9 +132,9 @@ export class ComboConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             additionalFiles: ['/src/app/data/cities15000-regions-countries.ts'],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxComboModule', 'IgxSimpleComboModule', 'SimpleComboCascadingComponent'],
+                imports: ['IgxComboModule', 'IgxSimpleComboModule', 'IgxProgressBarModule', 'SimpleComboCascadingComponent'],
                 ngDeclarations: ['SimpleComboCascadingComponent'],
-                ngImports: ['IgxComboModule', 'IgxSimpleComboModule']
+                ngImports: ['IgxComboModule', 'IgxSimpleComboModule', 'IgxProgressBarModule']
             }),
             component: 'SimpleComboCascadingComponent'
         }));

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,18 +44,18 @@
     "url": "git://github.com/IgniteUI/igniteui-angular-samples/repository.git"
   },
   "dependencies": {
-    "@angular/animations": "^18.0.1",
-    "@angular/cdk": "^18.0.1",
-    "@angular/common": "^18.0.1",
-    "@angular/compiler": "^18.0.1",
-    "@angular/core": "^18.0.1",
-    "@angular/forms": "^18.0.1",
-    "@angular/localize": "^18.0.1",
-    "@angular/material": "^18.0.1",
-    "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@angular/router": "^18.0.1",
-    "@igniteui/material-icons-extended": "^3.0.2",
+    "@angular/animations": "^18.2.8",
+    "@angular/cdk": "^18.2.9",
+    "@angular/common": "^18.2.8",
+    "@angular/compiler": "^18.2.8",
+    "@angular/core": "^18.2.8",
+    "@angular/forms": "^18.2.8",
+    "@angular/localize": "^18.2.8",
+    "@angular/material": "^18.2.9",
+    "@angular/platform-browser": "^18.2.8",
+    "@angular/platform-browser-dynamic": "^18.2.8",
+    "@angular/router": "^18.2.8",
+    "@igniteui/material-icons-extended": "^3.1.0",
     "@microsoft/signalr": "^7.0.12",
     "@ng-bootstrap/ng-bootstrap": "^17.0.0",
     "@popperjs/core": "2.11.8",
@@ -65,30 +65,35 @@
     "bootstrap": "5.3.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^18.1.7",
+    "igniteui-angular": "^18.2.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-extras": "^18.2.3",
+    "igniteui-angular-i18n": "^18.2.0",
     "igniteui-dockmanager": "^1.14.2",
     "igniteui-live-editing": "^2.3.0",
     "igniteui-webcomponents": "^4.7.0",
     "minireset.css": "0.0.6",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.1",
-    "zone.js": "~0.14.4"
+    "zone.js": "~0.14.10"
+  },
+  "overrides": {
+    "igniteui-angular-extras": {
+      "igniteui-angular": "^18.2.0"
+    }
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.2",
-    "@angular-eslint/builder": "^18.0.1",
-    "@angular-eslint/eslint-plugin": "^18.0.1",
-    "@angular-eslint/eslint-plugin-template": "^18.0.1",
-    "@angular-eslint/schematics": "^18.0.1",
-    "@angular-eslint/template-parser": "^18.0.1",
-    "@angular/cli": "^18.0.2",
-    "@angular/compiler-cli": "^18.0.1",
-    "@angular/language-service": "^18.0.1",
-    "@igniteui/angular-schematics": "18.1.1340",
+    "@angular-devkit/build-angular": "^18.2.9",
+    "@angular-eslint/builder": "^18.4.0",
+    "@angular-eslint/eslint-plugin": "^18.4.0",
+    "@angular-eslint/eslint-plugin-template": "^18.4.0",
+    "@angular-eslint/schematics": "^18.4.0",
+    "@angular-eslint/template-parser": "^18.4.0",
+    "@angular/cli": "^18.2.9",
+    "@angular/compiler-cli": "^18.2.8",
+    "@angular/language-service": "^18.2.8",
+    "@igniteui/angular-schematics": "18.1.1410",
     "@juggle/resize-observer": "^3.3.1",
     "@types/jasmine": "^5.1.2",
     "@types/jasminewd2": "^2.0.13",

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($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/...app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.scss b/...app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.scss
@@ -2,9 +2,11 @@
     display: flex;
     flex-flow: column;
     margin: 15px;
+    align-items: stretch;
 }
 
 .advanced-dialog {
     margin-bottom: 2px;
-    height: 300px;
-}
+    height: 325px;
+    overflow-y: auto;
+}
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/...-external-advanced-filtering/hierarchical-grid-external-advanced-filtering.component.scss b/...-external-advanced-filtering/hierarchical-grid-external-advanced-filtering.component.scss
@@ -2,6 +2,7 @@
     margin: 15px;
     display: flex;
     flex-flow: column;
+    align-items: stretch;
 }
 
 .photo {
@@ -14,5 +15,6 @@
 
 .advanced-dialog {
     margin-bottom: 2px;
-    height: 300px;
-}
+    height: 325px;
+    overflow-y: auto;
+}
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/drag-drop/kanban-sample/kanban-sample.component.ts b/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.ts
@@ -20,6 +20,9 @@ interface IListItem {
     styleUrls: ['./kanban-sample.component.scss']
 })
 export class KanbanSampleComponent implements OnInit {
+    @ViewChild('toDo', { read: ElementRef }) public toDo: ElementRef;
+    @ViewChild('inProgress', { read: ElementRef }) public inProgress: ElementRef;
+    @ViewChild('done', { read: ElementRef }) public done: ElementRef;
     public toDoList: IListItem[];
     public inProgressList: IListItem[];
     public doneList: IListItem[];

diff --git a/src/app/interactions/overlay/overlay-scroll-2/overlay-scroll-sample-2.component.scss b/src/app/interactions/overlay/overlay-scroll-2/overlay-scroll-sample-2.component.scss
@@ -4,24 +4,24 @@ body {
 
 .overlay-sample {
     padding: 32px 0px 32px 32px;
-    overflow-y: scroll;
     display: flex;
     flex-direction: row;
     height: 200px;
     overflow-y: scroll;
 }
 
-
 .container__row > div, .section__container--wide > span, .section__position-element > div {
     display: inline-block;
 }
+
 .section__row--wide, .container__row, .section__header {
     width: 100%;
 }
 
 .section__row > span {
     height: 48px;
 }
+
 .section__row--wide, .section__container--wide > span {
     height: 80px;
     max-width: 320px;
@@ -59,6 +59,7 @@ span:hover {
 .section__separator {
     width: 32px;
 }
+
 .container {
     width: 50%;
     height: 600px;
@@ -84,6 +85,7 @@ span:hover {
     text-align: left;
     margin-top: 16px;
 }
+
 .section__position-element, .section__row--wide {
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
 }
diff --git a/src/app/interactions/overlay/overlay-scroll-2/overlay-scroll-sample-2.component.ts b/src/app/interactions/overlay/overlay-scroll-2/overlay-scroll-sample-2.component.ts
@@ -68,7 +68,7 @@ export class OverlayScrollSample2Component implements OnInit, OnDestroy {
                 this._target = this.scrollDemo.nativeElement.children[1];
                 break;
             case ('close'):
-                scrollStrategy = new CloseScrollStrategy(this.mainContainer.nativeElement);
+                scrollStrategy = new CloseScrollStrategy();
                 this._target = this.scrollDemo.nativeElement.children[2];
                 break;
             default: