ftr: update angular material to v15

fbedarf · fbedarf · commit c2666c0d7ecd · 2023-02-17T14:04:32.000+01:00
TRACEFOSS-1023
diff --git a/package.json b/package.json
@@ -35,12 +35,12 @@
   "dependencies": {
     "@angular-material-components/datetime-picker": "7.0.1",
     "@angular/animations": "15.1.5",
-    "@angular/cdk": "14.2.7",
+    "@angular/cdk": "15.1.4",
     "@angular/common": "15.1.5",
     "@angular/compiler": "15.1.5",
     "@angular/core": "15.1.5",
     "@angular/forms": "15.1.5",
-    "@angular/material": "14.2.7",
+    "@angular/material": "15.1.4",
     "@angular/platform-browser": "15.1.5",
     "@angular/platform-browser-dynamic": "15.1.5",
     "@angular/router": "15.1.5",
@@ -67,13 +67,13 @@
     "zone.js": "0.11.8"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "13.1.0",
+    "@angular-builders/custom-webpack": "15.0.0",
     "@angular-devkit/build-angular": "15.1.6",
     "@angular-eslint/builder": "15.1.0",
     "@angular-eslint/eslint-plugin": "15.2.0",
-    "@angular-eslint/eslint-plugin-template": "13.2.1",
-    "@angular-eslint/schematics": "13.5.0",
-    "@angular-eslint/template-parser": "13.2.1",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
     "@angular/cli": "15.1.6",
     "@angular/compiler-cli": "15.1.5",
     "@angular/language-service": "15.1.5",
@@ -82,7 +82,7 @@
     "@commitlint/cli": "17.4.2",
     "@commitlint/config-conventional": "16.2.4",
     "@cypress/schematic": "2.4.0",
-    "@testing-library/angular": "11.0.4",
+    "@testing-library/angular": "13.1.0",
     "@testing-library/jasmine-dom": "1.2.0",
     "@types/d3": "7.4.0",
     "@types/jasmine": "4.3.1",
diff --git a/src/app/modules/core/layout/sidebar/sidebar-section/sidebar-section.component.html b/src/app/modules/core/layout/sidebar/sidebar-section/sidebar-section.component.html
@@ -20,7 +20,7 @@
 -->
 
 <section [class.active]="this.isActive" class="sidebar-menu-container__item">
-  <mat-icon [tooltip]="this.name" [class.item-active]="this.isActive" appTooltip class="item text-dark">{{
+  <mat-icon [tooltip]="this.name" [class.item-active]="this.isActive" appTooltip class="text-dark">{{
     this.iconName
   }}</mat-icon>
   <p class="regular-text" [class.item-active]="this.isActive" [class.disable]="!this.isExpanded">
diff --git a/src/app/modules/core/layout/sidebar/sidebar-section/sidebar-section.component.scss b/src/app/modules/core/layout/sidebar/sidebar-section/sidebar-section.component.scss
@@ -34,10 +34,6 @@
   @apply text-white bg-primary hover:bg-primaryDark;
 }
 
-.item {
-  margin-right: 0.5rem;
-}
-
 .item-active {
   @apply text-white;
 }
diff --git a/src/app/modules/page/other-parts/presentation/other-parts.component.ts b/src/app/modules/page/other-parts/presentation/other-parts.component.ts
@@ -20,7 +20,7 @@
  ********************************************************************************/
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatTabChangeEvent } from '@angular/material/tabs';
+import { MatLegacyTabChangeEvent as MatTabChangeEvent } from '@angular/material/legacy-tabs';
 import { Pagination } from '@core/model/pagination.model';
 import { OtherPartsFacade } from '@page/other-parts/core/other-parts.facade';
 import { Part } from '@page/parts/model/parts.model';
diff --git a/src/app/modules/shared/components/call-to-action-snackbar/cta-snackbar.component.ts b/src/app/modules/shared/components/call-to-action-snackbar/cta-snackbar.component.ts
@@ -20,7 +20,10 @@
  ********************************************************************************/
 
 import { Component, Inject } from '@angular/core';
-import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
+import {
+  MAT_LEGACY_SNACK_BAR_DATA as MAT_SNACK_BAR_DATA,
+  MatLegacySnackBar as MatSnackBar,
+} from '@angular/material/legacy-snack-bar';
 import { I18nMessage } from '@shared/model/i18n-message';
 import { CallAction, CtaSnackbarData } from './cta-snackbar.model';
 
diff --git a/src/app/modules/shared/components/call-to-action-snackbar/cta-snackbar.service.ts b/src/app/modules/shared/components/call-to-action-snackbar/cta-snackbar.service.ts
@@ -20,7 +20,7 @@
  ********************************************************************************/
 
 import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { I18nMessage } from '@shared/model/i18n-message';
 import { CtaSnackbarComponent } from './cta-snackbar.component';
 import { CallAction, CtaSnackbarData } from './cta-snackbar.model';
diff --git a/src/app/modules/shared/components/card-icon/card-icon.component.spec.ts b/src/app/modules/shared/components/card-icon/card-icon.component.spec.ts
@@ -19,7 +19,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatIconModule } from '@angular/material/icon';
 import { CardIconComponent } from '@shared/components/card-icon/card-icon.component';
 import { SharedModule } from '@shared/shared.module';
diff --git a/src/app/modules/shared/components/card-list/card-list.component.spec.ts b/src/app/modules/shared/components/card-list/card-list.component.spec.ts
@@ -19,7 +19,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { CardListComponent } from '@shared/components/card-list/card-list.component';
 import { SharedModule } from '@shared/shared.module';
 import { screen } from '@testing-library/angular';
