Task/migrate rule and rules components to standalone (#5488)

* Migrate rule and rules components to standalone

* Update changelog

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - 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/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