Angular Upgrade v20

[KhizerRehan]

What this PR does / why we need it:
This PR upgrades the Angular framework and related dependencies from version 19 to version 20, along with updating Material Design component CSS custom properties from the deprecated --mdc-* prefix to the new --mat-* prefix.

Which issue(s) this PR fixes:

Fixes #7685

What type of PR is this?

Special notes for your reviewer:

• Material Component variables names has been updated therefore have to manually update --mdc-* prefix to the new --mat prefix along with variable names

Does this PR introduce a user-facing change? Then add your Release Note here:

Upgrade to Angular 20 with Material Design CSS prefix migration from --mdc-* to --mat-*

Documentation:

NONE

[kubermatic-bot]

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

[KhizerRehan]

/test all

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 44.89%. Comparing base (cedce4b) to head (8f3d0d4).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7601      +/-   ##
==========================================
- Coverage   44.92%   44.89%   -0.03%     
==========================================
  Files         443      443              
  Lines       19889    19901      +12     
  Branches     2772     2774       +2     
==========================================
  Hits         8935     8935              
- Misses      10951    10963      +12     
  Partials        3        3              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[KhizerRehan]

/test all

[KhizerRehan]

/test all

[KhizerRehan]

/test all

[KhizerRehan]

/test all

[KhizerRehan]

/test pre-dashboard-web-integration-tests-ce

[kubermatic-bot]

@KhizerRehan: The specified target(s) for /test were not found.
The following commands are available to trigger required jobs:

/test pre-dashboard-validate-prow-yaml

Use /test all to run all jobs.

In response to this:

/test pre-dashboard-web-integration-tests-ce

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[KhizerRehan]

/test pre-dashboard-web-integration-tests-ce

[kubermatic-bot]

@KhizerRehan: The specified target(s) for /test were not found.
The following commands are available to trigger required jobs:

/test pre-dashboard-validate-prow-yaml

Use /test all to run all jobs.

In response to this:

/test pre-dashboard-web-integration-tests-ce

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[ahmadhamzh]

All seems good, I only noticed this background-color difference on all scrollable pages.

[KhizerRehan]

All seems good, I only noticed this background-color difference on all scrollable pages.

can you add comparison image with dev / local if you are already doing test in my branch @ahmadhamzh

[ahmadhamzh]

on dev:

on the local branch:

also the notification message style

[ahmadhamzh]

/approve

[kubermatic-bot]

LGTM label has been added.

Git tree hash: ba490e55c58dd88c0b1054fcdcd5251817d610fe

[kubermatic-bot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ahmadhamzh

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• modules/web/OWNERS [ahmadhamzh]
• modules/web/src/OWNERS [ahmadhamzh]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment