Merge branch 'feature/angular-v15'

.eslintrc.js

@@ -12,6 +12,9 @@ module.exports = {
                 'plugin:@angular-eslint/recommended',
                 'plugin:prettier/recommended',
             ],
+            parserOptions: {
+                project: 'tsconfig.json',
+            },
             rules: {
                 '@angular-eslint/component-selector': [
                     'error',

angular.json

@@ -227,5 +227,13 @@
     },
     "cli": {
         "analytics": false
+    },
+    "schematics": {
+        "@angular-eslint/schematics:application": {
+            "setParserOptionsProject": true
+        },
+        "@angular-eslint/schematics:library": {
+            "setParserOptionsProject": true
+        }
     }
 }

package.json

@@ -23,48 +23,48 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^14.2.1",
-        "@angular/cdk": "^14.2.1",
-        "@angular/common": "^14.2.1",
-        "@angular/compiler": "^14.2.1",
-        "@angular/core": "^14.2.1",
-        "@angular/forms": "^14.2.1",
-        "@angular/material": "^14.2.1",
-        "@angular/platform-browser": "^14.2.1",
-        "@angular/platform-browser-dynamic": "^14.2.1",
-        "@angular/router": "^14.2.1",
-        "@angular/service-worker": "^14.2.1",
+        "@angular/animations": "^15.1.0",
+        "@angular/cdk": "^15.1.0",
+        "@angular/common": "^15.1.0",
+        "@angular/compiler": "^15.1.0",
+        "@angular/core": "^15.1.0",
+        "@angular/forms": "^15.1.0",
+        "@angular/material": "^15.1.0",
+        "@angular/platform-browser": "^15.1.0",
+        "@angular/platform-browser-dynamic": "^15.1.0",
+        "@angular/router": "^15.1.0",
+        "@angular/service-worker": "^15.1.0",
         "@material/fab": "^14.0.0",
         "material-design-icons": "^3.0.1",
         "rxjs": "^7.5.6",
         "tslib": "^2.1.0",
         "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular-builders/custom-webpack": "14.0.1",
-        "@angular-devkit/architect": "^0.1402.2",
-        "@angular-devkit/build-angular": "^14.2.2",
-        "@angular-eslint/builder": "14.0.4",
-        "@angular-eslint/eslint-plugin": "14.0.4",
-        "@angular-eslint/eslint-plugin-template": "14.0.4",
-        "@angular-eslint/schematics": "14.0.4",
-        "@angular-eslint/template-parser": "14.0.4",
-        "@angular/cli": "^14.2.2",
-        "@angular/compiler-cli": "^14.2.1",
-        "@angular/language-service": "^14.2.1",
-        "@angular/localize": "^14.2.1",
+        "@angular-builders/custom-webpack": "^15.0.0-beta.0",
+        "@angular-devkit/architect": "^0.1501.1",
+        "@angular-devkit/build-angular": "^15.1.1",
+        "@angular-eslint/builder": "15.2.0",
+        "@angular-eslint/eslint-plugin": "15.2.0",
+        "@angular-eslint/eslint-plugin-template": "15.2.0",
+        "@angular-eslint/schematics": "15.2.0",
+        "@angular-eslint/template-parser": "15.2.0",
+        "@angular/cli": "^15.1.1",
+        "@angular/compiler-cli": "^15.1.0",
+        "@angular/language-service": "^15.1.0",
+        "@angular/localize": "^15.1.0",
         "@commitlint/cli": "^17.1.2",
         "@commitlint/config-conventional": "^17.1.0",
         "@types/chance": "^1.1.1",
         "@types/jasmine": "^4.3.0",
         "@types/node": "^16.11.58",
-        "@typescript-eslint/eslint-plugin": "^5.36.2",
-        "@typescript-eslint/parser": "^5.36.2",
+        "@typescript-eslint/eslint-plugin": "^5.43.0",
+        "@typescript-eslint/parser": "^5.43.0",
         "chance": "^1.1.7",
         "commitizen": "^4.2.5",
         "conventional-changelog-cli": "^2.2.2",
         "cz-conventional-changelog": "3.3.0",
-        "eslint": "^8.23.0",
+        "eslint": "^8.28.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsdoc": "^39.3.6",
@@ -88,13 +88,13 @@
         "karma-jasmine": "^5.1.0",
         "karma-jasmine-html-reporter": "^2.0.0",
         "lint-staged": "^13.0.3",
