fix: manage profile animations

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html

@@ -13,7 +13,7 @@
     ><span> * </span
     ><input type="password" id="confirm-new-password" class="form-control" formControlName="repeatNewPassword" />
   </div>
-  <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" (click)="onSubmit()">{{
+  <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" buttonType="submit">{{
     'AbpIdentity::Save' | abpLocalization
   }}</abp-button>
 </form>

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html

@@ -21,13 +21,13 @@
       </ul>
     </div>
     <div class="col-9">
-      <div class="tab-content" *ngIf="selectedTab === 0">
+      <div class="tab-content" *ngIf="selectedTab === 0" [@fadeIn]>
-        <div class="tab-pane fade show active" role="tabpanel">
+        <div class="tab-pane active" role="tabpanel">
           <abp-change-password-form></abp-change-password-form>
         </div>
       </div>
-      <div class="tab-content" *ngIf="selectedTab === 1">
+      <div class="tab-content" *ngIf="selectedTab === 1" [@fadeIn]>
-        <div class="tab-pane fade show active" role="tabpanel">
+        <div class="tab-pane active" role="tabpanel">
           <abp-personal-settings-form></abp-personal-settings-form>
         </div>
       </div>

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts

@@ -1,13 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { fadeIn } from '@abp/ng.theme.shared';
+import { transition, trigger, useAnimation } from '@angular/animations';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'abp-manage-profile',
   templateUrl: './manage-profile.component.html',
+  animations: [trigger('fadeIn', [transition(':enter', useAnimation(fadeIn))])],
 })
-export class ManageProfileComponent implements OnInit {
+export class ManageProfileComponent {
   selectedTab = 0;
-
-  constructor() {}
-
-  ngOnInit(): void {}
 }

npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts

@@ -1,4 +1,5 @@
+export * from './bounce.animations';
 export * from './collapse.animations';
 export * from './fade.animations';
+export * from './modal.animations';
 export * from './slide.animations';
-export * from './bounce.animations';

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

@@ -1,7 +1,7 @@
 import { transition, trigger, useAnimation } from '@angular/animations';
-import { fadeIn, fadeInDown, fadeOut } from '../../animations/fade.animations';
+import { fadeIn, fadeInDown, fadeOut } from './fade.animations';
 
-export const backdropAnimation = trigger('backdrop', [
+export const fadeAnimation = trigger('fade', [
   transition(':enter', useAnimation(fadeIn)),
   transition(':leave', useAnimation(fadeOut)),
 ]);

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

@@ -1,6 +1,6 @@
 <ng-container *ngIf="visible">
   <div class="modal show {{ modalClass }}" tabindex="-1" role="dialog">
-    <div class="modal-backdrop" [@backdrop]="isModalOpen" (click)="close()"></div>
+    <div class="modal-backdrop" [@fade]="isModalOpen" (click)="close()"></div>
     <div
       id="abp-modal-dialog"
       class="modal-dialog modal-{{ size }}"

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

@@ -16,14 +16,14 @@ import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { Toaster } from '../../models/toaster';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { ButtonComponent } from '../button/button.component';
-import { backdropAnimation, dialogAnimation } from './modal.animations';
+import { fadeAnimation, dialogAnimation } from '../../animations/modal.animations';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 @Component({
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
-  animations: [backdropAnimation, dialogAnimation],
+  animations: [fadeAnimation, dialogAnimation],
 })
 export class ModalComponent implements OnDestroy {
   @Input()