Skip to content

Commit 96d25f2

Browse files
KhizerRehanKhizerRehan
authored
Angular Upgrade v20 (#7601)
* Initial Commit * fix buffer issue * changing the prefix from --mdc-* to --mat-* * changed component names and word order in variable names * update lock file * fix: update deprecated CSS variable names to align with Angular Material v20
1 parent 3246f0c commit 96d25f2

File tree

11 files changed

+4322
-2646
lines changed

11 files changed

+4322
-2646
lines changed

‎modules/web/package-lock.json‎

Lines changed: 4220 additions & 2551 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎modules/web/package.json‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -57,31 +57,31 @@
5757
]
5858
},
5959
"dependencies": {
60-
"@angular/animations": "19.2.11",
61-
"@angular/cdk": "19.2.16",
62-
"@angular/common": "19.2.11",
63-
"@angular/compiler": "19.2.11",
64-
"@angular/core": "19.2.11",
60+
"@angular/animations": "20.3.1",
61+
"@angular/cdk": "20.2.12",
62+
"@angular/common": "20.3.1",
63+
"@angular/compiler": "20.3.1",
64+
"@angular/core": "20.3.1",
6565
"@angular/flex-layout": "15.0.0-beta.42",
66-
"@angular/forms": "19.2.11",
67-
"@angular/localize": "19.2.11",
68-
"@angular/material": "19.2.16",
69-
"@angular/platform-browser": "19.2.11",
70-
"@angular/platform-browser-dynamic": "19.2.11",
71-
"@angular/router": "19.2.11",
66+
"@angular/forms": "20.3.1",
67+
"@angular/localize": "20.3.1",
68+
"@angular/material": "20.2.12",
69+
"@angular/platform-browser": "20.3.1",
70+
"@angular/platform-browser-dynamic": "20.3.1",
71+
"@angular/router": "20.3.1",
7272
"@aws-sdk/client-s3": "^3.808.0",
73-
"@fontsource/inconsolata": "5.2.8",
73+
"@fontsource/inconsolata": "5.2.5",
7474
"@fontsource/roboto": "5.1.1",
7575
"@fontsource/roboto-mono": "5.2.5",
7676
"@fontsource/ubuntu": "5.1.1",
77-
"@swimlane/ngx-charts": "21.1.3",
77+
"@swimlane/ngx-charts": "^23.0.1",
7878
"@xterm/addon-fit": "^0.10.0",
7979
"@xterm/xterm": "^5.5.0",
8080
"browserslist": "^4.24.4",
8181
"buffer": "6.0.3",
8282
"core-js": "3.41.0",
8383
"country-code-lookup": "0.1.3",
84-
"cron-validator": "1.4.0",
84+
"cron-validator": "1.3.1",
8585
"flag-icons": "7.3.2",
8686
"git-describe": "4.1.1",
8787
"jquery": "3.7.1",
@@ -92,7 +92,7 @@
9292
"moment": "2.30.1",
9393
"monaco-editor": "0.52.2",
9494
"ngx-clipboard": "16.0.0",
95-
"ngx-cookie-service": "19.1.0",
95+
"ngx-cookie-service": "20.1.0",
9696
"ngx-monaco-editor-v2": "^20.3.0",
9797
"react": "^19.1.0",
9898
"react-dom": "^18.3.1",
@@ -103,21 +103,21 @@
103103
"zone.js": "0.15.0"
104104
},
105105
"devDependencies": {
106-
"@angular/build": "^19.2.13",
107-
"@angular/cli": "19.2.13",
108-
"@angular/compiler-cli": "19.2.11",
106+
"@angular/build": "^20.3.2",
107+
"@angular/cli": "20.3.2",
108+
"@angular/compiler-cli": "20.3.1",
109109
"@jest/globals": "29.7.0",
110110
"@types/jest": "29.5.14",
111111
"@types/js-yaml": "4.0.9",
112-
"@types/lodash": "4.17.20",
112+
"@types/lodash": "4.17.16",
113113
"@types/node": "22.13.4",
114114
"@types/react": "^19.1.8",
115115
"@types/react-dom": "^18.3.5",
116116
"@typescript-eslint/eslint-plugin": "8.46.4",
117117
"@typescript-eslint/parser": "8.32.1",
118118
"browserlist": "1.0.1",
119119
"btoa": "1.2.1",
120-
"concurrently": "9.2.1",
120+
"concurrently": "9.1.2",
121121
"cypress": "14.3.3",
122122
"cypress-fail-fast": "7.1.0",
123123
"del": "8.0.0",
@@ -129,7 +129,8 @@
129129
"husky": "9.1.7",
130130
"jest": "29.7.0",
131131
"jest-canvas-mock": "^2.5.2",
132-
"jest-preset-angular": "14.5.3",
132+
"jest-environment-jsdom": "^30.1.2",
133+
"jest-preset-angular": "^15.0.1",
133134
"js-beautify": "1.15.4",
134135
"json-server": "0.17.4",
135136
"license-check-and-add": "4.0.5",
@@ -149,3 +150,6 @@
149150
"typescript": "5.8.2"
150151
}
151152
}
153+
154+
155+