-        "markdownlint-cli": "^0.32.2",
+        "markdownlint-cli": "^0.33.0",
         "prettier": "^2.7.1",
         "stylelint": "^14.11.0",
         "stylelint-config-prettier": "^9.0.3",
         "stylelint-config-sass-guidelines": "^9.0.1",
         "stylelint-prettier": "^2.0.0",
         "ts-node": "^10.9.1",
-        "typescript": "4.6.4"
+        "typescript": "4.8.4"
     }
 }

src/app/app.module.ts

@@ -9,18 +9,18 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatStepperModule } from '@angular/material/stepper';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
 import { AppBarComponent } from './components/app-bar/app-bar.component';
 import { ConfigurationComponent } from './components/configuration/configuration.component';
 import { CardComponent } from './components/card/card.component';

src/app/components/app-bar/app-bar.component.spec.ts

@@ -1,7 +1,11 @@
 import { detectChangesAndFlush } from 'src/testing/utilities';
 import { cold } from 'jasmine-marbles';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import { MatButton, MatButtonModule, MatAnchor } from '@angular/material/button';
+import {
+    MatLegacyButton as MatButton,
+    MatLegacyButtonModule as MatButtonModule,
+    MatLegacyAnchor as MatAnchor,
+} from '@angular/material/legacy-button';
 import { DataFixture } from './../../../testing/data-fixture';
 import { MatToolbar, MatToolbarModule } from '@angular/material/toolbar';
 import { SpyObj } from './../../../testing/spy-obj';

src/app/components/card/card.component.spec.ts

@@ -2,12 +2,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CardComponent } from './card.component';
 import {
-    MatCardModule,
-    MatCardAvatar,
-    MatCardTitle,
-    MatCardSubtitle,
-    MatCard,
-} from '@angular/material/card';
+    MatLegacyCardModule as MatCardModule,
+    MatLegacyCardAvatar as MatCardAvatar,
+    MatLegacyCardTitle as MatCardTitle,
+    MatLegacyCardSubtitle as MatCardSubtitle,
+    MatLegacyCard as MatCard,
+} from '@angular/material/legacy-card';
 import { MatIconModule } from '@angular/material/icon';
 import { DataFixture } from 'src/testing/data-fixture';
 import { environment } from 'src/environments/environment';

src/app/components/configuration/configuration.component.spec.ts

@@ -29,7 +29,7 @@ import {
     StepperOrientation,
 } from '@angular/material/stepper/testing';
 import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { Card } from 'src/app/models/card';
 
 describe('ConfigurationComponent', () => {

src/app/components/expansion-select/expansion-select.component.spec.ts

@@ -13,8 +13,11 @@ import { Expansion } from '../../models/expansion';
 import { DataFixture } from 'src/testing/data-fixture';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
-import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxHarness as MatCheckboxHarness } from '@angular/material/legacy-checkbox/testing';
+import {
+    MatLegacyCheckbox as MatCheckbox,
+    MatLegacyCheckboxModule as MatCheckboxModule,
+} from '@angular/material/legacy-checkbox';
 import { By } from '@angular/platform-browser';
 import { Chance } from 'chance';
 

src/app/components/footer/footer.component.spec.ts

@@ -1,4 +1,4 @@
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { LanguageMenuStubComponent } from './../../../testing/components/language-menu.stub.component';
 import { FooterComponent } from './footer.component';
 import { waitForAsync, TestBed, ComponentFixture } from '@angular/core/testing';

src/app/components/language-menu/language-menu.component.spec.ts

@@ -1,11 +1,14 @@
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
 import { Language } from './../../models/language';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LanguageMenuComponent } from './language-menu.component';
-import { MatMenuHarness, MatMenuItemHarness } from '@angular/material/menu/testing';
+import {
+    MatLegacyMenuHarness as MatMenuHarness,
+    MatLegacyMenuItemHarness as MatMenuItemHarness,
+} from '@angular/material/legacy-menu/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { getTestScheduler } from 'jasmine-marbles';
 import { LanguageMenuHostComponent } from 'src/testing/components/language-menu.host.component';

src/app/components/language-menu/language-menu.component.ts

