build: update cross-repo dependencies to latest stable version (#48216)

With this change we update the cross-repo dependencies to the latest stable version

PR Close #48216

aio/package.json

@@ -61,33 +61,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.0.0",
-    "@angular/cdk": "^14.2.4",
-    "@angular/common": "15.0.0",
-    "@angular/compiler": "15.0.0",
-    "@angular/core": "15.0.0",
-    "@angular/elements": "15.0.0",
-    "@angular/forms": "15.0.0",
-    "@angular/material": "^14.2.4",
-    "@angular/platform-browser": "15.0.0",
-    "@angular/platform-browser-dynamic": "15.0.0",
-    "@angular/router": "15.0.0",
-    "@angular/service-worker": "15.0.0",
+    "@angular/animations": "15.0.1",
+    "@angular/cdk": "15.0.0",
+    "@angular/common": "15.0.1",
+    "@angular/compiler": "15.0.1",
+    "@angular/core": "15.0.1",
+    "@angular/elements": "15.0.1",
+    "@angular/forms": "15.0.1",
+    "@angular/material": "15.0.0",
+    "@angular/platform-browser": "15.0.1",
+    "@angular/platform-browser-dynamic": "15.0.1",
+    "@angular/router": "15.0.1",
+    "@angular/service-worker": "15.0.1",
     "rxjs": "~7.5.0",
     "safevalues": "^0.4.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/architect-cli": "0.1500.0-rc.0",
-    "@angular-devkit/build-angular": "15.0.0",
+    "@angular-devkit/architect-cli": "0.1500.1",
+    "@angular-devkit/build-angular": "15.0.1",
     "@angular-eslint/builder": "^14.0.0",
     "@angular-eslint/eslint-plugin": "^14.0.0",
     "@angular-eslint/eslint-plugin-template": "^14.0.0",
     "@angular-eslint/template-parser": "^14.0.0",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#90004d8813b2da5264a8e9b0e2b3a0d88f44a4ad",
-    "@angular/cli": "15.0.0",
-    "@angular/compiler-cli": "15.0.0",
+    "@angular/cli": "15.0.1",
+    "@angular/compiler-cli": "15.0.1",
     "@bazel/bazelisk": "^1.7.5",
     "@bazel/buildozer": "^5.1.0",
     "@bazel/ibazel": "^0.16.2",

aio/src/app/app.component.spec.ts

@@ -2,7 +2,7 @@ import { APP_BASE_HREF } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, fakeAsync, flushMicrotasks, inject, TestBed, tick } from '@angular/core/testing';
-import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatLegacyProgressBar as MatProgressBar } from '@angular/material/legacy-progress-bar';
 import { MatSidenav } from '@angular/material/sidenav';
 import { By, Title } from '@angular/platform-browser';
 import { ElementsLoader } from 'app/custom-elements/elements-loader';

aio/src/app/app.module.ts

@@ -6,9 +6,9 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconRegistry } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 

aio/src/app/custom-elements/code/code-tabs.module.ts

@@ -1,8 +1,8 @@
 import { NgModule, Type } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CodeTabsComponent } from './code-tabs.component';
-import { MatCardModule } from '@angular/material/card';
-import { MatTabsModule } from '@angular/material/tabs';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { CodeModule } from './code.module';
 import { WithCustomElementComponent } from '../element-registry';
 

aio/src/app/custom-elements/code/code.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild, AfterViewInit } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Clipboard } from '@angular/cdk/clipboard';

aio/src/app/custom-elements/code/code.component.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChil
 import { Clipboard } from '@angular/cdk/clipboard';
 import { Logger } from 'app/shared/logger.service';
 import { PrettyPrinter } from './pretty-printer.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { Observable, of } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { unwrapHtml } from 'safevalues';

aio/src/app/custom-elements/code/code.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CodeComponent } from './code.component';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { PrettyPrinter } from './pretty-printer.service';
 
 @NgModule({

aio/src/styles/custom-themes/dark-theme.scss

@@ -6,5 +6,5 @@ $ng-io-accent: mat.define-palette(mat.$red-palette, 700, 600, 800);
 $ng-io-warn: mat.define-palette(mat.$red-palette);
 $ng-io-theme: mat.define-dark-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
-@include mat.all-component-themes($ng-io-theme);
+@include mat.all-legacy-component-themes($ng-io-theme);
 @include app-theme.theme($ng-io-theme);

aio/src/styles/custom-themes/light-theme.scss

@@ -6,5 +6,5 @@ $ng-io-accent: mat.define-palette(mat.$red-palette, 700, 600, 800);
 $ng-io-warn: mat.define-palette(mat.$red-palette);
 $ng-io-theme: mat.define-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
-@include mat.all-component-themes($ng-io-theme);
+@include mat.all-legacy-component-themes($ng-io-theme);
 @include app-theme.theme($ng-io-theme);

aio/src/styles/main.scss

@@ -10,4 +10,13 @@
 
 // Include the base styles for Angular Material core. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
-@include mat.core();
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  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();