WEB-215 Merge angular-update-19 into dev to upgrade Angular from v18 to v19 (#2530)

src/app/shared/account-number/account-number.component.ts

@@ -1,10 +1,16 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Clipboard } from '@angular/cdk/clipboard';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-account-number',
   templateUrl: './account-number.component.html',
-  styleUrls: ['./account-number.component.scss']
+  styleUrls: ['./account-number.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent
+  ]
 })
 export class AccountNumberComponent implements OnInit {
   @Input() accountNo: string;

src/app/shared/accounting/gl-account-display/gl-account-display.component.ts

@@ -1,10 +1,16 @@
 import { Component, Input } from '@angular/core';
 import { GLAccount } from 'app/shared/models/general.model';
+import { NgIf, NgClass } from '@angular/common';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-gl-account-display',
   templateUrl: './gl-account-display.component.html',
-  styleUrls: ['./gl-account-display.component.scss']
+  styleUrls: ['./gl-account-display.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    NgClass
+  ]
 })
 export class GlAccountDisplayComponent {
   @Input() glAccount: GLAccount | null = null;

src/app/shared/accounting/gl-account-selector/gl-account-selector.component.ts

@@ -1,14 +1,22 @@
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { GLAccount } from 'app/shared/models/general.model';
 import { ReplaySubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-gl-account-selector',
   templateUrl: './gl-account-selector.component.html',
-  styleUrls: ['./gl-account-selector.component.scss']
+  styleUrls: ['./gl-account-selector.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    NgxMatSelectSearchModule,
+    AsyncPipe
+  ]
 })
 export class GlAccountSelectorComponent implements OnInit, OnChanges, OnDestroy {
   @Input() inputFormControl: UntypedFormControl;

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts

@@ -4,15 +4,51 @@ import { RevertTransactionComponent } from 'app/accounting/revert-transaction/re
 import { AccountingService } from 'app/accounting/accounting.service';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
-import { Location } from '@angular/common';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { Location, NgIf } from '@angular/common';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { DateFormatPipe } from '../../../pipes/date-format.pipe';
+import { DatetimeFormatPipe } from '../../../pipes/datetime-format.pipe';
+import { FormatNumberPipe } from '../../../pipes/format-number.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-view-journal-entry-transaction',
   templateUrl: './view-journal-entry-transaction.component.html',
-  styleUrls: ['./view-journal-entry-transaction.component.scss']
+  styleUrls: ['./view-journal-entry-transaction.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    DateFormatPipe,
+    DatetimeFormatPipe,
+    FormatNumberPipe
+  ]
 })
 export class ViewJournalEntryTransactionComponent implements OnInit {
   title: string;

src/app/shared/accounting/view-journal-entry/view-journal-entry.component.ts

@@ -1,6 +1,18 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { DateFormatPipe } from '../../../pipes/date-format.pipe';
+import { DatetimeFormatPipe } from '../../../pipes/datetime-format.pipe';
+import { FormatNumberPipe } from '../../../pipes/format-number.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View journal entry dialog component.
@@ -8,7 +20,18 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-view-journal-entry',
   templateUrl: './view-journal-entry.component.html',
-  styleUrls: ['./view-journal-entry.component.scss']
+  styleUrls: ['./view-journal-entry.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    DateFormatPipe,
+    DatetimeFormatPipe,
+    FormatNumberPipe
+  ]
 })
 export class ViewJournalEntryComponent {
   existsPaymentDetails = false;

src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.ts

@@ -1,11 +1,17 @@
 import { Component, Input } from '@angular/core';
 import { Accounting } from 'app/core/utils/accounting';
 import { OptionData } from 'app/shared/models/option-data.model';
+import { GlAccountDisplayComponent } from '../gl-account-display/gl-account-display.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-view-savings-accounting-details',
   templateUrl: './view-savings-accounting-details.component.html',
-  styleUrls: ['./view-savings-accounting-details.component.scss']
+  styleUrls: ['./view-savings-accounting-details.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    GlAccountDisplayComponent
+  ]
 })
 export class ViewSavingsAccountingDetailsComponent {
   @Input() accountingRule: OptionData;

src/app/shared/cancel-dialog/cancel-dialog.component.ts

@@ -1,6 +1,15 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Cancel dialog component.
@@ -8,7 +17,15 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-cancel-dialog',
   templateUrl: './cancel-dialog.component.html',
-  styleUrls: ['./cancel-dialog.component.scss']
+  styleUrls: ['./cancel-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class CancelDialogComponent {
   /**

src/app/shared/change-password-dialog/change-password-dialog.component.ts

@@ -1,10 +1,27 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { UntypedFormBuilder, Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import {
+  UntypedFormBuilder,
+  Validators,
+  ValidatorFn,
+  AbstractControl,
+  ValidationErrors,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { PasswordsUtility } from 'app/core/utils/passwords-utility';
-import { environment } from 'environments/environment';
+import { environment } from '../../../environments/environment';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { InputPasswordComponent } from '../input-password/input-password.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Change Password Dialog component.
@@ -12,7 +29,16 @@ import { environment } from 'environments/environment';
 @Component({
   selector: 'mifosx-change-password-dialog',
   templateUrl: './change-password-dialog.component.html',
-  styleUrls: ['./change-password-dialog.component.scss']
+  styleUrls: ['./change-password-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    InputPasswordComponent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class ChangePasswordDialogComponent implements OnInit {
   minPasswordLength: number = environment.minPasswordLength | 12;

src/app/shared/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,8 +1,17 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
 import { DialogData } from 'app/core/dialogs/dialog-data.model';
 import { Dialogs } from 'app/core/dialogs/dialogs';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Delete dialog component.
@@ -10,7 +19,15 @@ import { Dialogs } from 'app/core/dialogs/dialogs';
 @Component({
   selector: 'mifosx-confirmation-dialog',
   templateUrl: './confirmation-dialog.component.html',
-  styleUrls: ['./confirmation-dialog.component.scss']
+  styleUrls: ['./confirmation-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class ConfirmationDialogComponent implements OnInit {
   color: string;

src/app/shared/datetime-picker-stub/datetime-picker-stub.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /* eslint-disable @angular-eslint/component-selector */
 /* eslint-disable @angular-eslint/prefer-standalone */
@@ -8,7 +9,9 @@ import { Component, Input } from '@angular/core';
     <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
   `,
-  standalone: false
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class DatetimePickerStubComponent {
   @Input() enableMeridian: boolean = true;

src/app/shared/delete-dialog/delete-dialog.component.ts

@@ -1,6 +1,15 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Delete dialog component.
@@ -8,7 +17,15 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-delete-dialog',
   templateUrl: './delete-dialog.component.html',
-  styleUrls: ['./delete-dialog.component.scss']
+  styleUrls: ['./delete-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class DeleteDialogComponent {
   /**

src/app/shared/disable-dialog/disable-dialog.component.ts

@@ -1,6 +1,15 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Disable dialog component.
@@ -8,7 +17,15 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-disable-dialog',
   templateUrl: './disable-dialog.component.html',
-  styleUrls: ['./disable-dialog.component.scss']
+  styleUrls: ['./disable-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class DisableDialogComponent {
   /**

src/app/shared/dropdown/dropdown.component.ts

@@ -1,11 +1,19 @@
 import { Component, Input } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-dropdown',
   templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss']
+  styleUrls: ['./dropdown.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatIconButton,
+    MatIcon
+  ]
 })
 export class DropdownComponent {
   @Input() placeHolderText: string;

src/app/shared/enable-dialog/enable-dialog.component.ts

@@ -1,6 +1,15 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Enable dialog component.
@@ -8,7 +17,15 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-enable-dialog',
   templateUrl: './enable-dialog.component.html',
-  styleUrls: ['./enable-dialog.component.scss']
+  styleUrls: ['./enable-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class EnableDialogComponent {
   /**

src/app/shared/entity-name/entity-name.component.ts

@@ -1,10 +1,16 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Clipboard } from '@angular/cdk/clipboard';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-entity-name',
   templateUrl: './entity-name.component.html',
-  styleUrls: ['./entity-name.component.scss']
+  styleUrls: ['./entity-name.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent
+  ]
 })
 export class EntityNameComponent implements OnInit {
   @Input() entityName: string;

src/app/shared/error-dialog/error-dialog.component.ts

@@ -1,11 +1,28 @@
 /** Angular Imports. */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-error-dialog',
   templateUrl: './error-dialog.component.html',
-  styleUrls: ['./error-dialog.component.scss']
+  styleUrls: ['./error-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class ErrorDialogComponent {
   showAsCode = false;

src/app/shared/external-identifier/external-identifier.component.ts

@@ -1,11 +1,19 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { AlertService } from 'app/core/alert/alert.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { ExternalIdentifierPipe } from '../../pipes/external-identifier.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-external-identifier',
   templateUrl: './external-identifier.component.html',
-  styleUrls: ['./external-identifier.component.scss']
+  styleUrls: ['./external-identifier.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    ExternalIdentifierPipe
+  ]
 })
 export class ExternalIdentifierComponent implements OnInit {
   @Input() externalId: string;

src/app/shared/file-upload/file-upload.component.ts

@@ -1,5 +1,8 @@
 /** Angular Imports */
 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { NgStyle } from '@angular/common';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Custom file upload component based on angular material.
@@ -7,7 +10,12 @@ import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 @Component({
   selector: 'mifosx-file-upload',
   templateUrl: './file-upload.component.html',
-  styleUrls: ['./file-upload.component.scss']
+  styleUrls: ['./file-upload.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    NgStyle,
+    FaIconComponent
+  ]
 })
 export class FileUploadComponent implements OnInit {
   /** Form field flex dimension */

src/app/shared/footer/footer.component.ts

@@ -9,8 +9,11 @@ import { SystemService } from 'app/system/system.service';
 import { VersionService } from 'app/system/version.service';
 
 /** Environment Configuration */
-import { environment } from 'environments/environment';
+import { environment } from '../../../environments/environment';
 import { Subscription } from 'rxjs';
+import { NgIf, NgClass, DatePipe } from '@angular/common';
+import { MatDivider } from '@angular/material/divider';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  *  Footer component.
@@ -18,7 +21,13 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'mifosx-footer',
   templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
+  styleUrls: ['./footer.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    NgClass,
+    MatDivider,
+    DatePipe
+  ]
 })
 export class FooterComponent implements OnInit, OnDestroy {
   @Input() styleClass: string = '';

src/app/shared/form-dialog/form-dialog.component.ts

@@ -1,17 +1,38 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { UntypedFormGroup } from '@angular/forms';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 
 import { FormfieldBase } from './formfield/model/formfield-base';
 
 import { FormGroupService } from './form-group.service';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { NgClass, NgFor } from '@angular/common';
+import { FormfieldComponent } from './formfield/formfield.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 const layoutGap = 2;
 
 @Component({
   selector: 'mifosx-form-dialog',
   templateUrl: './form-dialog.component.html',
-  styleUrls: ['./form-dialog.component.scss']
+  styleUrls: ['./form-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    NgClass,
+    FormfieldComponent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class FormDialogComponent implements OnInit {
   layout: {

src/app/shared/form-dialog/formfield/formfield.component.ts

@@ -1,12 +1,18 @@
 import { Component, Input } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import { UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 
 import { FormfieldBase } from './model/formfield-base';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-formfield',
   templateUrl: './formfield.component.html',
-  styleUrls: ['./formfield.component.scss']
+  styleUrls: ['./formfield.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox
+  ]
 })
 export class FormfieldComponent {
   @Input() form: UntypedFormGroup;

src/app/shared/input-amount/input-amount.component.ts

@@ -1,11 +1,21 @@
 import { Component, Input } from '@angular/core';
 import { Currency } from '../models/general.model';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { NgIf, CurrencyPipe } from '@angular/common';
+import { MatFormField, MatLabel, MatError, MatHint, MatSuffix } from '@angular/material/form-field';
+import { FormatAmountDirective } from '../../directives/format-amount.directive';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-input-amount',
   templateUrl: './input-amount.component.html',
-  styleUrls: ['./input-amount.component.scss']
+  styleUrls: ['./input-amount.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FormatAmountDirective,
+    MatHint,
+    CurrencyPipe
+  ]
 })
 export class InputAmountComponent {
   @Input() isRequired = false;

src/app/shared/input-password/input-password.component.ts

@@ -9,11 +9,17 @@ import {
 } from '@angular/forms';
 import { MatInput } from '@angular/material/input';
 import { ErrorStateMatcher } from '@angular/material/core';
+import { MatIcon } from '@angular/material/icon';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-input-password',
   templateUrl: './input-password.component.html',
-  styleUrls: ['./input-password.component.scss']
+  styleUrls: ['./input-password.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatIcon
+  ]
 })
 export class InputPasswordComponent implements ControlValueAccessor, ErrorStateMatcher {
   disabled = false;

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.ts

@@ -1,14 +1,24 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
 import { KeyboardShortcutsConfiguration } from '../../keyboards-shortcut-config';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatDivider } from '@angular/material/divider';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 /**
  * Delete dialog component.
  */
 @Component({
   selector: 'mifosx-keyboard-shortcuts-dialog',
   templateUrl: './keyboard-shortcuts-dialog.component.html',
-  styleUrls: ['./keyboard-shortcuts-dialog.component.scss']
+  styleUrls: ['./keyboard-shortcuts-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDivider
+  ]
 })
 export class KeyboardShortcutsDialogComponent implements OnInit {
   buttonConfig: KeyboardShortcutsConfiguration;

src/app/shared/language-selector/language-selector.component.ts

@@ -1,10 +1,11 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
 import { TranslateService } from '@ngx-translate/core';
 import { SettingsService } from 'app/settings/settings.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Language selector component.
@@ -15,7 +16,10 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-language-selector',
   templateUrl: './language-selector.component.html',
-  styleUrls: ['./language-selector.component.scss']
+  styleUrls: ['./language-selector.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class LanguageSelectorComponent {
   /** Language selector form control. */

src/app/shared/long-text/long-text.component.ts

@@ -1,9 +1,17 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { TruncateTextPipe } from '../../pipes/truncate-text.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-long-text',
   templateUrl: './long-text.component.html',
-  styleUrls: ['./long-text.component.scss']
+  styleUrls: ['./long-text.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    TruncateTextPipe
+  ]
 })
 export class LongTextComponent implements OnInit {
   @Input() textValue: string;

src/app/shared/notifications-tray/notifications-tray.component.ts

@@ -6,7 +6,14 @@ import { forkJoin } from 'rxjs';
 
 /** Custom Services */
 import { NotificationsService } from 'app/notifications/notifications.service';
-import { environment } from 'environments/environment';
+import { environment } from '../../../environments/environment';
+import { MatIconButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { MatBadge } from '@angular/material/badge';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatIcon } from '@angular/material/icon';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Notifications Tray Component
@@ -15,7 +22,18 @@ import { environment } from 'environments/environment';
   selector: 'mifosx-notifications-tray',
   templateUrl: './notifications-tray.component.html',
   styleUrls: ['./notifications-tray.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatIconButton,
+    MatTooltip,
+    MatMenuTrigger,
+    MatBadge,
+    FaIconComponent,
+    MatMenu,
+    MatIcon,
+    MatMenuItem
+  ]
 })
 export class NotificationsTrayComponent implements OnInit, OnDestroy {
   /** Wait time between API status calls 60 seg */

src/app/shared/search-tool/search-tool.component.ts

@@ -2,7 +2,11 @@
 import { Component } from '@angular/core';
 import { style, animate, transition, trigger } from '@angular/animations';
 import { Router } from '@angular/router';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatIconButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatTooltip } from '@angular/material/tooltip';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Search Tool Component
@@ -21,6 +25,12 @@ import { UntypedFormControl } from '@angular/forms';
 
     ])
 
+  ],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatIconButton,
+    FaIconComponent,
+    MatTooltip
   ]
 })
 export class SearchToolComponent {

src/app/shared/server-selector/server-selector.component.ts

@@ -1,10 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { UntypedFormBuilder, Validators } from '@angular/forms';
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
+import { MatFormField, MatLabel, MatPrefix, MatError } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Server Selector Component
@@ -12,7 +15,12 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-server-selector',
   templateUrl: './server-selector.component.html',
-  styleUrls: ['./server-selector.component.scss']
+  styleUrls: ['./server-selector.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatPrefix,
+    MatIcon
+  ]
 })
 export class ServerSelectorComponent implements OnInit {
   /** Input server. */

src/app/shared/shared.module.ts

@@ -66,11 +66,9 @@ import { DatetimePickerStubComponent } from './datetime-picker-stub/datetime-pic
     ReactiveFormsModule,
     TranslateModule,
     PipesModule,
-    DirectivesModule
+    DirectivesModule,
     // NgxMatDatetimePickerModule,
     // NgxMatNativeDateModule
-  ],
-  declarations: [
     FormfieldComponent,
     FormDialogComponent,
     DeleteDialogComponent,
@@ -111,7 +109,6 @@ import { DatetimePickerStubComponent } from './datetime-picker-stub/datetime-pic
     InputAmountComponent,
     InputPasswordComponent,
     DatetimePickerStubComponent // temporarily added stub for datetime picker
-
   ],
   exports: [
     FileUploadComponent,

src/app/shared/steppers/stepper-buttons/stepper-buttons.component.ts

@@ -1,9 +1,18 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-stepper-buttons',
   templateUrl: './stepper-buttons.component.html',
-  styleUrls: ['./stepper-buttons.component.scss']
+  styleUrls: ['./stepper-buttons.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatStepperPrevious,
+    FaIconComponent,
+    MatStepperNext
+  ]
 })
 export class StepperButtonsComponent {
   @Input() disablePrevious = false;

src/app/shared/svg-icon/svg-icon.component.ts

@@ -1,9 +1,15 @@
 import { Component, Input } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-svg-icon',
   templateUrl: './svg-icon.component.html',
-  styleUrls: ['./svg-icon.component.scss']
+  styleUrls: ['./svg-icon.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    NgClass
+  ]
 })
 export class SvgIconComponent {
   @Input() iconFile: string;

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts

@@ -1,9 +1,20 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { DecimalPipe } from '@angular/common';
+import { DecimalPipe, NgIf, NgFor, NgClass } from '@angular/common';
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
-import { MatCheckboxChange as MatCheckboxChange } from '@angular/material/checkbox';
+import { MatCheckboxChange as MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
-import { MatTable } from '@angular/material/table';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { Datatables } from 'app/core/utils/datatables';
 import { Dates } from 'app/core/utils/dates';
@@ -15,11 +26,29 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SystemService } from 'app/system/system.service';
 import * as _ from 'lodash';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-datatable-multi-row',
   templateUrl: './datatable-multi-row.component.html',
-  styleUrls: ['./datatable-multi-row.component.scss']
+  styleUrls: ['./datatable-multi-row.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatCheckbox,
+    NgClass,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow
+  ]
 })
 export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges {
   SELECT_NAME_FIELD = 'select';

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts

@@ -8,11 +8,38 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SystemService } from 'app/system/system.service';
+import { NgIf, NgFor, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatDivider } from '@angular/material/divider';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { MatTooltip } from '@angular/material/tooltip';
+import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
+import { DatetimeFormatPipe } from '../../../../pipes/datetime-format.pipe';
+import { FormatNumberPipe } from '../../../../pipes/format-number.pipe';
+import { PrettyPrintPipe } from '../../../../pipes/pretty-print.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-datatable-single-row',
   templateUrl: './datatable-single-row.component.html',
-  styleUrls: ['./datatable-single-row.component.scss']
+  styleUrls: ['./datatable-single-row.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatDivider,
+    NgClass,
+    NgSwitch,
+    NgSwitchCase,
+    CdkTextareaAutosize,
+    NgSwitchDefault,
+    MatIconButton,
+    MatTooltip,
+    DateFormatPipe,
+    DatetimeFormatPipe,
+    FormatNumberPipe,
+    PrettyPrintPipe
+  ]
 })
 export class DatatableSingleRowComponent implements OnInit {
   @Input() dataObject: any;

src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.ts

@@ -1,9 +1,17 @@
 import { Component, Input } from '@angular/core';
+import { DatatableMultiRowComponent } from './datatable-multi-row/datatable-multi-row.component';
+import { DatatableSingleRowComponent } from './datatable-single-row/datatable-single-row.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-entity-datatable-tab',
   templateUrl: './entity-datatable-tab.component.html',
-  styleUrls: ['./entity-datatable-tab.component.scss']
+  styleUrls: ['./entity-datatable-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    DatatableMultiRowComponent,
+    DatatableSingleRowComponent
+  ]
 })
 export class EntityDatatableTabComponent {
   @Input() multiRowDatatableFlag = false;

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.ts

@@ -1,19 +1,50 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import {
+  MatTable,
+  MatTableDataSource,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
 import { UploadDocumentDialogComponent } from 'app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component';
 import { ClientsService } from 'app/clients/clients.service';
 import { LoansService } from 'app/loans/loans.service';
 import { SavingsService } from 'app/savings/savings.service';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { Observable } from 'rxjs';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-entity-documents-tab',
   templateUrl: './entity-documents-tab.component.html',
-  styleUrls: ['./entity-documents-tab.component.scss']
+  styleUrls: ['./entity-documents-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator
+  ]
 })
 export class EntityDocumentsTabComponent implements OnInit {
   @ViewChild('documentsTable', { static: true }) documentsTable: MatTable<Element>;

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ClientsService } from 'app/clients/clients.service';
 import { GroupsService } from 'app/groups/groups.service';
@@ -7,11 +7,24 @@ import { LoansService } from 'app/loans/loans.service';
 import { SavingsService } from 'app/savings/savings.service';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatList, MatListItem } from '@angular/material/list';
+import { DateFormatPipe } from '../../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-entity-notes-tab',
   templateUrl: './entity-notes-tab.component.html',
-  styleUrls: ['./entity-notes-tab.component.scss']
+  styleUrls: ['./entity-notes-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CdkTextareaAutosize,
+    FaIconComponent,
+    MatList,
+    MatListItem,
+    DateFormatPipe
+  ]
 })
 export class EntityNotesTabComponent implements OnInit {
   @ViewChild('formRef', { static: true }) formRef: any;

src/app/shared/tenant-selector/tenant-selector.component.ts

@@ -1,11 +1,19 @@
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
+import { MatFormField, MatPrefix, MatLabel } from '@angular/material/form-field';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-tenant-selector',
   templateUrl: './tenant-selector.component.html',
-  styleUrls: ['./tenant-selector.component.scss']
+  styleUrls: ['./tenant-selector.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatPrefix,
+    FaIconComponent
+  ]
 })
 export class TenantSelectorComponent implements OnInit {
   /** Tenant selector form control. */

src/app/shared/theme-picker/theme-picker.component.ts

@@ -6,6 +6,12 @@ import { Theme } from './theme.model';
 
 /** Custom Services */
 import { ThemeStorageService } from './theme-storage.service';
+import { MatIconButton } from '@angular/material/button';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { MatTooltip } from '@angular/material/tooltip';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatGridList, MatGridTile } from '@angular/material/grid-list';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Theme picker component.
@@ -16,7 +22,18 @@ import { ThemeStorageService } from './theme-storage.service';
   selector: 'mifosx-theme-picker',
   templateUrl: './theme-picker.component.html',
   styleUrls: ['./theme-picker.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatIconButton,
+    MatMenuTrigger,
+    MatTooltip,
+    FaIconComponent,
+    MatMenu,
+    MatGridList,
+    MatGridTile,
+    MatMenuItem
+  ]
 })
 export class ThemePickerComponent implements OnInit {
   /** Default theme for the application. */

src/app/shared/theme-toggle/theme-toggle.component.ts

@@ -1,11 +1,19 @@
 import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ThemingService } from './theming.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-theme-toggle',
   templateUrl: './theme-toggle.component.html',
-  styleUrls: ['./theme-toggle.component.scss']
+  styleUrls: ['./theme-toggle.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatIconButton,
+    MatIcon
+  ]
 })
 export class ThemeToggleComponent implements OnInit, OnChanges {
   darkModeOn: boolean;

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.ts

@@ -1,10 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { PaymentDetail } from './payment-detail-model';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-transaction-payment-detail',
   templateUrl: './transaction-payment-detail.component.html',
-  styleUrls: ['./transaction-payment-detail.component.scss']
+  styleUrls: ['./transaction-payment-detail.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class TransactionPaymentDetailComponent {
   @Input() paymentDetailData: PaymentDetail;