Feature/migrate form components to angular material 15 (#1842)

* Upgrade @angular/cdk

* Upgrade form components to Angular Material 15

* Update changelog

CHANGELOG.md

@@ -12,7 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed the slide toggles to checkboxes on the account page
 - Changed the slide toggles to checkboxes in the admin control panel
 - Migrated the style of various components to `@angular/material` `15` (mdc)
-- Upgraded `@angular/material` from version `15.2.5` to `15.2.6`
+- Upgraded `@angular/cdk` and `@angular/material` from version `15.2.5` to `15.2.6`
 
 ## 1.251.0 - 2023-04-07
 

apps/client/src/app/app.module.ts

@@ -7,7 +7,7 @@ import {
   MAT_DATE_LOCALE,
   MatNativeDateModule
 } from '@angular/material/core';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';

apps/client/src/app/components/admin-jobs/admin-jobs.module.ts

@@ -3,7 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 
 import { AdminJobsComponent } from './admin-jobs.component';
 

apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.html

@@ -1,6 +1,6 @@
 <form class="d-flex flex-column h-100">
   <h1 i18n mat-dialog-title>Details for {{ data.symbol }}</h1>
-  <div class="flex-grow-1 pt-3" mat-dialog-content>
+  <div class="flex-grow-1 py-3" mat-dialog-content>
     <div class="mb-3">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts

@@ -4,7 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';

apps/client/src/app/components/admin-overview/admin-overview.module.ts

@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

apps/client/src/app/components/admin-overview/admin-overview.scss

@@ -4,7 +4,7 @@
   display: block;
 
   .subscription {
-    .mat-form-field {
+    .mat-mdc-form-field {
       max-width: 100%;
     }
   }

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -4,9 +4,9 @@
   (closeButtonClicked)="onClose()"
 ></gf-dialog-header>
 
-<div mat-dialog-content>
+<div class="py-3" mat-dialog-content>
   <div class="align-items-center d-flex flex-column">
-    <mat-form-field appearance="outline" class="w-100">
+    <mat-form-field appearance="outline" class="without-hint w-100">
       <mat-label i18n>Security Token</mat-label>
       <textarea
         cdkTextareaAutosize

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts

@@ -5,8 +5,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 
 import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
 import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.component';

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.scss

@@ -1,23 +1,3 @@
 :host {
   display: block;
-
-  textarea.mat-input-element.cdk-textarea-autosize {
-    box-sizing: content-box;
-  }
-
-  .mat-mdc-checkbox {
-    ::ng-deep {
-      label {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .mat-form-field {
-    ::ng-deep {
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-    }
-  }
 }

apps/client/src/app/pages/account/account-page.module.ts

@@ -5,8 +5,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';
 import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';

apps/client/src/app/pages/account/account-page.scss

@@ -17,14 +17,6 @@
     font-size: 90%;
     line-height: 1.2;
   }
-
-  .mat-form-field {
-    ::ng-deep {
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-    }
-  }
 }
 
 :host-context(.is-dark-theme) {

apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -1,6 +1,6 @@
 <form #addAccessForm="ngForm" class="d-flex flex-column h-100">
   <h1 i18n mat-dialog-title>Grant access</h1>
-  <div class="flex-grow-1" mat-dialog-content>
+  <div class="flex-grow-1 py-3" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Alias</mat-label>

apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts

@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 
 import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog.component';
 

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -1,7 +1,7 @@
 <form #addAccountForm="ngForm" class="d-flex flex-column h-100">
   <h1 *ngIf="data.account.id" i18n mat-dialog-title>Update account</h1>
   <h1 *ngIf="!data.account.id" i18n mat-dialog-title>Add account</h1>
-  <div class="flex-grow-1" mat-dialog-content>
+  <div class="flex-grow-1 py-3" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name</mat-label>

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts

@@ -4,9 +4,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 
 import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.component';
 

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss

@@ -3,41 +3,5 @@
 
   .mat-dialog-content {
     max-height: unset;
-
-    .autocomplete {
-      font-size: 90%;
-      height: 2.5rem;
-
-      .symbol {
-        display: inline-block;
-        min-width: 4rem;
-      }
-    }
-
-    .mat-select {
-      &.no-arrow {
-        ::ng-deep {
-          .mat-select-arrow {
-            opacity: 0;
-          }
-        }
-      }
-    }
-
-    .mat-datepicker-input {
-      &.mat-input-element:disabled {
-        color: var(--dark-primary-text);
-      }
-    }
-  }
-}
-
-:host-context(.is-dark-theme) {
-  .mat-dialog-content {
-    .mat-datepicker-input {
-      &.mat-input-element:disabled {
-        color: var(--light-primary-text);
-      }
-    }
   }
 }

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -6,7 +6,7 @@
 >
   <h1 *ngIf="data.activity.id" i18n mat-dialog-title>Update activity</h1>
   <h1 *ngIf="!data.activity.id" i18n mat-dialog-title>Add activity</h1>
-  <div class="flex-grow-1 pt-3" mat-dialog-content>
+  <div class="flex-grow-1 py-3" mat-dialog-content>
     <div class="mb-3">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Type</mat-label>

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -5,7 +5,7 @@
   (closeButtonClicked)="onCancel()"
 ></gf-dialog-header>
 
-<div class="flex-grow-1" mat-dialog-content>
+<div class="flex-grow-1 py-3" mat-dialog-content>
   <ng-container *ngIf="!isFileSelected">
     <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
       <form [formGroup]="uniqueAssetForm" (ngSubmit)="onLoadDividends()">

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts

@@ -4,8 +4,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html

@@ -4,7 +4,7 @@
     >{{ data.role }}</span
   >
 </h1>
-<div mat-dialog-content>
+<div class="py-3" mat-dialog-content>
   <div>
     <mat-form-field appearance="outline" class="w-100">
       <mat-label i18n>Security Token</mat-label>

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts

@@ -5,8 +5,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 
 import { ShowAccessTokenDialog } from './show-access-token-dialog.component';
 

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss

@@ -1,5 +1,2 @@
 :host {
-  textarea.mat-input-element.cdk-textarea-autosize {
-    box-sizing: content-box;
-  }
 }

apps/client/src/styles.scss

@@ -279,16 +279,13 @@ body {
     }
 
     .with-placeholder-as-option {
-      .mat-select-placeholder {
+      .mat-mdc-select-placeholder {
         color: rgba(var(--light-primary-text));
       }
 
-      &.mat-select-disabled {
+      &.mat-mdc-select-disabled {
-        .mat-select-placeholder {
+        .mat-mdc-select-placeholder {
-          color: rgba(
+          color: rgba(var(--light-disabled-text));
-            var(--palette-foreground-disabled-text-dark),
-            var(--palette-foreground-disabled-text-dark-alpha)
-          );
         }
       }
     }
@@ -372,6 +369,12 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-mdc-checkbox {
+  label {
+    margin-bottom: 0;
+  }
+}
+
 .mat-mdc-fab,
 .mat-mdc-unelevated-button {
   &.mat-primary {
@@ -379,42 +382,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-form-field {
-  &.compact-with-outline {
-    .mat-form-field-wrapper {
-      margin: 0.5rem 0 0.25rem;
-      padding-bottom: 1rem;
-
-      .mat-form-field-infix {
-        border-top-width: 0;
-        padding: 1rem 0 0.75rem;
-
-        .mat-form-field-label {
-          margin-top: 0.1rem;
-        }
-
-        .mat-select-arrow-wrapper {
-          transform: none;
-        }
-      }
-
-      .mat-form-field-prefix {
-        top: 0;
-      }
-
-      .mat-form-field-suffix {
-        top: 0;
-      }
-    }
-  }
-
-  &.without-hint {
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-  }
-}
-
 .mat-mdc-fab {
   color: var(--mat-mdc-fab-color, inherit) !important;
 
@@ -424,6 +391,18 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-mdc-form-field {
+  &.compact-with-outline {
+    // TODO: Configure density in Angular Material
+  }
+
+  &.without-hint {
+    .mat-mdc-form-field-subscript-wrapper {
+      display: none;
+    }
+  }
+}
+
 .mat-mdc-menu-panel {
   .mat-mdc-menu-item {
     .mdc-list-item__primary-text {
@@ -475,16 +454,13 @@ ngx-skeleton-loader {
 }
 
 .with-placeholder-as-option {
-  .mat-select-placeholder {
+  .mat-mdc-select-placeholder {
     color: rgba(var(--dark-primary-text));
   }
 
-  &.mat-select-disabled {
+  &.mat-mdc-select-disabled {
-    .mat-select-placeholder {
+    .mat-mdc-select-placeholder {
-      color: rgba(
+      color: rgba(var(--dark-disabled-text));
-        var(--palette-foreground-disabled-text),
-        var(--palette-foreground-disabled-text-alpha)
-      );
     }
   }
 }

package.json

@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@angular/animations": "15.2.5",
-    "@angular/cdk": "15.2.5",
+    "@angular/cdk": "15.2.6",
     "@angular/common": "15.2.5",
     "@angular/compiler": "15.2.5",
     "@angular/core": "15.2.5",

yarn.lock

@@ -249,10 +249,10 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/cdk@15.2.5":
+"@angular/cdk@15.2.6":
-  version "15.2.5"
+  version "15.2.6"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-15.2.5.tgz#53208ea5e654b678af011b3ef6034e1382339630"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-15.2.6.tgz#528f5c6c22c3e258fdc4c847ac061f2ae7faedc2"
-  integrity sha512-6/vA4xATcx//AULwXnRRH0Of0aaNlfrFxdlhvRVfnfmxi/hZAkjjEtil/wv8uBw+dAwXBx5yZMsAol9nUFS/BQ==
+  integrity sha512-c6XFKMFowllHxb4tUt9en3bXBDqXKG2k4O9XGggJ1TL668d3Uhlk9qULywFNVWmNQSamkERmhFKAN4hEO3TPAQ==
   dependencies:
     tslib "^2.3.0"
   optionalDependencies: