Merge branch 'main' into feature/extend-variations-of-subscription-interstitials

CHANGELOG.md

@@ -9,8 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Refactored the header component to standalone
 - Extended the variations of the interstitials for the subscription
+- Refactored the header component to standalone
+- Refactored the rule component to standalone
+- Refactored the rules component to standalone
 
 ## 2.197.0 - 2025-09-07
 

apps/client/src/app/components/rule/rule.component.ts

@@ -5,6 +5,7 @@ import {
   XRayRulesSettings
 } from '@ghostfolio/common/interfaces';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,7 +14,10 @@ import {
   OnInit,
   Output
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
   addCircleOutline,
@@ -24,19 +28,26 @@ import {
   warningOutline
 } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, takeUntil } from 'rxjs';
 
 import { IRuleSettingsDialogParams } from './rule-settings-dialog/interfaces/interfaces';
 import { GfRuleSettingsDialogComponent } from './rule-settings-dialog/rule-settings-dialog.component';
 
 @Component({
-  selector: 'gf-rule',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './rule.component.html',
+  imports: [
+    CommonModule,
+    IonIcon,
+    MatButtonModule,
+    MatMenuModule,
+    NgxSkeletonLoaderModule
+  ],
+  selector: 'gf-rule',
   styleUrls: ['./rule.component.scss'],
-  standalone: false
+  templateUrl: './rule.component.html'
 })
-export class RuleComponent implements OnInit {
+export class GfRuleComponent implements OnInit {
   @Input() categoryName: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;

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

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { RuleComponent } from './rule.component';
-
-@NgModule({
-  declarations: [RuleComponent],
-  exports: [RuleComponent],
-  imports: [
-    CommonModule,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    NgxSkeletonLoaderModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfRuleModule {}

apps/client/src/app/components/rules/rules.component.ts

@@ -1,4 +1,5 @@
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
+import { GfRuleComponent } from '@ghostfolio/client/components/rule/rule.component';
 import {
   PortfolioReportRule,
   XRayRulesSettings
@@ -11,15 +12,17 @@ import {
   Input,
   Output
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
-  selector: 'gf-rules',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './rules.component.html',
+  imports: [GfRuleComponent, MatButtonModule, MatCardModule],
+  selector: 'gf-rules',
   styleUrls: ['./rules.component.scss'],
-  standalone: false
+  templateUrl: './rules.component.html'
 })
-export class RulesComponent {
+export class GfRulesComponent {
   @Input() categoryName: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;

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

@@ -1,16 +0,0 @@
-import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-
-import { RulesComponent } from './rules.component';
-
-@NgModule({
-  declarations: [RulesComponent],
-  exports: [RulesComponent],
-  imports: [CommonModule, GfRuleModule, MatButtonModule, MatCardModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfRulesModule {}

apps/client/src/app/pages/about/overview/about-overview-page.html

@@ -11,8 +11,9 @@
             individuals to keep track of stocks, ETFs or cryptocurrencies and
             make solid, data-driven investment decisions.</ng-container
           >
-          <ng-container i18n>
+          <ng-container>&nbsp;</ng-container>
-            The source code is fully available as
+          <ng-container i18n
+            >The source code is fully available as
             <a
               href="https://github.com/ghostfolio/ghostfolio"
               title="Find Ghostfolio on GitHub"
@@ -26,8 +27,9 @@
             ></ng-container
           >
           @if (hasPermissionForStatistics) {
-            <ng-container i18n>
+            <ng-container>&nbsp;</ng-container>
-              and we share aggregated
+            <ng-container i18n
+              >and we share aggregated
               <a title="Open Startup" [routerLink]="routerLinkOpenStartup"
                 >key metrics</a
               >

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts

@@ -1,5 +1,5 @@
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
-import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module';
+import { GfRulesComponent } from '@ghostfolio/client/components/rules/rules.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -26,7 +26,7 @@ import { Subject, takeUntil } from 'rxjs';
 @Component({
   imports: [
     GfPremiumIndicatorComponent,
-    GfRulesModule,
+    GfRulesComponent,
     IonIcon,
     NgClass,
     NgxSkeletonLoaderModule