Feature/migrate libs components to angular material 15 (#1833)

* Migrate to Angular Material 15

* Update changelog

CHANGELOG.md

@@ -16,6 +16,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the content of the pricing page
 - Changed the `auth` endpoint of the login with _Security Token_ from `GET` to `POST`
 - Changed the `auth` endpoint of the _Internet Identity_ login provider from `GET` to `POST`
+- Migrated the style of the `libs` components to `@angular/material` `15` (mdc)
+  - `ActivitiesFilterComponent`
+  - `ActivitiesTableComponent`
+  - `BenchmarkComponent`
+  - `HoldingsTableComponent`
 - Upgraded `angular` from version `15.1.5` to `15.2.5`
 - Upgraded `Nx` from version `15.7.2` to `15.9.2`
 

apps/client/src/styles.scss

@@ -267,6 +267,7 @@ body {
       }
     }
 
+    .mat-mdc-paginator,
     .mat-paginator {
       background-color: rgba(var(--palette-foreground-base-dark), 0.02);
     }
@@ -444,9 +445,11 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-mdc-paginator,
 .mat-paginator {
   background-color: rgba(var(--palette-foreground-base-light), 0.02);
 
+  .mat-mdc-paginator-page-size,
   .mat-paginator-page-size {
     display: none;
   }

apps/client/src/styles/table.scss

@@ -9,6 +9,20 @@
     }
   }
 
