Update material mdc migration typography (#2537)

* ng update @angular/material@16

* update-material-mdc-migration-typography

* update-material-mdc-migration-typography

---------

Co-authored-by: Angel Montenegro <a.montenegro@orcid.org>

Author: cryptalith

package.json

@@ -34,19 +34,18 @@
     "lighthouse": "ts-node -P scripts/tsconfig.json scripts/lighthouse/main.ts",
     "build:browserslist": "ts-node -P scripts/tsconfig.json scripts/browserlist.prebuild.ts",
     "build:fetchCombineWordpressCss": "ts-node -P scripts/tsconfig.json scripts/fetch-combine-wordpress-css.prebuild"
-
   },
   "private": true,
   "dependencies": {
     "@angular-devkit/core": "^16.2.6",
     "@angular/animations": "^16.2.8",
-    "@angular/cdk": "^16.2.8",
+    "@angular/cdk": "^16.2.14",
     "@angular/common": "^16.2.8",
     "@angular/compiler": "^16.2.8",
     "@angular/core": "^16.2.8",
     "@angular/forms": "^16.2.8",
     "@angular/localize": "^16.2.8",
-    "@angular/material": "^16.2.8",
+    "@angular/material": "^16.2.14",
     "@angular/platform-browser": "^16.2.8",
     "@angular/platform-browser-dynamic": "^16.2.8",
     "@angular/router": "^16.2.8",
@@ -127,4 +126,4 @@
     "tslint-config-prettier": "^1.18.0",
     "typescript": "~5.1.6"
   }
-}
+}

src/app/account-settings/pages/account-settings/account-settings.component.scss

@@ -4,7 +4,7 @@
   width: 100%;
 }
 
-.mat-headline {
+.mat-headline-5 {
   margin-bottom: $spacing-large;
 }
 main#main {

src/app/account-trusted-parties/pages/account-trusted-parties/account-trusted-parties.component.scss

@@ -4,7 +4,7 @@
   width: 100%;
 }
 
-.mat-headline {
+.mat-headline-5 {
   margin-bottom: $spacing-large;
 }
 main#main {

src/app/authorize/components/form-authorize/form-authorize.component.html

@@ -36,7 +36,7 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
       <div class="col l9 user-wrapper">
         <div class="row">
           <div class="m-b-8">
-            <div class="mat-body-2">
+            <div class="mat-subtitle-2">
               <strong id="user-name">{{ userName }}</strong>
             </div>
             <span>{{ orcidUrl }}</span>
@@ -68,13 +68,13 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
     ></app-info-drop-down>
 
     <p
-      class="mat-body-1 m-t-16 m-b-16"
+      class="mat-body-2 m-t-16 m-b-16"
       i18n="@@authorize.organizationAskedFollowingAccess"
     >
       This organization has asked for the following access to your ORCID record:
     </p>
 
-    <ul class="mat-body-1 m-t-base">
+    <ul class="mat-body-2 m-t-base">
       <ng-container
         *ngFor="let scope of this.oauthRequest.scopes; let last = last"
       >

src/app/authorize/components/oauth-error/oauth-error.component.html

@@ -130,7 +130,7 @@
     </div>
   </mat-card-content>
 
-  <p class="mat-body-1 mat-caption">
+  <p class="mat-body-2 mat-caption">
     {{ error }} /
     {{ errorDescription }}
   </p>

src/app/cdk/banner/banner.component.html

@@ -1,4 +1,4 @@
-<section class="alert alert-banner mat-body-1" [attr.aria-label]="ariaLabel">
+<section class="alert alert-banner mat-body-2" [attr.aria-label]="ariaLabel">
   <p><ng-content></ng-content></p>
   <button
     *ngIf="canDismiss"

src/app/cdk/banner/banner.component.scss

@@ -16,7 +16,7 @@ button {
   flex-shrink: 0;
 }
 
-.mat-body-1 p {
+.mat-body-2 p {
   margin: 0;
 }
 .columns-12 :host {

src/app/cdk/is-this-you/is-this-you.component.html

@@ -1,7 +1,7 @@
 <div class="container" *ngIf="data && data.duplicateRecords">
-  <h1 class="mat-display-1 modal-title">{{ data.titleLabel || titleLabel }}</h1>
+  <h1 class="mat-headline-4 modal-title">{{ data.titleLabel || titleLabel }}</h1>
   <div class="non-fixed">
-    <p class="mat-body-1">
+    <p class="mat-body-2">
       {{ data.bodyLabel || bodyLabel }}
       <a
         rel="noopener noreferrer"
@@ -12,7 +12,7 @@ <h1 class="mat-display-1 modal-title">{{ data.titleLabel || titleLabel }}</h1>
       </a>
     </p>
 
-    <table class="mat-subheading-2">
+    <table class="mat-subtitle-1">
       <tr>
         <th>{{ data.firstNameLabel || firstNameLabel }}</th>
         <th>{{ data.lastNameLabel || lastNameLabel }}</th>

src/app/cdk/panel/panel-data-line/panel-data-line.component.html

@@ -19,18 +19,18 @@
   <span>{{ title }}</span>
   <ng-container *ngIf="detail">&#x200E;({{ detail }})&#x200E;</ng-container>
   <p
-    class="mat-body-1"
+    class="mat-body-2"
     *ngIf="!url && copyOnClick"
     appCopyOnClick
     matTooltip="Click to Copy"
     [matTooltipPosition]="'above'"
   >
     {{ content }}
   </p>
-  <p class="mat-body-1" *ngIf="!url && !copyOnClick">{{ content }}</p>
+  <p class="mat-body-2" *ngIf="!url && !copyOnClick">{{ content }}</p>
 
   <a
-    class="underline mat-body-1"
+    class="underline mat-body-2"
     href="{{ url }}"
     target="_blank"
     rel="noopener noreferrer"

src/app/cdk/platform-info/browserlist.regexp.ts

@@ -1,3 +1,2 @@
 // tslint:disable-next-line: max-line-length
-export const BROWSERLIST_REGEXP =
-  /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
+export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/