diff --git a/src/app/modules/shared/components/pagination/paginator-intl.service.spec.ts b/src/app/modules/shared/components/pagination/paginator-intl.service.spec.ts
@@ -20,7 +20,7 @@
  ********************************************************************************/
 
 import { TestBed } from '@angular/core/testing';
-import { MatPaginatorIntl } from '@angular/material/paginator';
+import { MatLegacyPaginatorIntl as MatPaginatorIntl } from '@angular/material/legacy-paginator';
 import { SharedModule } from '@shared/shared.module';
 import { renderComponent } from '@tests/test-render.utils';
 import { I18NEXT_SERVICE, ITranslationService } from 'angular-i18next';
diff --git a/src/app/modules/shared/components/pagination/paginator-intl.service.ts b/src/app/modules/shared/components/pagination/paginator-intl.service.ts
@@ -20,7 +20,7 @@
  ********************************************************************************/
 
 import { Inject, Injectable } from '@angular/core';
-import { MatPaginatorIntl } from '@angular/material/paginator';
+import { MatLegacyPaginatorIntl as MatPaginatorIntl } from '@angular/material/legacy-paginator';
 import { I18NEXT_SERVICE, ITranslationService } from 'angular-i18next';
 import { Subject } from 'rxjs';
 
diff --git a/src/app/modules/shared/components/table/table.component.ts b/src/app/modules/shared/components/table/table.component.ts
@@ -21,9 +21,9 @@
 
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator, LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
 import { MatSort, Sort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { Pagination } from '@core/model/pagination.model';
 import { RoleService } from '@core/user/role.service';
 import { MenuActionConfig, TableConfig, TableEventConfig, TableHeaderSort } from '@shared/components/table/table.model';
diff --git a/src/app/modules/shared/directives/tooltip.directive.ts b/src/app/modules/shared/directives/tooltip.directive.ts
@@ -20,7 +20,7 @@
  ********************************************************************************/
 
 import { Directive, HostListener, Input } from '@angular/core';
-import { MatTooltip } from '@angular/material/tooltip';
+import { MatLegacyTooltip as MatTooltip } from '@angular/material/legacy-tooltip';
 
 @Directive({
   selector: '[appTooltip]',
diff --git a/src/app/modules/shared/modules/modal/component/modal.component.spec.ts b/src/app/modules/shared/modules/modal/component/modal.component.spec.ts
@@ -19,7 +19,10 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import { SharedModule } from '@shared/shared.module';
 import { fireEvent, screen, waitFor } from '@testing-library/angular';
 import { renderComponent } from '@tests/test-render.utils';
diff --git a/src/app/modules/shared/modules/modal/component/modal.component.ts b/src/app/modules/shared/modules/modal/component/modal.component.ts
@@ -20,7 +20,10 @@
  ********************************************************************************/
 
 import { Component, HostListener, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import { ModalData } from '@shared/modules/modal/core/modal.model';
 
 @Component({
diff --git a/src/app/modules/shared/modules/modal/core/modal.service.ts b/src/app/modules/shared/modules/modal/core/modal.service.ts
@@ -20,7 +20,7 @@
  ********************************************************************************/
 
 import { Injectable } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { ModalComponent } from '@shared/modules/modal/component/modal.component';
 import { ModalData } from '@shared/modules/modal/core/modal.model';
 import { Subscription } from 'rxjs';
diff --git a/src/app/modules/shared/modules/modal/modal.module.ts b/src/app/modules/shared/modules/modal/modal.module.ts
@@ -21,7 +21,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { ModalService } from '@shared/modules/modal/core/modal.service';
 import { SharedModule } from '@shared/shared.module';
 import { ModalComponent } from './component/modal.component';
diff --git a/src/app/modules/shared/shared.module.ts b/src/app/modules/shared/shared.module.ts
@@ -20,7 +20,7 @@
  ********************************************************************************/
 
 import { NgModule } from '@angular/core';
-import { MatPaginatorIntl } from '@angular/material/paginator';
+import { MatLegacyPaginatorIntl as MatPaginatorIntl } from '@angular/material/legacy-paginator';
 import { RouterModule } from '@angular/router';
 import { NotificationOverviewComponent } from '@shared/components/notification-overview/notification-overview.component';
 import { NotificationReasonComponent } from '@shared/components/notification-reason/notification-reason.component';
diff --git a/src/app/modules/shared/template.module.ts b/src/app/modules/shared/template.module.ts
@@ -28,34 +28,34 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 
 @NgModule({
diff --git a/src/theme/material-theme.scss b/src/theme/material-theme.scss
@@ -21,7 +21,16 @@
 
 @use '@angular/material' as mat;
 
-@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();
 
 $primary-palette: (
   50: #fff3de,
@@ -112,8 +121,5 @@ $tracefoss-theme: mat.define-light-theme(
   )
 );
 
-@include mat.core-theme($tracefoss-theme);
-@include mat.all-component-themes($tracefoss-theme);
-
-@include mat.all-component-colors($tracefoss-theme);
-@include mat.all-component-typographies($tracefoss-theme);
+@include mat.legacy-core-theme($tracefoss-theme);
+@include mat.all-legacy-component-themes($tracefoss-theme);
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -34,10 +34,6 @@`
`34`	`34`	`@apply text-white bg-primary hover:bg-primaryDark;`
`35`	`35`	`}`
`36`	`36`
`37`		`-.item {`
`38`		`- margin-right: 0.5rem;`
`39`		`-}`
`40`		`-`
`41`	`37`	`.item-active {`
`42`	`38`	`@apply text-white;`
`43`	`39`	`}`