update: some upgrade enhancements for the theme-shared

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

@@ -1,9 +1,10 @@
-import { Component, input } from '@angular/core';
+import {Component, input, ChangeDetectionStrategy,} from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { ABP, AbpRouteCultureUrlPipe, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-breadcrumb-items',
   templateUrl: './breadcrumb-items.component.html',
   imports: [NgTemplateOutlet, RouterLink, LocalizationPipe, AbpRouteCultureUrlPipe],

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

@@ -10,10 +10,12 @@ import {
   output,
   signal,
   viewChild,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { ABP, StopPropagationDirective } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-button',
   template: `
     <button

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

@@ -1,6 +1,7 @@
-import { Component, HostBinding, input } from '@angular/core';
+import { Component, HostBinding, input, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-card-body',
   template: ` <div [class]="cardBodyClass()" [style]="cardBodyStyle()">
     <ng-content></ng-content>

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

@@ -1,6 +1,7 @@
-import { Component, HostBinding, input } from '@angular/core';
+import {Component, HostBinding, input, ChangeDetectionStrategy,} from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-card-footer',
   template: `
     <div [style]="cardFooterStyle()" [class]="cardFooterClass()">

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

@@ -1,6 +1,7 @@
-import { Component, HostBinding, input } from '@angular/core';
+import {Component, HostBinding, input, ChangeDetectionStrategy,} from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-card-header',
   template: `
     <div [class]="cardHeaderClass()" [style]="cardHeaderStyle()">

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

@@ -1,6 +1,7 @@
-import { Component, input } from '@angular/core';
+import {Component, input, ChangeDetectionStrategy,} from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-card',
   template: ` <div class="card" [class]="cardClass()" [style]="cardStyle()">
     <ng-content></ng-content>

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

@@ -1,8 +1,9 @@
-import { Component, forwardRef, input, output } from '@angular/core';
+import {Component, forwardRef, input, output, ChangeDetectionStrategy,} from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-checkbox',
   template: `
     <div class="mb-3">

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

@@ -1,11 +1,12 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import {Component, inject, ChangeDetectionStrategy,} from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { Confirmation } from '../../models/confirmation';
 import { CONFIRMATION_ICONS, ConfirmationIcons } from '../../tokens/confirmation-icons.token';
 import { LocalizationPipe } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-confirmation',
   templateUrl: './confirmation.component.html',
   styleUrls: ['./confirmation.component.scss'],

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

@@ -1,8 +1,9 @@
-import { Component, forwardRef, input, output } from '@angular/core';
+import {Component, forwardRef, input, output, ChangeDetectionStrategy,} from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-form-input',
   template: `
     <div class="mb-3">

npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts

@@ -1,5 +1,4 @@
-import {
+import {ApplicationRef,
-  ApplicationRef,
   Component,
   inject,
   OnInit,
@@ -11,8 +10,7 @@ import {
   createComponent,
   EnvironmentInjector,
   DestroyRef,
-  viewChild
+  viewChild, ChangeDetectionStrategy,} from '@angular/core';
-} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
 import { Router } from '@angular/router';
@@ -22,6 +20,7 @@ import { LocalizationParam, LocalizationPipe } from '@abp/ng.core';
 import { ErrorScreenErrorCodes } from '../../models';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-http-error-wrapper',
   templateUrl: './http-error-wrapper.component.html',
   styleUrls: ['http-error-wrapper.component.scss'],

npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts

@@ -1,8 +1,9 @@
-import { Component, inject } from '@angular/core';
+import {Component, inject, ChangeDetectionStrategy,} from '@angular/core';
 import { InternetConnectionService, LocalizationPipe } from '@abp/ng.core';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-internet-status',
   imports: [LocalizationPipe, NgbTooltip],
   template: `

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

@@ -1,15 +1,25 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit, inject, input, effect, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+  signal,
+} from '@angular/core';
 import { combineLatest, Subscription, timer } from 'rxjs';
 import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-loader-bar',
   template: `
     <div id="abp-loader-bar" [class]="containerClass()" [class.is-loading]="isLoading()">
       <div
         class="abp-progress"
-        [class.progressing]="progressLevel"
+        [class.progressing]="progressLevel() > 0"
-        [style.width.vw]="progressLevel"
+        [style.width.vw]="progressLevel()"
         [style]="{
           'background-color': color(),
           'box-shadow': boxShadow,
@@ -22,7 +32,6 @@ import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng
   imports: [],
 })
 export class LoaderBarComponent implements OnDestroy, OnInit {
-  private cdRef = inject(ChangeDetectorRef);
   private subscription = inject(SubscriptionService);
   private httpWaitService = inject(HttpWaitService);
   private routerWaitService = inject(RouterWaitService);
@@ -32,8 +41,8 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
   readonly color = input('#77b6ff');
 
   protected readonly isLoading = signal(false);
+  protected readonly progressLevel = signal(0);
 
-  progressLevel = 0;
   interval = new Subscription();
   timer = new Subscription();
   intervalPeriod = 350;
@@ -41,28 +50,25 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
 
   constructor() {
     effect(() => {
-      const value = this.isLoadingInput();
+      this.isLoading.set(this.isLoadingInput());
-      this.isLoading.set(value);
-      this.cdRef.detectChanges();
     });
   }
 
   private readonly clearProgress = () => {
-    this.progressLevel = 0;
+    this.progressLevel.set(0);
-    this.cdRef.detectChanges();
   };
 
   private readonly reportProgress = () => {
-    if (this.progressLevel < 75) {
+    const current = this.progressLevel();
-      this.progressLevel += 1 + Math.random() * 9;
+    if (current < 75) {
-    } else if (this.progressLevel < 90) {
+      this.progressLevel.set(current + 1 + Math.random() * 9);
-      this.progressLevel += 0.4;
+    } else if (current < 90) {
-    } else if (this.progressLevel < 100) {
+      this.progressLevel.set(current + 0.4);
-      this.progressLevel += 0.1;
+    } else if (current < 100) {
+      this.progressLevel.set(current + 0.1);
     } else {
       this.interval.unsubscribe();
     }
-    this.cdRef.detectChanges();
   };
 
   get boxShadow(): string {
@@ -91,8 +97,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
     if (this.isLoading() || !this.interval.closed) return;
 
     this.isLoading.set(true);
-    this.progressLevel = 0;
+    this.progressLevel.set(0);
-    this.cdRef.detectChanges();
     this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
     this.timer.unsubscribe();
   }
@@ -100,7 +105,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
   stopLoading() {
     this.interval.unsubscribe();
 
-    this.progressLevel = 100;
+    this.progressLevel.set(100);
     this.isLoading.set(false);
 
     if (!this.timer.closed) return;

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

@@ -1,6 +1,7 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import {Component, ViewEncapsulation, ChangeDetectionStrategy,} from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-loading',
   template: `
     <div class="abp-loading">

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

@@ -1,5 +1,4 @@
-import {
+import {Component,
-  Component,
   DestroyRef,
   OnDestroy,
   OnInit,
@@ -10,8 +9,7 @@ import {
   input,
   model,
   output,
-  viewChild,
+  viewChild, ChangeDetectionStrategy,} from '@angular/core';
-} from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SubscriptionService, uuid } from '@abp/ng.core';
@@ -27,6 +25,7 @@ import { DismissableModal, ModalDismissMode, ModalRefService } from './modal-ref
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
   styleUrls: ['./modal.component.scss'],

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

@@ -1,4 +1,4 @@
-import { Component, forwardRef, input } from '@angular/core';
+import {Component, forwardRef, input, ChangeDetectionStrategy,} from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { AbstractNgModelComponent } from '@abp/ng.core';
@@ -9,6 +9,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
  * https://abp.io/docs/latest/framework/ui/angular/show-password-directive
  */
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-password',
   imports: [FormsModule, NgxValidateCoreModule],
   templateUrl: `./password.component.html`,

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

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import {Component, ChangeDetectionStrategy,} from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-spinner',
   template: `
     <div class="d-flex justify-content-center align-items-center border-top" style="height: 62px">

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

@@ -1,8 +1,9 @@
-import { Component, input, OnInit, signal, effect } from '@angular/core';
+import {Component, input, OnInit, signal, effect, ChangeDetectionStrategy,} from '@angular/core';
 import { Toaster } from '../../models/toaster';
 import { ToastComponent } from '../toast/toast.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-toast-container',
   templateUrl: './toast-container.component.html',
   styleUrls: ['./toast-container.component.scss'],

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

@@ -1,8 +1,9 @@
-import { Component, OnInit, input, output } from '@angular/core';
+import {Component, OnInit, input, output, ChangeDetectionStrategy,} from '@angular/core';
 import { Toaster } from '../../models/toaster';
 import { LocalizationPipe } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-toast',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss'],