Merge branch 'main' into feature/upgrade-ngx-markdown-to-version-15.1.0

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Migrated the style of `ActivitiesPageModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `GfCreateOrUpdateActivityDialogModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `GfMarketDataDetailDialogModule` to `@angular/material` `15` (mdc)
+- Upgraded `ng-extract-i18n-merge` from version `2.1.2` to `2.5.0`
 - Upgraded `ngx-markdown` from version `14.0.1` to `15.1.0`
 
 ## 1.231.0 - 2023-02-04

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" mat-dialog-content>
+  <div class="flex-grow-1 pt-3" mat-dialog-content>
     <div class="mb-3">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>
@@ -11,7 +11,7 @@
           [matDatepicker]="date"
           [(ngModel)]="data.date"
         />
-        <mat-datepicker-toggle matSuffix [for]="date">
+        <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon
@@ -21,7 +21,7 @@
         <mat-datepicker #date disabled="true"></mat-datepicker>
       </mat-form-field>
     </div>
-    <div>
+    <div class="align-items-start d-flex">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Market Price</mat-label>
         <input
@@ -30,16 +30,16 @@
           type="number"
           [(ngModel)]="data.marketPrice"
         />
-        <span class="ml-2" matSuffix>{{ data.currency }}</span>
+        <span class="ml-2" matTextSuffix>{{ data.currency }}</span>
+      </mat-form-field>
       <button
-          mat-icon-button
+        class="apply-current-market-price ml-2 no-min-width"
-          matSuffix
+        mat-button
         title="Fetch market price"
         (click)="onFetchSymbolForDate()"
       >
         <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
       </button>
-      </mat-form-field>
     </div>
   </div>
   <div class="justify-content-end" mat-dialog-actions>

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

