feat(console): MDC components (#6482)

mdc components

---------

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

console/src/app/modules/members-table/members-table.component.html

@@ -17,40 +17,44 @@
   <div class="table-wrapper">
     <table mat-table class="table" aria-label="Elements" [dataSource]="dataSource">
       <ng-container matColumnDef="select">
-        <th class="selection" mat-header-cell *matHeaderCellDef>
-          <mat-checkbox
-            [disabled]="!canWrite"
-            color="primary"
-            (change)="$event ? masterToggle() : null"
-            [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()"
-          >
-          </mat-checkbox>
-        </th>
-        <td class="selection" mat-cell *matCellDef="let row">
-          <mat-checkbox
-            [disabled]="!canWrite"
-            color="primary"
-            (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null"
-            [checked]="selection.isSelected(row)"
-          >
-            <cnsl-avatar
-              *ngIf="row?.userType === UserType.TYPE_HUMAN; else cog"
-              class="avatar"
-              [name]="row.displayName"
-              [avatarUrl]="row.avatarUrl || ''"
-              [avatarUrl]="row.avatarUrl || ''"
-              [forColor]="row?.preferredLoginName"
-              [size]="32"
+        <th mat-header-cell *matHeaderCellDef>
+          <div class="selection">
+            <mat-checkbox
+              [disabled]="!canWrite"
+              color="primary"
+              (change)="$event ? masterToggle() : null"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
             >
-            </cnsl-avatar>
-            <ng-template #cog>
-              <cnsl-avatar [forColor]="row.preferredLoginName" [isMachine]="true">
-                <i class="las la-robot"></i>
+            </mat-checkbox>
+          </div>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <div class="selection">
+            <mat-checkbox
+              [disabled]="!canWrite"
+              color="primary"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+            >
+              <cnsl-avatar
+                *ngIf="row?.userType === UserType.TYPE_HUMAN; else cog"
+                class="avatar"
+                [name]="row.displayName"
+                [avatarUrl]="row.avatarUrl || ''"
+                [avatarUrl]="row.avatarUrl || ''"
+                [forColor]="row?.preferredLoginName"
+                [size]="32"
+              >
               </cnsl-avatar>
-            </ng-template>
-          </mat-checkbox>
+              <ng-template #cog>
+                <cnsl-avatar [forColor]="row.preferredLoginName" [isMachine]="true">
+                  <i class="las la-robot"></i>
+                </cnsl-avatar>
+              </ng-template>
+            </mat-checkbox>
+          </div>
         </td>
       </ng-container>
 
@@ -108,22 +112,24 @@
       <ng-container matColumnDef="roles">
         <th mat-header-cell *matHeaderCellDef class="role-row">{{ 'ROLESLABEL' | translate }}</th>
         <td mat-cell *matCellDef="let member" class="role-row">
-          <mat-chip-list class="cnsl-chip-list" aria-label="role selection">
-            <mat-chip
+          <mat-chip-listbox class="cnsl-chip-list" aria-label="role selection">
+            <mat-chip-option
+              [selectable]="false"
               class="cnsl-chip"
               *ngFor="let role of member.rolesList"
               [removable]="canWrite"
-              [selectable]="false"
               (removed)="removeRole(member, role)"
               data-e2e="role"
             >
-              <div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
-              <span>{{ role | roletransform }}</span>
-              <button *ngIf="canWrite" matChipRemove data-e2e="remove-role-button">
-                <mat-icon>cancel</mat-icon>
-              </button>
-            </mat-chip>
-          </mat-chip-list>
+              <div class="cnsl-chip-content">
+                <div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
+                <span>{{ role | roletransform }}</span>
+                <button *ngIf="canWrite" matChipRemove data-e2e="remove-role-button">
+                  <mat-icon>cancel</mat-icon>
+                </button>
+              </div>
+            </mat-chip-option>
+          </mat-chip-listbox>
         </td>
       </ng-container>
 

console/src/app/modules/members-table/members-table.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MembersTableComponent } from './members-table.component';

console/src/app/modules/members-table/members-table.component.ts

@@ -1,7 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTable } from '@angular/material/table';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { InstanceMembersDataSource } from 'src/app/pages/instance/instance-members/instance-members-datasource';

console/src/app/modules/members-table/members-table.module.ts

@@ -1,14 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';