refactor : migrate theme-shared package to inject() DI

npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -6,7 +6,7 @@ import {
   SubscriptionService,
   TreeNode,
 } from '@abp/ng.core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { map, startWith } from 'rxjs/operators';
 import { eThemeSharedRouteNames } from '../../enums/route-names';
@@ -20,15 +20,13 @@ import { BreadcrumbItemsComponent } from '../breadcrumb-items/breadcrumb-items.c
   imports: [BreadcrumbItemsComponent],
 })
 export class BreadcrumbComponent implements OnInit {
-  segments: Partial<ABP.Route>[] = [];
+  readonly cdRef = inject(ChangeDetectorRef);
+  private router = inject(Router);
+  private routes = inject(RoutesService);
+  private subscription = inject(SubscriptionService);
+  private routerEvents = inject(RouterEvents);
 
-  constructor(
-    public readonly cdRef: ChangeDetectorRef,
-    private router: Router,
-    private routes: RoutesService,
-    private subscription: SubscriptionService,
-    private routerEvents: RouterEvents,
-  ) {}
+  segments: Partial<ABP.Route>[] = [];
 
   ngOnInit(): void {
     this.subscription.addOne(

npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts

@@ -1,13 +1,14 @@
 /* eslint-disable @angular-eslint/no-output-native */
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  Renderer2,
-  ViewChild,
+import { 
+  Component, 
+  ElementRef, 
+  EventEmitter, 
+  Input, 
+  OnInit, 
+  Output, 
+  Renderer2, 
+  ViewChild, 
+  inject 
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ABP } from '@abp/ng.core';
@@ -32,6 +33,8 @@ import { ABP } from '@abp/ng.core';
   imports: [CommonModule],
 })
 export class ButtonComponent implements OnInit {
+  private renderer = inject(Renderer2);
+
   @Input()
   buttonId = '';
 
@@ -75,8 +78,6 @@ export class ButtonComponent implements OnInit {
     return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass || 'd-none'}`;
   }
 
-  constructor(private renderer: Renderer2) {}
-
   ngOnInit() {
     if (this.attributes) {
       Object.keys(this.attributes).forEach(key => {

npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReplaySubject } from 'rxjs';
 import { Confirmation } from '../../models/confirmation';
@@ -12,7 +12,8 @@ import { LocalizationPipe } from '@abp/ng.core';
   imports: [CommonModule, LocalizationPipe],
 })
 export class ConfirmationComponent {
-  constructor(@Inject(CONFIRMATION_ICONS) private icons: ConfirmationIcons) {}
+  private icons = inject<ConfirmationIcons>(CONFIRMATION_ICONS);
+
 
   confirm = Confirmation.Status.confirm;
   reject = Confirmation.Status.reject;

npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { combineLatest, Subscription, timer } from 'rxjs';
@@ -24,6 +24,12 @@ import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng
   imports: [CommonModule],
 })
 export class LoaderBarComponent implements OnDestroy, OnInit {
+  private router = inject(Router);
+  private cdRef = inject(ChangeDetectorRef);
+  private subscription = inject(SubscriptionService);
+  private httpWaitService = inject(HttpWaitService);
+  private routerWaitService = inject(RouterWaitService);
+
   protected _isLoading!: boolean;
 
   @Input()
@@ -73,14 +79,6 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
     return `0 0 10px rgba(${this.color}, 0.5)`;
   }
 
-  constructor(
-    private router: Router,
-    private cdRef: ChangeDetectorRef,
-    private subscription: SubscriptionService,
-    private httpWaitService: HttpWaitService,
-    private routerWaitService: RouterWaitService,
-  ) {}
-
   ngOnInit() {
     this.subscribeLoading();
   }

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-close.directive.ts

@@ -1,11 +1,15 @@
-import { Directive, HostListener, Optional } from '@angular/core';
+import { Directive, HostListener, inject } from '@angular/core';
 import { ModalComponent } from './modal.component';
 
 @Directive({
   selector: '[abpClose]',
 })
 export class ModalCloseDirective {
-  constructor(@Optional() private modal: ModalComponent) {
+  private modal = inject(ModalComponent, { optional: true })!;
+
+  constructor() {
+    const modal = this.modal;
+
     if (!modal) {
       console.error('Please use abpClose within an abp-modal');
     }

npm/ng-packs/packages/theme-shared/src/lib/directives/disabled.directive.ts

@@ -1,15 +1,15 @@
-import { Directive, Host, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Directive, Input, OnChanges, SimpleChanges, inject } from '@angular/core';
 import { NgControl } from '@angular/forms';
 
 @Directive({
   selector: '[abpDisabled]',
 })
 export class DisabledDirective implements OnChanges {
+  private ngControl = inject(NgControl, { host: true });
+
   @Input()
   abpDisabled = false;
 
-  constructor(@Host() private ngControl: NgControl) {}
-
   // Related issue: https://github.com/angular/angular/issues/35330
   ngOnChanges({ abpDisabled }: SimpleChanges) {
     if (this.ngControl.control && abpDisabled) {

npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts

@@ -1,17 +1,21 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Directive,
-  ElementRef,
-  HostBinding,
-  Input,
-  NgModule,
+import { 
+  AfterViewInit, 
+  ChangeDetectorRef, 
+  Directive, 
+  ElementRef, 
+  HostBinding, 
+  Input, 
+  NgModule, 
+  inject 
 } from '@angular/core';
 
 @Directive({
   selector: '[abpEllipsis]',
 })
 export class EllipsisDirective implements AfterViewInit {
+  private cdRef = inject(ChangeDetectorRef);
+  private elRef = inject(ElementRef);
+
   @Input('abpEllipsis')
   width?: string;
 
@@ -37,11 +41,6 @@ export class EllipsisDirective implements AfterViewInit {
     return this.enabled && this.width ? this.width || '170px' : undefined;
   }
 
-  constructor(
-    private cdRef: ChangeDetectorRef,
-    private elRef: ElementRef,
-  ) {}
-
   ngAfterViewInit() {
     this.title = this.title || (this.elRef.nativeElement as HTMLElement).innerText;
     this.cdRef.detectChanges();

npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts

@@ -1,16 +1,17 @@
-import {
-  ComponentFactoryResolver,
-  ComponentRef,
-  Directive,
-  ElementRef,
-  EmbeddedViewRef,
-  HostBinding,
-  Injector,
-  Input,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-  ViewContainerRef,
+import { 
+  ComponentFactoryResolver, 
+  ComponentRef, 
+  Directive, 
+  ElementRef, 
+  EmbeddedViewRef, 
+  HostBinding, 
+  Injector, 
+  Input, 
+  OnDestroy, 
+  OnInit, 
+  Renderer2, 
+  ViewContainerRef, 
+  inject 
 } from '@angular/core';
 import { Subscription, timer } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -20,6 +21,12 @@ import { LoadingComponent } from '../components';
   selector: '[abpLoading]',
 })
 export class LoadingDirective implements OnInit, OnDestroy {
+  private elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private vcRef = inject(ViewContainerRef);
+  private cdRes = inject(ComponentFactoryResolver);
+  private injector = inject(Injector);
+  private renderer = inject(Renderer2);
+
   private _loading!: boolean;
 
   @HostBinding('style.position')
@@ -77,14 +84,6 @@ export class LoadingDirective implements OnInit, OnDestroy {
   rootNode: HTMLDivElement | null = null;
   timerSubscription: Subscription | null = null;
 
-  constructor(
-    private elRef: ElementRef<HTMLElement>,
-    private vcRef: ViewContainerRef,
-    private cdRes: ComponentFactoryResolver,
-    private injector: Injector,
-    private renderer: Renderer2,
-  ) {}
-
   ngOnInit() {
     if (!this.targetElement) {
       const { offsetHeight, offsetWidth } = this.elRef.nativeElement;

npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts

@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { AfterViewInit, Directive, HostBinding, Inject, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, HostBinding, Input, OnDestroy, inject } from '@angular/core';
 import { ColumnMode, DatatableComponent, ScrollerComponent } from '@swimlane/ngx-datatable';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -10,6 +10,9 @@ import { debounceTime } from 'rxjs/operators';
   exportAs: 'ngxDatatableDefault',
 })
 export class NgxDatatableDefaultDirective implements AfterViewInit, OnDestroy {
+  private table = inject(DatatableComponent);
+  private document = inject<MockDocument>(DOCUMENT);
+
   private subscription = new Subscription();
   private resizeDiff = 0;
 
@@ -20,10 +23,7 @@ export class NgxDatatableDefaultDirective implements AfterViewInit, OnDestroy {
     return `ngx-datatable ${this.class}`;
   }
 
-  constructor(
-    private table: DatatableComponent,
-    @Inject(DOCUMENT) private document: MockDocument,
-  ) {
+  constructor() {
     this.table.columnMode = ColumnMode.force;
     this.table.footerHeight = 50;
     this.table.headerHeight = 50;

npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts

@@ -1,10 +1,13 @@
-import { OnInit, Directive, OnDestroy, Input, ViewContainerRef, TemplateRef } from '@angular/core';
+import { OnInit, Directive, OnDestroy, Input, ViewContainerRef, TemplateRef, inject } from '@angular/core';
 import { EMPTY, from, Observable, of, Subscription } from 'rxjs';
 
 @Directive({
   selector: '[abpVisible]',
 })
 export class AbpVisibleDirective implements OnDestroy, OnInit {
+  private viewContainerRef = inject(ViewContainerRef);
+  private templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+
   conditionSubscription: Subscription | undefined;
   isVisible: boolean | undefined;
 
@@ -16,11 +19,6 @@ export class AbpVisibleDirective implements OnDestroy, OnInit {
   }
 
   private condition$: Observable<boolean> = of(false);
-
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private templateRef: TemplateRef<unknown>,
-  ) {}
   ngOnInit(): void {
     this.updateVisibility();
   }

npm/ng-packs/packages/theme-shared/src/lib/handlers/document-dir.handler.ts

@@ -1,14 +1,16 @@
 import { getLocaleDirection, LocalizationService } from '@abp/ng.core';
-import { Injectable, Injector } from '@angular/core';
+import { Injectable, Injector, inject } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { LocaleDirection } from '../models/common';
 
 @Injectable()
 export class DocumentDirHandlerService {
+  protected injector = inject(Injector);
+
   private dir = new BehaviorSubject<LocaleDirection>('ltr');
   dir$ = this.dir.asObservable();
-  constructor(protected injector: Injector) {
+  constructor() {
     this.listenToLanguageChanges();
   }
 

npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts

@@ -17,6 +17,8 @@ import { RouterErrorHandlerService } from '../services/router-error-handler.serv
 
 @Injectable({ providedIn: 'root' })
 export class ErrorHandler {
+  protected injector = inject(Injector);
+
   protected readonly httpErrorReporter = inject(HttpErrorReporterService);
   protected readonly confirmationService = inject(ConfirmationService);
   protected readonly routerErrorHandlerService = inject(RouterErrorHandlerService);
@@ -24,7 +26,7 @@ export class ErrorHandler {
   protected readonly customErrorHandlers = inject(CUSTOM_ERROR_HANDLERS);
   protected readonly httpErrorHandler = inject(HTTP_ERROR_HANDLER, { optional: true });
 
-  constructor(protected injector: Injector) {
+  constructor() {
     this.listenToRestError();
     this.listenToRouterError();
   }

npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts

@@ -1,5 +1,5 @@
 import { ContentProjectionService, LocalizationParam, PROJECTION_STRATEGY } from '@abp/ng.core';
-import { ComponentRef, Injectable } from '@angular/core';
+import { ComponentRef, Injectable, inject } from '@angular/core';
 import { fromEvent, Observable, ReplaySubject, Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { ConfirmationComponent } from '../components/confirmation/confirmation.component';
@@ -7,6 +7,8 @@ import { Confirmation } from '../models/confirmation';
 
 @Injectable({ providedIn: 'root' })
 export class ConfirmationService {
+  private contentProjectionService = inject(ContentProjectionService);
+
   status$!: Subject<Confirmation.Status>;
   confirmation$ = new ReplaySubject<Confirmation.DialogData | null>(1);
 
@@ -17,8 +19,6 @@ export class ConfirmationService {
     this.status$.next(status);
   };
 
-  constructor(private contentProjectionService: ContentProjectionService) {}
-
   private setContainer() {
     this.containerComponentRef = this.contentProjectionService.projectContent(
       PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent, {

npm/ng-packs/packages/theme-shared/src/lib/utils/date-parser-formatter.ts

@@ -1,6 +1,6 @@
 import { ApplicationLocalizationConfigurationDto, ConfigStateService } from '@abp/ng.core';
 import { formatDate } from '@angular/common';
-import { Inject, Injectable, LOCALE_ID } from '@angular/core';
+import { Injectable, LOCALE_ID, inject } from '@angular/core';
 import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 
 function isNumber(value: any): boolean {
@@ -13,9 +13,9 @@ function toInteger(value: any): number {
 
 @Injectable()
 export class DateParserFormatter extends NgbDateParserFormatter {
-  constructor(private configState: ConfigStateService, @Inject(LOCALE_ID) private locale: string) {
-    super();
-  }
+  private configState = inject(ConfigStateService);
+  private locale = inject(LOCALE_ID);
+
 
   parse(value: string): NgbDateStruct | null {
     if (value) {