feat(console): MDC components (#6482)

mdc components

---------

Co-authored-by: Elio Bischof <[email protected]>

console/src/app/modules/nav/nav.component.html

@@ -204,19 +204,22 @@
     <ng-template cnslHasRole [hasRole]="['iam.read']">
       <span class="fill-space"></span>
       <ng-container *ngIf="!adminService.hideOnboarding && (adminService.progressAllDone | async) === false">
-        <button
+        <div
           cdkOverlayOrigin
+          role="button"
           #trigger="cdkOverlayOrigin"
           matRipple
           class="progress-bar"
           (click)="showInstanceProgress = !showInstanceProgress"
         >
-          <mat-progress-bar
-            class="progress"
-            mode="determinate"
-            [value]="adminService.progressPercentage | async"
-          ></mat-progress-bar>
-        </button>
+          <div class="progress-div">
+            <mat-progress-bar
+              class="progress"
+              mode="determinate"
+              [value]="adminService.progressPercentage | async"
+            ></mat-progress-bar>
+          </div>
+        </div>
 
         <ng-template
           cdkConnectedOverlay

console/src/app/modules/nav/nav.component.scss

@@ -1,14 +1,12 @@
-@use '@angular/material' as mat;
-
 @mixin nav-theme($theme) {
   $primary: map-get($theme, primary);
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $accent: map-get($theme, accent);
-  $primary-color: mat.get-color-from-palette($primary, 500);
+  $primary-color: map-get($primary, 500);
 
-  $warn-color: mat.get-color-from-palette($warn, 500);
-  $accent-color: mat.get-color-from-palette($accent, 500);
+  $warn-color: map-get($warn, 500);
+  $accent-color: map-get($accent, 500);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
   $back: map-get($background, background);
@@ -56,7 +54,7 @@
           font-size: 14px;
           line-height: 14px;
           padding: 0.4rem 12px;
-          color: mat.get-color-from-palette($foreground, text) !important;
+          color: map-get($foreground, text);
           transition: all 0.2s ease;
           text-decoration: none;
           border-radius: 50vw;
@@ -105,7 +103,7 @@
 
           &.active {
             background-color: $primary-color;
-            color: mat.get-color-from-palette($foreground, toolbar-items) !important;
+            color: map-get($primary, default-contrast);
 
             .c_label {
               .count {
@@ -118,8 +116,8 @@
       }
     }
 
-    .mat-menu-content,
-    .mat-menu-panel {
+    .mat-mdc-menu-content,
+    .mat-mdc-menu-panel {
       background-color: $back;
       border-radius: 0.5rem;
 
@@ -190,24 +188,20 @@
     padding: 2px;
     border-radius: 50vw;
     cursor: pointer;
+    display: flex;
 
     &:hover {
       background: if($is-dark-theme, #ffffff, $primary-color);
       transition: background ease 0.15s;
     }
 
-    .progress {
-      border-radius: 50vw;
-      height: 8px;
+    .progress-div {
+      display: block;
+      height: 100%;
+      width: 100%;
 
-      .mat-progress-bar-buffer {
-        background-color: if($is-dark-theme, rgb(69, 91, 84), #cccccc) !important;
-      }
-      .mat-progress-bar-background {
-        fill: if($is-dark-theme, rgb(69, 91, 84), #cccccc) !important;
-      }
-      .mat-progress-bar-fill:after {
-        background-color: var(--success);
+      .progress {
+        border-radius: 50vw;
       }
     }
   }

console/src/app/modules/nav/nav.module.ts

@@ -2,17 +2,17 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
-import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import OnboardingCardModule from '../onboarding-card/onboarding-card.module';
 import { NavComponent } from './nav.component';
 
@@ -28,7 +28,7 @@ import { NavComponent } from './nav.component';
     RouterModule,
     MatTooltipModule,
     HasRolePipeModule,
-    MatLegacyProgressBarModule,
+    MatProgressBarModule,
     HasRoleModule,
     MatMenuModule,
     MatButtonModule,