‎modules/web/src/app/cluster/details/cluster/cni-version/theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
.cni-version-container {
1919
.cni-version {
2020
.mdc-notched-outline {
21-
--mdc-outlined-text-field-disabled-outline-color: #{map.get($colors, divider)};
21+
--mat-form-field-outlined-disabled-outline-color: #{map.get($colors, divider)};
2222
}
2323

2424
.cni-version-type {

‎modules/web/src/app/cluster/details/shared/version-picker/theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
.version-picker-container {
1919
.km-version-picker {
2020
.mat-form-field-outline {
21-
--mdc-outlined-text-field-disabled-outline-color: #{map.get($colors, divider)};
21+
--mat-form-field-outlined-disabled-outline-color: #{map.get($colors, divider)};
2222
}
2323

2424
.version-picker-type {

‎modules/web/src/app/dynamic/enterprise/quotas/quota-widget/style.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
padding-top: 9px;
7373

7474
.property-usage-bar {
75-
--mdc-linear-progress-track-height: 5px;
76-
--mdc-linear-progress-active-indicator-height: 5px;
75+
--mat-progress-bar-track-height: 5px;
76+
--mat-progress-bar-active-indicator-height: 5px;
7777

7878
border-radius: variables.$border-radius;
7979
height: 5px;
@@ -134,8 +134,8 @@
134134
width: 100%;
135135

136136
.property-usage-bar {
137-
--mdc-linear-progress-track-height: 6px;
138-
--mdc-linear-progress-active-indicator-height: 6px;
137+
--mat-progress-bar-track-height: 6px;
138+
--mat-progress-bar-active-indicator-height: 6px;
139139

140140
border-radius: variables.$border-radius;
141141
height: 6px;

‎modules/web/src/app/shared/components/property-usage/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
.property-usage-bar {
2323
@include mixins.size(280px, 6px, true);
2424

25-
--mdc-linear-progress-track-height: 6px;
25+
--mat-progress-bar-track-height: 6px;
2626

2727
border-radius: variables.$border-radius;
2828
margin: 6px 0;

‎modules/web/src/assets/css/material/_main.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -535,7 +535,7 @@ button {
535535
&.mat-mdc-raised-button,
536536
&.mat-mdc-icon-button {
537537
--mat-icon-button-state-layer-color: none;
538-
--mdc-icon-button-state-layer-size: none;
538+
--mat-icon-button-state-layer-size: none;
539539

540540
font-size: variables.$font-size-subhead;
541541
height: 45px;
@@ -564,7 +564,7 @@ button {
564564

565565
&.mat-mdc-icon-button {
566566
--mat-icon-button-state-layer-color: none;
567-
--mdc-icon-button-state-layer-size: 45px !important;
567+
--mat-icon-button-state-layer-size: 45px !important;
568568

569569
bottom: 2px;
570570
}
@@ -645,9 +645,9 @@ button {
645645

646646
/* stylelint-disable selector-class-pattern */
647647
.mat-mdc-slide-toggle {
648-
--mdc-switch-track-width: 50px;
649-
--mdc-switch-track-height: 24px;
650-
--mdc-switch-track-shape: 50px;
648+
--mat-slide-toggle-track-width: 50px;
649+
--mat-slide-toggle-track-height: 24px;
650+
--mat-slide-toggle-track-shape: 50px;
651651

652652
.mdc-switch {
653653
.mdc-switch__handle-track {
@@ -671,8 +671,8 @@ button {
671671
.mat-mdc-chip {
672672
border-radius: variables.$border-radius;
673673

674-
--mdc-chip-container-height: 24px !important;
675-
--mdc-chip-container-shape-radius: 3px !important;
674+
--mat-chip-container-height: 24px !important;
675+
--mat-chip-container-shape-radius: 3px !important;
676676

677677
.mdc-evolution-chip__action {
678678
box-shadow: none !important;

‎modules/web/src/assets/css/material/_theme.scss‎

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
// Dialogs.
3535
.mat-mdc-dialog-container {
36-
--mdc-dialog-supporting-text-color: #{map.get($colors, text)};
36+
--mat-dialog-supporting-text-color: #{map.get($colors, text)};
3737

3838
color: map.get($colors, text);
3939
}
@@ -119,7 +119,7 @@
119119

120120
// Menus.
121121
.mat-drawer-container {
122-
background-color: map.get($colors, background);
122+
--mat-sidenav-content-background-color: #{map.get($colors, background)};
123123

124124
.mat-drawer-side {
125125
border: none;
@@ -131,9 +131,9 @@
131131
&.mat-mdc-form-field {
132132
color: map.get($colors, hint-color);
133133

134-
--mdc-outlined-text-field-outline-color: #{map.get($colors, divider)};
135-
--mdc-outlined-text-field-disabled-outline-color: #{map.get($colors, divider-disabled)};
136-
--mdc-outlined-text-field-hover-outline-color: #{map.get($colors, secondary-dark)};
134+
--mat-form-field-outlined-outline-color: #{map.get($colors, divider)};
135+
--mat-form-field-outlined-disabled-outline-color: #{map.get($colors, divider-disabled)};
136+
--mat-form-field-outlined-hover-outline-color: #{map.get($colors, secondary-dark)};
137137
}
138138

139139
}
@@ -155,8 +155,8 @@
155155
.mat-mdc-button,
156156
.mat-mdc-unelevated-button,
157157
.mat-mdc-raised-button {
158-
--mdc-filled-button-container-color: #{map.get($colors, primary)};
159-
--mdc-filled-button-label-text-color: #fff;
158+
--mat-button-filled-container-color: #{map.get($colors, primary)};
159+
--mat-button-filled-label-text-color: #fff;
160160

161161
&:hover:not([disabled]) {
162162
background-color: map.get($colors, primary-hover);
@@ -265,43 +265,42 @@
265265

266266
.mat-mdc-radio-button {
267267
&.mat-accent {
268-
--mdc-radio-selected-icon-color: #{map.get($colors, primary)};
269-
--mat-radio-checked-ripple-color: none;
270-
--mdc-radio-selected-pressed-icon-color: var(--mdc-radio-selected-icon-color);
271-
--mdc-radio-selected-hover-icon-color: var(--mdc-radio-selected-icon-color);
272-
--mdc-radio-selected-focus-icon-color: var(--mdc-radio-selected-icon-color);
273-
--mdc-radio-unselected-icon-color: #{map.get($colors, text-secondary)};
268+
--mat-radio-selected-icon-color: #{map.get($colors, primary)};
269+
--mat-radio-selected-pressed-icon-color: var(--mat-radio-selected-icon-color);
270+
--mat-radio-selected-hover-icon-color: var(--mat-radio-selected-icon-color);
271+
--mat-radio-selected-focus-icon-color: var(--mat-radio-selected-icon-color);
272+
--mat-radio-unselected-icon-color: #{map.get($colors, text-secondary)};
274273
}
275274
}
276275

277276
.mat-mdc-slide-toggle {
278277
&.mat-accent,
279278
button {
280279
// track color
281-
--mdc-switch-selected-track-color: #{map.get($colors, primary)};
282-
--mdc-switch-selected-focus-track-color: var(--mdc-switch-selected-track-color);
283-
--mdc-switch-selected-hover-track-color: var(--mdc-switch-selected-track-color);
284-
--mdc-switch-selected-pressed-track-color: var(--mdc-switch-selected-track-color);
285-
--mdc-switch-unselected-track-color: #{map.get($colors, divider)};
286-
--mdc-switch-unselected-focus-track-color: var(--mdc-switch-unselected-track-color);
287-
--mdc-switch-unselected-hover-track-color: var(--mdc-switch-unselected-track-color);
288-
--mdc-switch-unselected-pressed-track-color: var(--mdc-switch-unselected-track-color);
280+
--mat-slide-toggle-selected-track-color: #{map.get($colors, primary)};
281+
--mat-slide-toggle-selected-focus-track-color: var(--mat-slide-toggle-selected-track-color);
282+
--mat-slide-toggle-selected-hover-track-color: var(--mat-slide-toggle-selected-track-color);
283+
--mat-slide-toggle-selected-pressed-track-color: var(--mat-slide-toggle-selected-track-color);
284+
--mat-slide-toggle-unselected-track-color: #{map.get($colors, divider)};
285+
--mat-slide-toggle-unselected-focus-track-color: var(--mat-slide-toggle-unselected-track-color);
286+
--mat-slide-toggle-unselected-hover-track-color: var(--mat-slide-toggle-unselected-track-color);
287+
--mat-slide-toggle-unselected-pressed-track-color: var(--mat-slide-toggle-unselected-track-color);
289288

290289
// handle color
291-
--mdc-switch-handle-surface-color: #{map.get($colors, slide-toggle-handle-color)};
292-
--mdc-switch-selected-handle-color: #fafafa;
293-
--mdc-switch-selected-focus-handle-color: var(--mdc-switch-selected-handle-color);
294-
--mdc-switch-selected-hover-handle-color: var(--mdc-switch-selected-handle-color);
295-
--mdc-switch-selected-pressed-handle-color: var(--mdc-switch-selected-handle-color);
296-
--mdc-switch-unselected-handle-color: #{map.get($colors, slide-toggle-handle-color)};
297-
--mdc-switch-unselected-focus-handle-color: var(--mdc-switch-unselected-handle-color);
298-
--mdc-switch-unselected-hover-handle-color: var(--mdc-switch-unselected-handle-color);
299-
--mdc-switch-unselected-pressed-handle-color: var(--mdc-switch-unselected-handle-color);
290+
--mat-slide-toggle-handle-surface-color: #{map.get($colors, slide-toggle-handle-color)};
291+
--mat-slide-toggle-selected-handle-color: #fafafa;
292+
--mat-slide-toggle-selected-focus-handle-color: var(--mat-slide-toggle-selected-handle-color);
293+
--mat-slide-toggle-selected-hover-handle-color: var(--mat-slide-toggle-selected-handle-color);
294+
--mat-slide-toggle-selected-pressed-handle-color: var(--mat-slide-toggle-selected-handle-color);
295+
--mat-slide-toggle-unselected-handle-color: #{map.get($colors, slide-toggle-handle-color)};
296+
--mat-slide-toggle-unselected-focus-handle-color: var(--mat-slide-toggle-unselected-handle-color);
297+
--mat-slide-toggle-unselected-hover-handle-color: var(--mat-slide-toggle-unselected-handle-color);
298+
--mat-slide-toggle-unselected-pressed-handle-color: var(--mat-slide-toggle-unselected-handle-color);
300299

301300
// ripple color
302-
--mdc-switch-selected-focus-state-layer-color: var(--mdc-switch-selected-track-color);
303-
--mdc-switch-selected-hover-state-layer-color: var(--mdc-switch-selected-track-color);
304-
--mdc-switch-selected-pressed-state-layer-color: var(--mdc-switch-selected-track-color);
301+
--mat-slide-toggle-selected-focus-state-layer-color: var(--mat-slide-toggle-selected-track-color);
302+
--mat-slide-toggle-selected-hover-state-layer-color: var(--mat-slide-toggle-selected-track-color);
303+
--mat-slide-toggle-selected-pressed-state-layer-color: var(--mat-slide-toggle-selected-track-color);
305304
}
306305
}
307306

@@ -321,22 +320,22 @@
321320
}
322321

323322
.mdc-checkbox {
324-
--mdc-checkbox-selected-icon-color: #{map.get($colors, primary)};
325-
--mdc-checkbox-selected-hover-icon-color: var(--mdc-checkbox-selected-icon-color);
326-
--mdc-checkbox-selected-focus-icon-color: var(--mdc-checkbox-selected-icon-color);
327-
--mdc-checkbox-selected-pressed-icon-color: var(--mdc-checkbox-selected-icon-color);
328-
--mdc-checkbox-selected-focus-state-layer-color: var(--mdc-checkbox-selected-icon-color);
329-
--mdc-checkbox-selected-pressed-state-layer-color: var(--mdc-checkbox-selected-icon-color);
330-
--mdc-checkbox-selected-focus-state-layer-opacity: 0;
331-
--mdc-checkbox-unselected-focus-state-layer-opacity: 0;
323+
--mat-checkbox-selected-icon-color: #{map.get($colors, primary)};
324+
--mat-checkbox-selected-hover-icon-color: var(--mat-checkbox-selected-icon-color);
325+
--mat-checkbox-selected-focus-icon-color: var(--mat-checkbox-selected-icon-color);
326+
--mat-checkbox-selected-pressed-icon-color: var(--mat-checkbox-selected-icon-color);
327+
--mat-checkbox-selected-focus-state-layer-color: var(--mat-checkbox-selected-icon-color);
328+
--mat-checkbox-selected-pressed-state-layer-color: var(--mat-checkbox-selected-icon-color);
329+
--mat-checkbox-selected-focus-state-layer-opacity: 0;
330+
--mat-checkbox-unselected-focus-state-layer-opacity: 0;
332331
}
333332

334333
// Chips.
335334
.mat-mdc-chip {
336-
--mdc-chip-elevated-container-color: transparent;
337-
--mdc-chip-label-text-color: #{map.get($colors, text)};
338-
--mdc-chip-focus-state-layer-color: none;
339-
--mdc-chip-hover-state-layer-color: none;
335+
--mat-chip-elevated-container-color: transparent;
336+
--mat-chip-label-text-color: #{map.get($colors, text)};
337+
--mat-chip-focus-state-layer-color: none;
338+
--mat-chip-hover-state-layer-color: none;
340339

341340
.mat-mdc-chip-remove {
342341
background-color: map.get($colors, text);
@@ -365,7 +364,7 @@
365364

366365
// Tooltips.
367366
.mat-mdc-tooltip {
368-
--mdc-plain-tooltip-container-color: #{map.get($colors, tooltip-background)};
367+
--mat-plain-tooltip-container-color: #{map.get($colors, tooltip-background)};
369368
}
370369

371370
// Spinners.
@@ -383,7 +382,7 @@
383382

384383
// Snackbar
385384
.mat-mdc-snack-bar-container {
386-
--mdc-snackbar-container-color: #{map.get($colors, option-background)};
385+
--mat-snack-bar-container-color: #{map.get($colors, option-background)};
387386
}
388387

389388
// Progress bar
@@ -407,6 +406,6 @@
407406
}
408407

409408
.mat-mdc-progress-bar.mat-accent {
410-
--mdc-linear-progress-active-indicator-color: #{map.get($colors, indicator-orange)};
409+
--mat-progress-bar-active-indicator-color: #{map.get($colors, indicator-orange)};
411410
}
412411
}

‎modules/web/src/assets/themes/dark.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,13 @@ $colors-dark-palette: map.merge(
7979
500: #0072b0,
8080
)
8181
);
82-
$theme-dark: mat.m2-define-dark-theme(
83-
mat.m2-define-palette($colors-dark-palette),
84-
mat.m2-define-palette(mat.$m2-light-blue-palette),
85-
mat.m2-define-palette(mat.$m2-pink-palette)
86-
);
82+
$theme-dark: mat.m2-define-dark-theme((
83+
color: (
84+
primary: mat.m2-define-palette($colors-dark-palette),
85+
accent: mat.m2-define-palette(mat.$m2-light-blue-palette),
86+
warn: mat.m2-define-palette(mat.$m2-pink-palette)
87+
)
88+
));
8789
$background: map.get($theme-dark, background);
8890
$background: map.merge(
8991
$background,

‎modules/web/src/assets/themes/light.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,13 @@ $colors-light-palette: map.merge(
7575
500: #00517d,
7676
)
7777
);
78-
$theme-light: mat.m2-define-light-theme(
79-
mat.m2-define-palette($colors-light-palette),
80-
mat.m2-define-palette(mat.$m2-light-blue-palette),
81-
mat.m2-define-palette(mat.$m2-pink-palette)
82-
);
78+
$theme-light: mat.m2-define-light-theme((
79+
color: (
80+
primary: mat.m2-define-palette($colors-light-palette),
81+
accent: mat.m2-define-palette(mat.$m2-light-blue-palette),
82+
warn: mat.m2-define-palette(mat.$m2-pink-palette)
83+
)
84+
));
8385
$background: map.get($theme-light, background);
8486
$background: map.merge(
8587
$background,

0 commit comments

Comments
 (0)