+  .mat-mdc-row {
+    &:nth-child(even) {
+      background-color: rgba(var(--palette-foreground-base), 0.02);
+    }
+
+    &:hover {
+      background-color: rgba(var(--palette-foreground-base), 0.05) !important;
+    }
+
+    .mat-mdc-cell {
+      background: none;
+    }
+  }
+
   .mat-row {
     &:nth-child(even) {
       background-color: rgba(var(--palette-foreground-base), 0.02);
@@ -20,6 +34,23 @@
   }
 
   @if $darkTheme {
+    .mat-mdc-row {
+      &:nth-child(even) {
+        background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+      }
+
+      &:hover {
+        background-color: rgba(
+          var(--palette-foreground-base-dark),
+          0.05
+        ) !important;
+      }
+
+      .mat-mdc-cell {
+        background: none;
+      }
+    }
+
     .mat-row {
       &:nth-child(even) {
         background-color: rgba(var(--palette-foreground-base-dark), 0.02);

libs/ui/src/lib/activities-filter/activities-filter.component.html

@@ -1,7 +1,9 @@
 <mat-form-field appearance="outline" class="w-100">
-  <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
+  <button disabled mat-icon-button matPrefix>
-  <mat-chip-list #chipList aria-label="Search keywords">
+    <ion-icon name="search-outline"></ion-icon>
-    <mat-chip
+  </button>
+  <mat-chip-grid #chipList aria-label="Search keywords">
+    <mat-chip-row
       *ngFor="let filter of selectedFilters"
       class="mx-1 my-0 px-2 py-0"
       matChipRemove
@@ -9,8 +11,10 @@
       (removed)="onRemoveFilter(filter)"
     >
       {{ filter.label | gfSymbol }}
-      <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
+      <button matChipRemove>
-    </mat-chip>
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+    </mat-chip-row>
     <input
       #searchInput
       name="close-outline"
@@ -21,7 +25,7 @@
       [placeholder]="placeholder"
       (matChipInputTokenEnd)="onAddFilter($event)"
     />
-  </mat-chip-list>
+  </mat-chip-grid>
   <mat-autocomplete
     #autocomplete="matAutocomplete"
     (optionSelected)="onSelectFilter($event)"
@@ -38,9 +42,13 @@
       </mat-option>
     </mat-optgroup>
   </mat-autocomplete>
-  <mat-spinner
+
+  <button
+    disabled
+    mat-icon-button
     matSuffix
-    [diameter]="20"
     [ngClass]="{ 'd-none': !isLoading }"
-  ></mat-spinner>
+  >
+    <mat-spinner matSuffix [diameter]="20"></mat-spinner>
+  </button>
 </mat-form-field>

libs/ui/src/lib/activities-filter/activities-filter.component.scss

@@ -4,30 +4,26 @@
   display: block;
 
   ::ng-deep {
-    .mat-form-field-infix {
+    .mat-mdc-progress-spinner {
-      border-top: 0 solid transparent !important;
-    }
-
-    .mat-spinner {
       circle {
         stroke: rgba(var(--dark-dividers));
       }
     }
   }
 
-  .mat-chip {
+  .mat-mdc-chip {
     cursor: pointer;
     min-height: 1.5rem !important;
   }
 }
 
 :host-context(.is-dark-theme) {
-  .mat-form-field {
+  .mat-mdc-form-field {
     color: rgba(var(--light-primary-text));
   }
 
   ::ng-deep {
-    .mat-spinner {
+    .mat-mdc-progress-spinner {
       circle {
         stroke: rgba(var(--light-dividers));
       }

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -13,10 +13,10 @@ import {
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import {
-  MatLegacyAutocomplete as MatAutocomplete,
+  MatAutocomplete,
-  MatLegacyAutocompleteSelectedEvent as MatAutocompleteSelectedEvent
+  MatAutocompleteSelectedEvent
-} from '@angular/material/legacy-autocomplete';
+} from '@angular/material/autocomplete';
-import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
+import { MatChipInputEvent } from '@angular/material/chips';
 import { Filter, FilterGroup } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
 import { groupBy } from 'lodash';

libs/ui/src/lib/activities-filter/activities-filter.module.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatChipsModule } from '@angular/material/chips';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 
 import { ActivitiesFilterComponent } from './activities-filter.component';
@@ -16,6 +17,7 @@ import { ActivitiesFilterComponent } from './activities-filter.component';
     CommonModule,
     GfSymbolModule,
     MatAutocompleteModule,
+    MatButtonModule,
     MatChipsModule,
     MatInputModule,
     MatProgressSpinnerModule,

libs/ui/src/lib/activities-table/activities-table.component.scss

@@ -6,9 +6,9 @@
   .activities {
     overflow-x: auto;
 
-    .mat-table {
+    .mat-mdc-table {
       td {
-        &.mat-footer-cell {
+        &.mat-mdc-footer-cell {
           border-top: 1px solid
             rgba(
               var(--palette-foreground-divider),
@@ -25,7 +25,7 @@
         }
       }
 
-      .mat-row {
+      .mat-mdc-row {
         .type-badge {
           background-color: rgba(var(--palette-foreground-text), 0.05);
           border-radius: 1rem;
@@ -57,9 +57,9 @@
 }
 
 :host-context(.is-dark-theme) {
-  .mat-table {
+  .mat-mdc-table {
     td {
-      &.mat-footer-cell {
+      &.mat-mdc-footer-cell {
         border-top-color: rgba(
           var(--palette-foreground-divider-dark),
           var(--palette-foreground-divider-dark-alpha)

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -10,12 +10,9 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import {
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
-  MatLegacyPaginator as MatPaginator,
-  LegacyPageEvent as PageEvent
-} from '@angular/material/legacy-paginator';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';

libs/ui/src/lib/activities-table/activities-table.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
-import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';

libs/ui/src/lib/benchmark/benchmark.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatTableModule } from '@angular/material/table';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfValueModule } from '../value';

libs/ui/src/lib/holdings-table/holdings-table.component.scss

@@ -6,7 +6,7 @@
   .holdings {
     overflow-x: auto;
 
-    .mat-table {
+    .mat-mdc-table {
       th {
         ::ng-deep {
           .mat-sort-header-container {
@@ -15,7 +15,7 @@
         }
       }
 
-      .mat-row {
+      .mat-mdc-row {
         &.cursor-pointer {
           cursor: pointer;
         }

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -9,9 +9,9 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
+import { MatPaginator } from '@angular/material/paginator';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { AssetClass, Order as OrderModel } from '@prisma/client';

libs/ui/src/lib/holdings-table/holdings-table.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
-import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';

libs/ui/src/lib/no-transactions-info/no-transactions-info.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { GfLogoModule } from '@ghostfolio/ui/logo';