fix all the TODOs created by CLI MDC migration

Author: sawankshrma

src/app/component/progress-slider/progress-slider.component.css

@@ -5,15 +5,12 @@
   width: 100%;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
-.mat-slider-horizontal {
+.mat-mdc-slider {
   min-width: 80px;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
-.mat-slider-track-fill {
-  background-color: #66bb6a;
-  height: 10px;
+:host ::ng-deep .mat-mdc-slider .mdc-slider__track--active_fill {
+  border-color: #66bb6a;
 }
 .step-label {
   min-width: 80px;

src/app/component/progress-slider/progress-slider.component.html

@@ -1,9 +1,13 @@
 <div class="progress-container">
   <!-- TODO: The 'tickInterval' property no longer exists -->
-  <mat-slider
-    [min]="0"
-    [max]="steps.length - 1"
-    [step]="1" #ngSlider><input matSliderThumb [value]="currentValue" (input)="onStepChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
+  <mat-slider [min]="0" [max]="steps.length - 1" [step]="1" #ngSlider
+    ><input
+      matSliderThumb
+      [value]="currentValue"
+      (input)="
+        onStepChange({ source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value }.value)
+      "
+      #ngSliderThumb="matSliderThumb" />
   </mat-slider>
   <span class="step-label">{{ steps[currentValue] }} <!-- eslint-disable-line -->
     <span *ngIf="currentValue > originalValue"> *</span>

src/app/component/report-config-modal/report-config-modal.component.css

@@ -5,8 +5,7 @@
     background-color: var(--background-primary);
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version. */
-mat-dialog-title{
+.mat-mdc-dialog-title {
     font-size:20px;
 }
 
@@ -130,7 +129,6 @@ mat-divider {
 }
 
 /* buttons */
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
 .column-toggle .mat-button-toggle {
     border-radius: 999px;
     border: none;
@@ -140,7 +138,6 @@ mat-divider {
 }
 
 /* selected */
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
 .column-toggle .mat-button-toggle-checked {
     background: var(--primary-color);
     color: var(--text-on-primary);

src/app/component/report-config-modal/report-config-modal.component.html

@@ -166,7 +166,15 @@ <h3>Activity Attributes</h3>
         [max]="maxWordCap"
         step="5"
         thumbLabel
-        [displayWith]="wordCapLabel" #ngSlider><input matSliderThumb [value]="config.descriptionWordCap" (input)="onWordCapChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" #ngSliderThumb="matSliderThumb" />
+        [displayWith]="wordCapLabel"
+        #ngSlider
+        ><input
+          matSliderThumb
+          [value]="config.descriptionWordCap"
+          (input)="
+            onWordCapChange({ source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value })
+          "
+          #ngSliderThumb="matSliderThumb" />
       </mat-slider>
     </div>
   </div>

src/app/pages/circular-heatmap/circular-heatmap.component.css

@@ -139,8 +139,8 @@
 app-progress-slider {
   width: 100%;
 }
-/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
-.mat-chip-list {
+.mat-mdc-chip-listbox,
+.mat-mdc-chip-grid {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -168,8 +168,8 @@ app-progress-slider {
     margin-right: 4px;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
-mat-chip {
+mat-chip-option,
+mat-chip-row {
   cursor: pointer;
 }
 
@@ -218,8 +218,8 @@ button.filter-toggle {
       grid-row: 1;
       padding: 0.4rem;
   }
-  /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
-  .mat-chip-list {
+  .mat-mdc-chip-listbox,
+  .mat-mdc-chip-grid {
       padding: 0.4rem;
   }
 

src/app/pages/circular-heatmap/circular-heatmap.component.html

@@ -38,9 +38,8 @@ <h2>Nothing to show</h2>
               <mat-label>Team Group Filter</mat-label>
               <mat-chip-listbox selectable>
                 <mat-chip-option
-                  #chip="matChip"
                   *ngFor="let group of filtersTeamGroups | keyvalue : unsorted"
-                  (click)="toggleTeamGroupFilter(chip)"
+                  (selectionChange)="toggleTeamGroupFilter($event)"
                   [selected]="filtersTeamGroups[group.key]">
                   {{ group.key }}
                 </mat-chip-option>
@@ -50,9 +49,8 @@ <h2>Nothing to show</h2>
               <mat-label>Team Filter</mat-label>
               <mat-chip-listbox selectable multiple>
                 <mat-chip-option
-                  #chip="matChip"
                   *ngFor="let team of filtersTeams | keyvalue"
-                  (click)="toggleTeamFilter(chip)"
+                  (selectionChange)="toggleTeamFilter($event)"
                   [value]="team.key"
                   [selected]="team.value">
                   {{ team.key }}

src/app/pages/circular-heatmap/circular-heatmap.component.ts

@@ -4,7 +4,7 @@ import { LoaderService } from 'src/app/service/loader/data-loader.service';
 import * as d3 from 'd3';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
-import { MatChip } from '@angular/material/chips';
+import { MatChipOption, MatChipSelectionChange } from '@angular/material/chips';
 import { Subject } from 'rxjs';
 import { takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import * as md from 'markdown-it';
@@ -218,7 +218,8 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
     return filters;
   }
 
-  toggleTeamGroupFilter(chip: MatChip) {
+  toggleTeamGroupFilter(event: MatChipSelectionChange) {
+    let chip = event.source;
     let teamGroup = chip.value.trim();
     if (!chip.selected) {
       chip.toggleSelected();
@@ -240,7 +241,8 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
     }
   }
 
-  toggleTeamFilter(chip: MatChip) {
+  toggleTeamFilter(event: MatChipSelectionChange) {
+    let chip = event.source;
     chip.toggleSelected();
     this.filtersTeams[chip.value.trim()] = chip.selected;
     console.log(`${perfNow()}: Heat: Chip flip Team '${chip.value}: ${chip.selected}`);

src/app/pages/mapping/mapping.component.css

@@ -37,9 +37,8 @@
   font-weight: 500;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-.content ::ng-deep .mat-form-field-wrapper {
-  padding-bottom: 0;
+.content ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+  display: none;
 }
 
 .hide{

src/app/pages/mapping/mapping.component.html

@@ -6,7 +6,6 @@
       <mat-chip-grid #chipList aria-label="Search terms">
         <mat-chip-row
           *ngFor="let term of searchTerms"
-          [selectable]="false"
           [removable]="true"
           (removed)="removeSearchTerm(term)">
           {{ term }}

src/app/pages/matrix/matrix.component.html

@@ -4,9 +4,8 @@
     <mat-label>Dimension Filter</mat-label>
     <mat-chip-listbox #chipList selectable multiple>
       <mat-chip-option
-        #c="matChip"
         *ngFor="let dim of filtersDim | keyvalue"
-        (click)="toggleDimensionFilters(c)"
+        (selectionChange)="toggleDimensionFilters($event)"
         [value]="dim.key"
         [selected]="dim.value">
         {{ dim.key }}
@@ -17,9 +16,8 @@
     <mat-label>Activity Tag Filter</mat-label>
     <mat-chip-listbox selectable multiple>
       <mat-chip-option
-        #c="matChip"
         *ngFor="let tag of filtersTag | keyvalue"
-        (click)="toggleTagFilters(c)"
+        (selectionChange)="toggleTagFilters($event)"
         [value]="tag.key"
         [selected]="tag.value">
         {{ tag.key }}