@@ -1,6 +1,6 @@
 import { Language } from './../../models/language';
 import { Component, ViewChild } from '@angular/core';
-import { MatMenu } from '@angular/material/menu';
+import { MatLegacyMenu as MatMenu } from '@angular/material/legacy-menu';
 
 @Component({
     selector: 'app-language-menu',

src/app/components/set-ordering-menu/set-ordering-menu.component.spec.ts

@@ -2,10 +2,13 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { GroupingOption, SetService, SortingOption } from 'src/app/services/set.service';
 import { SpyObj } from 'src/testing/spy-obj';
-import { MatMenuHarness, MatMenuItemHarness } from '@angular/material/menu/testing';
+import {
+    MatLegacyMenuHarness as MatMenuHarness,
+    MatLegacyMenuItemHarness as MatMenuItemHarness,
+} from '@angular/material/legacy-menu/testing';
 import { MatIconHarness } from '@angular/material/icon/testing';
 
 import { SetOrderingMenuComponent } from './set-ordering-menu.component';

src/app/components/set-ordering-menu/set-ordering-menu.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { MatMenu } from '@angular/material/menu';
+import { MatLegacyMenu as MatMenu } from '@angular/material/legacy-menu';
 import { GroupingOption, SetService, SortingOption } from 'src/app/services/set.service';
 
 @Component({

src/app/components/set/set.component.spec.ts

@@ -6,7 +6,7 @@ import { AppBarService } from '../../services/app-bar.service';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SetComponent } from './set.component';
-import { MatMenu } from '@angular/material/menu';
+import { MatLegacyMenu as MatMenu } from '@angular/material/legacy-menu';
 import { cold } from 'jasmine-marbles';
 import { DataFixture } from 'src/testing/data-fixture';
 import { MatAccordion, MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion';

src/app/components/special-card-select/special-card-select.component.spec.ts

@@ -4,10 +4,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { UntypedFormBuilder, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import { SpecialCardsAvailability } from 'src/app/models/special-cards-availability';
 import { ConfigurationService } from 'src/app/services/configuration.service';
-import { MatSliderHarness } from '@angular/material/slider/testing';
+import { MatLegacySliderHarness as MatSliderHarness } from '@angular/material/legacy-slider/testing';
 
 import { SpecialCardSelectComponent } from './special-card-select.component';
-import { MatSliderModule } from '@angular/material/slider';
+import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
 import { By } from '@angular/platform-browser';
 import { DataFixture } from 'src/testing/data-fixture';
 

src/app/models/app-bar-configuration.ts

@@ -1,4 +1,4 @@
-import { MatMenu } from '@angular/material/menu';
+import { MatLegacyMenu as MatMenu } from '@angular/material/legacy-menu';
 
 export type NavigationAction = 'back' | 'sidenav' | 'none';
 

src/scss/_material-theme.scss

@@ -1,6 +1,15 @@
 @use '@angular/material' as mat;
 @use './variables';
 
-@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();
 
-@include mat.all-component-themes(variables.$theme);
+@include mat.all-legacy-component-themes(variables.$theme);

src/test.ts

@@ -7,12 +7,5 @@ import {
     platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

src/testing/components/language-menu.stub.component.ts

@@ -1,6 +1,6 @@
 import { LanguageMenuComponent } from './../../app/components/language-menu/language-menu.component';
 import { Component } from '@angular/core';
-import { MatMenu } from '@angular/material/menu';
+import { MatLegacyMenu as MatMenu } from '@angular/material/legacy-menu';
 
 @Component({
     selector: 'app-language-menu',

src/testing/components/set-ordering-menu.stub.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatMenu } from '@angular/material/menu';
+import { MatLegacyMenu as MatMenu } from '@angular/material/legacy-menu';
 import { SetOrderingMenuComponent } from 'src/app/components/set-ordering-menu/set-ordering-menu.component';
 
 @Component({

tsconfig.json

@@ -10,10 +10,11 @@
         "module": "es2020",
         "moduleResolution": "node",
         "importHelpers": true,
-        "target": "es2020",
+        "target": "ES2022",
         "lib": ["es2018", "dom"],
         "strict": true,
-        "forceConsistentCasingInFileNames": true
+        "forceConsistentCasingInFileNames": true,
+        "useDefineForClassFields": false
     },
     "angularCompilerOptions": {
         "strictTemplates": true,