@@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-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 { 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 { MarketDataDetailDialog } from './market-data-detail-dialog.component';
 

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

@@ -4,19 +4,9 @@
   .mat-dialog-content {
     max-height: unset;
 
-    .mat-form-field-appearance-outline {
+    .mat-mdc-button {
-      ::ng-deep {
+      &.apply-current-market-price {
-        .mat-form-field-suffix {
+        height: 56px;
-          top: -0.3rem;
-        }
-
-        .mat-form-field-wrapper {
-          padding-bottom: 0;
-        }
-      }
-
-      ion-icon {
-        font-size: 130%;
       }
     }
   }

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -33,7 +33,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon name="add-outline" size="large"></ion-icon>
+      <ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
     </a>
   </div>
 </div>

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

@@ -1,7 +1,7 @@
 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 { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { RouterModule } from '@angular/router';
 import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';

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

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import { MatLegacyAutocompleteSelectedEvent as MatAutocompleteSelectedEvent } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import {
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
   MatLegacyDialogRef as MatDialogRef

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" mat-dialog-content>
+  <div class="flex-grow-1 pt-3" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Type</mat-label>
@@ -76,7 +76,7 @@
     <div class="d-none">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Currency</mat-label>
-        <mat-select class="no-arrow" formControlName="currency">
+        <mat-select formControlName="currency">
           <mat-option *ngFor="let currency of currencies" [value]="currency"
             >{{ currency }}</mat-option
           >
@@ -93,7 +93,7 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>
         <input formControlName="date" matInput [matDatepicker]="date" />
-        <mat-datepicker-toggle matSuffix [for]="date">
+        <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon
@@ -109,7 +109,7 @@
         <input formControlName="quantity" matInput type="number" />
       </mat-form-field>
     </div>
-    <div>
+    <div class="align-items-start d-flex">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label
           ><ng-container [ngSwitch]="activityForm.controls['type']?.value">
@@ -121,20 +121,20 @@
           </ng-container>
         </mat-label>
         <input formControlName="unitPrice" matInput type="number" />
-        <span class="ml-2" matSuffix
+        <span class="ml-2" matTextSuffix
           >{{ activityForm.controls['currency'].value }}</span
         >
+      </mat-form-field>
       <button
         *ngIf="currentMarketPrice && (data.activity.type === 'BUY' || data.activity.type === 'SELL')"
-          mat-icon-button
+        class="apply-current-market-price ml-2 no-min-width"
-          matSuffix
+        mat-button
         title="Apply current market price"
         type="button"
         (click)="applyCurrentMarketPrice()"
       >
         <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
       </button>
-      </mat-form-field>
     </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
@@ -142,7 +142,7 @@
         <input formControlName="feeInCustomCurrency" matInput type="number" />
         <div
           class="ml-2"
-          matSuffix
+          matTextSuffix
           [ngClass]="{ 'd-none': !activityForm.controls['currency']?.value }"
         >
           <mat-select formControlName="currencyOfFee">
@@ -157,7 +157,7 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Fee</mat-label>
         <input formControlName="fee" matInput type="number" />
-        <span class="ml-2" matSuffix
+        <span class="ml-2" matTextSuffix
           >{{ activityForm.controls['currency'].value }}</span
         >
       </mat-form-field>
@@ -207,8 +207,8 @@
     <div [ngClass]="{ 'd-none': tags?.length <= 0 }">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Tags</mat-label>
-        <mat-chip-list #tagsChipList>
+        <mat-chip-grid #tagsChipList>
-          <mat-chip
+          <mat-chip-row
             *ngFor="let tag of activityForm.controls['tags']?.value"
             matChipRemove
             [removable]="true"
@@ -216,7 +216,7 @@
           >
             {{ tag.name }}
             <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
-          </mat-chip>
+          </mat-chip-row>
           <input
             #tagInput
             name="close-outline"
@@ -224,7 +224,7 @@
             [matChipInputFor]="tagsChipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           />
-        </mat-chip-list>
+        </mat-chip-grid>
         <mat-autocomplete
           #autocompleteTags="matAutocomplete"
           (optionSelected)="onAddTag($event)"

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

@@ -2,14 +2,14 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
+import { MatChipsModule } from '@angular/material/chips';
 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 { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

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

@@ -20,36 +20,15 @@
       }
     }
 
-    .mat-chip {
+    .mat-datepicker-input {
-      cursor: pointer;
+      &.mat-mdc-input-element:disabled {
-      min-height: 1.5rem !important;
+        color: var(--dark-primary-text);
-    }
-
-    .mat-form-field-appearance-outline {
-      ::ng-deep {
-        .mat-form-field-suffix {
-          top: -0.3rem;
-        }
-      }
-
-      ion-icon {
-        font-size: 130%;
-      }
-    }
-
-    .mat-select {
-      &.no-arrow {
-        ::ng-deep {
-          .mat-select-arrow {
-            opacity: 0;
-          }
-        }
       }
     }
 
-    .mat-datepicker-input {
+    .mat-mdc-button {
-      &.mat-input-element:disabled {
+      &.apply-current-market-price {
-        color: var(--dark-primary-text);
+        height: 56px;
       }
     }
   }
@@ -58,7 +37,7 @@
 :host-context(.is-dark-theme) {
   .mat-dialog-content {
     .mat-datepicker-input {
-      &.mat-input-element:disabled {
+      &.mat-mdc-input-element:disabled {
         color: var(--light-primary-text);
       }
     }

package.json

@@ -110,7 +110,7 @@
     "lodash": "4.17.21",
     "marked": "4.2.12",
     "ms": "3.0.0-canary.1",
-    "ng-extract-i18n-merge": "2.1.2",
+    "ng-extract-i18n-merge": "2.5.0",
     "ngx-device-detector": "3.0.0",
     "ngx-markdown": "15.1.0",
     "ngx-skeleton-loader": "5.0.0",

yarn.lock

@@ -124,17 +124,6 @@
     rxjs "6.6.7"
     source-map "0.7.3"
 
-"@angular-devkit/core@14.1.2", "@angular-devkit/core@^13.0.0 || ^14.0.0":
-  version "14.1.2"
-  resolved "https://registry.npmjs.org/@angular-devkit/core/-/core-14.1.2.tgz"
-  integrity sha512-fIfymD1erjoj1eVh7pa/dvOtUhSd7sEOGuWEJ81HJqdzwZbPWweRu3Nh/9kj/ttUy8xawWfdJHLwyG2KnRu0DA==
-  dependencies:
-    ajv "8.11.0"
-    ajv-formats "2.1.1"
-    jsonc-parser "3.1.0"
-    rxjs "6.6.7"
-    source-map "0.7.4"
-
 "@angular-devkit/core@14.2.1":
   version "14.2.1"
   resolved "https://registry.npmjs.org/@angular-devkit/core/-/core-14.2.1.tgz"
@@ -157,6 +146,17 @@
     rxjs "6.6.7"
     source-map "0.7.4"
 
+"@angular-devkit/core@15.1.4", "@angular-devkit/core@^13.0.0 || ^14.0.0 || ^15.0.0":
+  version "15.1.4"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-15.1.4.tgz#462f123d56f9298cb04b3fa31b425fc31abb76c5"
+  integrity sha512-PW5MRmd9DHJR4FaXchwQtj9pXnsghSTnwRvfZeCRNYgU2sv0DKyTV+YTSJB+kNXnoPNG1Je6amDEkiXecpspXg==
+  dependencies:
+    ajv "8.12.0"
+    ajv-formats "2.1.1"
+    jsonc-parser "3.2.0"
+    rxjs "6.6.7"
+    source-map "0.7.4"
+
 "@angular-devkit/schematics@14.0.5":
   version "14.0.5"
   resolved "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-14.0.5.tgz"
@@ -168,17 +168,6 @@
     ora "5.4.1"
     rxjs "6.6.7"
 
-"@angular-devkit/schematics@14.1.2", "@angular-devkit/schematics@^13.0.0 || ^14.0.0":
-  version "14.1.2"
-  resolved "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-14.1.2.tgz"
-  integrity sha512-vC9UA3heXbq9CAkwMXHJfIu0G7Ty2oTJ5PtrrFQpig1PrFnRfr4sg+qRS1CLsEAJYQNo14xV55OQkKEPTij/Gg==
-  dependencies:
-    "@angular-devkit/core" "14.1.2"
-    jsonc-parser "3.1.0"
-    magic-string "0.26.2"
-    ora "5.4.1"
-    rxjs "6.6.7"
-
 "@angular-devkit/schematics@14.2.1":
   version "14.2.1"
   resolved "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-14.2.1.tgz"
@@ -201,6 +190,17 @@
     ora "5.4.1"
     rxjs "6.6.7"
 
+"@angular-devkit/schematics@15.1.4", "@angular-devkit/schematics@^13.0.0 || ^14.0.0 || ^15.0.0":
+  version "15.1.4"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-15.1.4.tgz#30e38777f1bd98e20e6dbe1bfddabc3bcd42605f"
+  integrity sha512-jpddxo9Qd2yRQ1t9FLhAx5S+luz6HkyhDytq0LFKbxf9ikf1J4oy9riPBFl4pRmrNARWcHZ6GbD20/Ky8PjmXQ==
+  dependencies:
+    "@angular-devkit/core" "15.1.4"
+    jsonc-parser "3.2.0"
+    magic-string "0.27.0"
+    ora "5.4.1"
+    rxjs "6.6.7"
+
 "@angular-eslint/bundled-angular-compiler@15.2.0":
   version "15.2.0"
   resolved "https://registry.yarnpkg.com/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-15.2.0.tgz#506f94c96039346f33ba92222062edbf3943543e"
@@ -4864,14 +4864,14 @@
     "@angular-devkit/schematics" "15.1.3"
     jsonc-parser "3.2.0"
 
-"@schematics/angular@^13.0.0 || ^14.0.0":
+"@schematics/angular@^13.0.0 || ^14.0.0 || ^15.0.0":
-  version "14.1.2"
+  version "15.1.4"
-  resolved "https://registry.npmjs.org/@schematics/angular/-/angular-14.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-15.1.4.tgz#2a5ef92fc5852f6d3acb0ec6f3db81deffd9d0f3"
-  integrity sha512-vttvYpffkG/cy9aUCXLW+Dc0msUNbyoFXTQRHN/MYX5uNVvXaRCEzWVE3tp87Dt5XlGo2r9e21gNAoY1TyXj3Q==
+  integrity sha512-4SV8dDGZeSvts01b8y2W6FmpDD0dQhBlGMhMJKC/tUnhfNKfYCs2VKtMBsIc3ZiGP2yoA3+nUiMmtS6hEkXYHw==
   dependencies:
-    "@angular-devkit/core" "14.1.2"
+    "@angular-devkit/core" "15.1.4"
-    "@angular-devkit/schematics" "14.1.2"
+    "@angular-devkit/schematics" "15.1.4"
-    jsonc-parser "3.1.0"
+    jsonc-parser "3.2.0"
 
 "@simplewebauthn/browser@5.2.1":
   version "5.2.1"
@@ -16273,16 +16273,16 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
   resolved "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz"
   integrity sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==
 
-ng-extract-i18n-merge@2.1.2:
+ng-extract-i18n-merge@2.5.0:
-  version "2.1.2"
+  version "2.5.0"
-  resolved "https://registry.npmjs.org/ng-extract-i18n-merge/-/ng-extract-i18n-merge-2.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/ng-extract-i18n-merge/-/ng-extract-i18n-merge-2.5.0.tgz#bc58fd8f50d08f690cdcc00b4f9ff068a0550a9d"
-  integrity sha512-dRo/oO4m3tr26uE4+DHJh0iTqSV3qVl+WGTSHGKKyAM628dP3hZunhBTs7fCpLs57aEex84cJax8X+Y8wmBXTQ==
+  integrity sha512-/RCYvStp6326SgK8JQVPlu48vt3tzTOM8XggXUtekTBLc1Q6wXyACSurQk7vQPuAt+l0Lk93734aFoDcC1W59A==
   dependencies:
     "@angular-devkit/architect" "^0.1301.0"
-    "@angular-devkit/core" "^13.0.0 || ^14.0.0"
+    "@angular-devkit/core" "^13.0.0 || ^14.0.0 || ^15.0.0"
-    "@angular-devkit/schematics" "^13.0.0 || ^14.0.0"
+    "@angular-devkit/schematics" "^13.0.0 || ^14.0.0 || ^15.0.0"
-    "@schematics/angular" "^13.0.0 || ^14.0.0"
+    "@schematics/angular" "^13.0.0 || ^14.0.0 || ^15.0.0"
-    xliff-simple-merge "~0.12.4"
+    xliff-simple-merge "~1.0.1"
     xml_normalize "~0.8.4"
     xmldoc "~1.1.2"
 
@@ -21553,10 +21553,10 @@ x-default-browser@^0.4.0:
   optionalDependencies:
     default-browser-id "^1.0.4"
 
-xliff-simple-merge@~0.12.4:
+xliff-simple-merge@~1.0.1:
-  version "0.12.4"
+  version "1.0.2"
-  resolved "https://registry.npmjs.org/xliff-simple-merge/-/xliff-simple-merge-0.12.4.tgz"
+  resolved "https://registry.yarnpkg.com/xliff-simple-merge/-/xliff-simple-merge-1.0.2.tgz#55f88a84630de625db2b3ddfc3d0d741ac940bfd"
-  integrity sha512-Rk88D62XUoMgyBLEILpgOx3ARnxONLwH/xz+/c1HsRHYPHDnuZhYORkwrBCXsE942esG+J+OUCCOiydXJxY4Ug==
+  integrity sha512-9Dtw/l91o0DeLkNFJrlh5nxJSS8OD+IHeq5rjA6hkVtv6SWf7rJyr4YNSQc/6opDssRI8JgAWcQlj2ZfcvW11Q==
   dependencies:
     commander "~8.3.0"
     js-levenshtein "~1.1.6"