mdc migration

arnavbhate · arnavbhate · commit 5e3d78260e62 · 2025-03-29T22:18:56.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -9,7 +9,7 @@ import {
 import { DataService } from './data.service';
 import { Router, NavigationEnd } from '@angular/router';
 import { Helpers } from './helpers';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { SwUpdate, SwPush } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { INotification } from './interfaces';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -9,7 +9,7 @@ import { FormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
 import { RouteReuseStrategy } from "@angular/router";
 import { LayoutModule } from "@angular/cdk/layout";
-import { MatLegacyTabsModule as MatTabsModule } from "@angular/material/legacy-tabs";
+import { MatTabsModule } from "@angular/material/tabs";
 
 // Basic app imports
 import { AppComponent } from "./app.component";
diff --git a/src/app/card/body-card/body-card.component.css b/src/app/card/body-card/body-card.component.css
@@ -1,3 +1,5 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card {
     background-color: transparent;
 }
diff --git a/src/app/card/communitypost-card/communitypost-card.component.ts b/src/app/card/communitypost-card/communitypost-card.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { API } from '../../../api';
 import { environment } from '../../../environments/environment';
diff --git a/src/app/card/event-card/event-card.component.css b/src/app/card/event-card/event-card.component.css
@@ -1,3 +1,5 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card {
     background-color: transparent;
 }
diff --git a/src/app/card/interest-card/interest-card.component.css b/src/app/card/interest-card/interest-card.component.css
@@ -1,3 +1,5 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card {
     background-color: transparent;
 }
diff --git a/src/app/card/interest-card/interest-card.component.ts b/src/app/card/interest-card/interest-card.component.ts
@@ -3,7 +3,7 @@ import { IInterest } from '../../interfaces';
 import { DataService } from '../../data.service';
 import { UserDetailsComponent } from '../../page/user-details/user-details.component';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-interest-card',
diff --git a/src/app/card/post-card/post-card.component.css b/src/app/card/post-card/post-card.component.css
@@ -1,3 +1,5 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card {
     background-color: transparent;
 }
diff --git a/src/app/card/user-card/user-card.component.css b/src/app/card/user-card/user-card.component.css
@@ -1,3 +1,5 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card {
     background-color: transparent;
 }
diff --git a/src/app/comp/update-role/update-role.component.ts b/src/app/comp/update-role/update-role.component.ts
@@ -3,7 +3,7 @@ import { IBodyRole, IUserProfile } from '../../interfaces';
 import { DataService } from '../../data.service';
 import { API } from '../../../api';
 import { Observable } from 'rxjs';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-update-role',
diff --git a/src/app/page/achievements/achievement-new/achievement-new.component.ts b/src/app/page/achievements/achievement-new/achievement-new.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { DataService } from '../../../data.service';
 import { IAchievement, IBody, IEvent, IOfferedAchievement, IUserProfile } from '../../../interfaces';
 import { API } from '../../../../api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { Helpers } from '../../../helpers';
 import { Parser } from 'json2csv';
diff --git a/src/app/page/achievements/achievement-request/achievement-request.component.html b/src/app/page/achievements/achievement-request/achievement-request.component.html
@@ -1,4 +1,4 @@
-<mat-card class="mat-elevation-z0">
+<mat-card appearance="outlined" class="mat-elevation-z0">
   <mat-card-header>
     <img mat-card-avatar [src]="getImage()">
     <mat-card-title>{{ achievement.title }}</mat-card-title>
diff --git a/src/app/page/achievements/achievement-request/achievement-request.component.ts b/src/app/page/achievements/achievement-request/achievement-request.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { IAchievement } from '../../../interfaces';
 import { DataService } from '../../../data.service';
 import { API } from '../../../../api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
-import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'app-achievement-request',
diff --git a/src/app/page/achievements/skills-new/skills-new.component.ts b/src/app/page/achievements/skills-new/skills-new.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { DataService } from '../../../data.service';
 import { IAchievement, IBody } from '../../../interfaces';
 import { API } from '../../../../api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
diff --git a/src/app/page/add-event/add-event.component.ts b/src/app/page/add-event/add-event.component.ts
@@ -14,7 +14,7 @@ import * as Fuse from 'fuse.js';
 import { Helpers } from '../../helpers';
 import { Observable } from 'rxjs';
 import { API } from '../../../api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { UntypedFormControl } from '@angular/forms';
 import { map } from 'rxjs/operators';
 
diff --git a/src/app/page/alumni-login/alumni-login.component.ts b/src/app/page/alumni-login/alumni-login.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { DataService } from '../../data.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { UntypedFormBuilder } from '@angular/forms';
 export const TITLE = 'Alumni Login';
 
diff --git a/src/app/page/alumni-otp/alumni-otp.component.ts b/src/app/page/alumni-otp/alumni-otp.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { DataService } from '../../data.service';
 import { UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 export const TITLE = 'Alumni OTP';
 
 @Component({
diff --git a/src/app/page/calendar/calendar.component.html b/src/app/page/calendar/calendar.component.html
@@ -25,11 +25,11 @@
                     primaryColor="#536dfe">
         </xunk-calendar>
 
-        <mat-chip-list class="mat-chip-list-stacked">
-            <mat-chip color="accent" selected="true" id="head-chip">
+        <mat-chip-listbox class="mat-chip-list-stacked">
+            <mat-chip-option color="accent" selected="true" id="head-chip">
                 <div>{{ GetCount(selDate) }}</div>
-            </mat-chip>
-        </mat-chip-list>
+            </mat-chip-option>
+        </mat-chip-listbox>
 
         <br>
 
diff --git a/src/app/page/discussions/add-post/add-post.component.ts b/src/app/page/discussions/add-post/add-post.component.ts
@@ -14,8 +14,8 @@ import {
   IEvent,
   ICommunity,
 } from '../../../interfaces';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { API } from '../../../../api';
 import { ILocation } from 'instimapline';
diff --git a/src/app/page/discussions/group-feed/group-feed.component.ts b/src/app/page/discussions/group-feed/group-feed.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { API } from '../../../../api';
 import { DataService } from '../../../data.service';
 import { ICommunity, ICommunityPost } from '../../../interfaces';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { AddPostComponent } from '../add-post/add-post.component';
 import { ActivatedRoute, Params } from '@angular/router';
 
diff --git a/src/app/page/explore/explore.component.ts b/src/app/page/explore/explore.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { DataService } from '../../data.service';
 import { IBody, IEvent, IUserProfile } from '../../interfaces';
 import { API } from '../../../api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 const TITLE = 'Explore';
 
diff --git a/src/app/page/feed/feed.component.html b/src/app/page/feed/feed.component.html
@@ -10,7 +10,7 @@
                 *ngIf="c.title !== ''">
                 {{ c.title }}
             </div>
-            <mat-card *ngIf="!nobig"
+            <mat-card appearance="outlined" *ngIf="!nobig"
                        mat-ripple
                        class="sub-card head-card"
                       (click)=OpenEvent(c.events[0])>
diff --git a/src/app/page/map/map.component.ts b/src/app/page/map/map.component.ts
@@ -6,8 +6,8 @@ import {
   OnInit,
   OnDestroy,
 } from '@angular/core';
-import { MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Location } from '@angular/common';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { UntypedFormControl } from '@angular/forms';
diff --git a/src/app/page/query-search/query-new/query-new.component.html b/src/app/page/query-search/query-new/query-new.component.html
@@ -1,5 +1,5 @@
 <div>
-  <mat-card>
+  <mat-card appearance="outlined">
     <mat-card-title>Couldn't find what you're looking for ?</mat-card-title>
     <mat-divider></mat-divider>
     <mat-card-content>
diff --git a/src/app/page/query-search/query-new/query-new.component.ts b/src/app/page/query-search/query-new/query-new.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { API } from '../../../../api';
 import { DataService } from '../../../data.service';
 
diff --git a/src/app/page/query-search/query-search.component.ts b/src/app/page/query-search/query-search.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { API } from '../../../api';
 import { DataService } from '../../data.service';
 import { UntypedFormControl } from '@angular/forms';
-import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
+import { MatSelect } from '@angular/material/select';
 
 @Component({
   selector: 'app-query-search',
diff --git a/src/app/page/settings/settings.component.ts b/src/app/page/settings/settings.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { DataService } from '../../data.service';
 import { IUserProfile } from '../../interfaces';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { API } from '../../../api';
-import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'app-settings',
diff --git a/src/app/page/update-body/update-body.component.ts b/src/app/page/update-body/update-body.component.ts
@@ -3,7 +3,7 @@ import { IBody, IBodyRole } from '../../interfaces';
 import { DataService } from '../../data.service';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { API } from '../../../api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-update-body',
diff --git a/src/app/page/user-details/user-details.component.ts b/src/app/page/user-details/user-details.component.ts
@@ -3,7 +3,7 @@ import { IUserProfile, IEvent, IInterest } from '../../interfaces';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DataService } from '../../data.service';
 import { API } from '../../../api';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-user-details',
diff --git a/src/styles.css b/src/styles.css
@@ -179,7 +179,7 @@ mat-form-field, mat-form-field *, .markdown *, input {
 .rl-header.xs { font-size: 1.4em; }
 
 /* For Create-Post & Close-popup Dialogbox  */
-.custom-container .mat-dialog-container {
+.custom-container .mat-mdc-dialog-container {
     border-radius: 20px !important;
  }
 
diff --git a/src/theme.scss b/src/theme.scss
@@ -6,9 +6,9 @@
 //  If you specify typography styles for the components you use elsewhere, you should delete this line.
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
+@include mat.core();
 
 /* For use in src/lib/core/theming/_palette.scss */
 $md-cprimary: (
@@ -126,4 +126,4 @@ $theme: (
 );
 
 // Establish theme
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+`
	`2`	`+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */`
`1`	`3`	`mat-card {`
`2`	`4`	`background-color: transparent;`
`3`	`5`	`}`