diff --git a/package-lock.json b/package-lock.json index 94eb98301f..bfe3764719 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,11 +31,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", @@ -12796,13 +12796,13 @@ ] }, "node_modules/igniteui-angular": { - "version": "18.1.8", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-18.1.8.tgz", - "integrity": "sha512-25OpjJ/Gejx44q5VcSFVU41DwIxHViEs8Y430T0l95rvQ+WwXDRPmPFMLBf0LkHT8gvMIR7NFMcdjAlwd8A1qA==", + "version": "18.2.0-rc.0", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-18.2.0-rc.0.tgz", + "integrity": "sha512-aRdBPKGGO3e+JXAOzALYQN07Oz6l5Q1X5zE9RdIcl4XR8nc1+54ezWKRkQ/pwxMy23/hglELH6a6yA3DidOXaA==", "dependencies": { "@igniteui/material-icons-extended": "^3.0.0", "fflate": "^0.8.1", - "igniteui-theming": "^11.0.0", + "igniteui-theming": "^14.1.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "tslib": "^2.3.0", @@ -12869,9 +12869,9 @@ } }, "node_modules/igniteui-angular-i18n": { - "version": "18.1.0", - "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-18.1.0.tgz", - "integrity": "sha512-ClxsPC1yCI9Yz6ud2PW+ilaykucUX8UsLlMbrQqLi2HSmvsqe3LXHLCZASO7136UxFkmVNAjpdidlnIqgASfEA==" + "version": "18.2.0-rc.0", + "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-18.2.0-rc.0.tgz", + "integrity": "sha512-1UK4U2WwaUbJBbUZtiurkuW7i8InYDATdfG8uBA6+RXu0z9N9yndUiGEXBSIJqBCpHxKyiRKL65tGTeNwkRbNA==" }, "node_modules/igniteui-dockmanager": { "version": "1.14.4", @@ -12892,11 +12892,11 @@ "integrity": "sha512-7zDG3xFPYqcjyOCdR9JuiDh+xX3pJEMqMP2qVV/3t1NjeojcZEWEaYW8OKzDzowEttPrj7UnjAqxXOIMbRTz6Q==" }, "node_modules/igniteui-theming": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-11.0.0.tgz", - "integrity": "sha512-t2hRgFBcS4QQFzgPwp3V8d5CFgLFWN9GY0GqnoBdTmtHQEm+2hbzrxgA//akUkO7g5Z6WEp5Y4WWaRkPJVy1HQ==", + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-14.1.0.tgz", + "integrity": "sha512-6x/GWEAZGeZohomzs5jSumn5B8J1y5CePb5w9wmoQgJx4o8/QFjZ0Q+Uu0Y7GFq2howkcNnkKhgrfEorv3rOTw==", "peerDependencies": { - "sass": "^1.58.1" + "sass": "^1.69.5" } }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index 20df3130c8..036fe1b042 100644 --- 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 index 777a508a7e..1e416aae19 100644 --- 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 index e3476d1ccf..cf86a1df88 100644 --- 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 index 65ef1624cc..34fb852f1b 100644 --- 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 index 9d15d0b2e2..f7171268f6 100644 --- 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 index fdb7b55544..5bb0c16a07 100644 --- 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 index 296184db6f..36574eccb6 100644 --- 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 index 7007ae424d..da4c19ab1c 100644 --- 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,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; } } @@ -50,7 +50,7 @@ igx-buttongroup { > * { 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 index 296184db6f..36574eccb6 100644 --- 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 index e3476d1ccf..cf86a1df88 100644 --- 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 index 0325972bb4..38afa50748 100644 --- 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 index 7c4f8afb63..80fe417c41 100644 --- 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 index 8a26f2d959..0858154f84 100644 --- 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 index f7fef87c16..d12079d2f0 100644 --- 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 index 9fa891d39b..68237527a4 100644 --- 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 index ab47e6b69a..c5e94e15ab 100644 --- 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 index e43d516a6b..a36be7810f 100644 --- 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 index a98129cb3d..78c139d190 100644 --- 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 index c55bbf4770..94ce611d2d 100644 --- 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 index 296184db6f..36574eccb6 100644 --- 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; } }