Refactor profile and alert components for cleaner templates

Simplified the HTML structure of manage-profile and page-alert-container components by reducing unnecessary markup and improving readability. Replaced Angular animation usage in manage-profile with a CSS-based fade-in effect for better maintainability.

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

@@ -5,61 +5,47 @@
       <div class="col-12 col-md-3">
         <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
           @if (!hideChangePasswordTab && (profile$ | async)) {
-            <li class="nav-item" (click)="selectedTab = 0">
+          <li class="nav-item" (click)="selectedTab = 0">
-              <a
+            <a class="nav-link" [class.active]="selectedTab === 0" role="tab" href="javascript:void(0)">{{
-                class="nav-link"
+              'AbpUi::ChangePassword' | abpLocalization }}</a>
-                [class.active]="selectedTab === 0"
+          </li>
-                role="tab"
-                href="javascript:void(0)"
-                >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
-              >
-            </li>
           }
           <li class="nav-item mb-2" (click)="selectedTab = 1">
-            <a
+            <a class="nav-link" [class.active]="selectedTab === 1" role="tab" href="javascript:void(0)">{{
-              class="nav-link"
+              'AbpAccount::PersonalSettings' | abpLocalization }}</a>
-              [class.active]="selectedTab === 1"
-              role="tab"
-              href="javascript:void(0)"
-              >{{ 'AbpAccount::PersonalSettings' | abpLocalization }}</a
-            >
           </li>
         </ul>
       </div>
       @if (profile$ | async) {
-        <div class="col-12 col-md-9">
+      <div class="col-12 col-md-9">
-          @if (selectedTab === 0) {
+        @if (selectedTab === 0) {
-            <div class="tab-content" [@fadeIn]>
+        <div class="tab-content fade-in">
-              <div class="tab-pane active" role="tabpanel">
+          <div class="tab-pane active" role="tabpanel">
-                <h4>
+            <h4>
-                  {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
+              {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
-                  <hr />
+              <hr />
-                </h4>
+            </h4>
-                <abp-change-password-form
+            <abp-change-password-form *abpReplaceableTemplate="{
-                  *abpReplaceableTemplate="{
                     componentKey: changePasswordKey
-                  }"
+                  }"></abp-change-password-form>
-                ></abp-change-password-form>
+          </div>
-              </div>
+        </div>
-            </div>
+        }
-          }
+        @if (selectedTab === 1) {
-          @if (selectedTab === 1) {
+        <div class="tab-content fade-in">
-            <div class="tab-content" [@fadeIn]>
+          <div class="tab-pane active" role="tabpanel">
-              <div class="tab-pane active" role="tabpanel">
+            <h4>
-                <h4>
+              {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
-                  {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
+              <hr />
-                  <hr />
+            </h4>
-                </h4>
+            <abp-personal-settings-form *abpReplaceableTemplate="{
-                <abp-personal-settings-form
-                  *abpReplaceableTemplate="{
                     componentKey: personalSettingsKey
-                  }"
+                  }"></abp-personal-settings-form>
-                ></abp-personal-settings-form>
+          </div>
-              </div>
-            </div>
-          }
         </div>
+        }
+      </div>
       }
     </div>
   </div>
-</div>
+</div>

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

@@ -1,6 +1,5 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
-import { fadeIn, LoadingDirective } from '@abp/ng.theme.shared';
+import { LoadingDirective } from '@abp/ng.theme.shared';
-import { transition, trigger, useAnimation } from '@angular/animations';
 import { Component, inject, OnInit } from '@angular/core';
 import { eAccountComponents } from '../../enums/components';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
@@ -13,13 +12,24 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
 @Component({
   selector: 'abp-manage-profile',
   templateUrl: './manage-profile.component.html',
-  animations: [trigger('fadeIn', [transition(':enter', useAnimation(fadeIn))])],
   styles: [
-    //TODO: move static styles
     `
       .min-h-400 {
         min-height: 400px;
       }
+
+      .fade-in {
+        animation: fadeIn 350ms ease both;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
     `,
   ],
   imports: [
@@ -30,7 +40,7 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
     LocalizationPipe,
     ReplaceableTemplateDirective,
     LoadingDirective
-],
+  ],
 })
 export class ManageProfileComponent implements OnInit {
   protected profileService = inject(ProfileService);

npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html

@@ -1,26 +1,12 @@
 @for (alert of service.alerts$ | async; track i; let i = $index) {
-  <div
+<div class="alert alert-{{ alert.type }} fade show" [class.alert-dismissible]="alert.dismissible" role="alert">
-    class="alert alert-{{ alert.type }} fade show"
+  @if (alert.title) {
-    [class.alert-dismissible]="alert.dismissible" [class.fade]="alert.dismissible" [class.show]="alert.dismissible"
+  <h4 class="alert-heading" [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams">
-    role="alert"
+  </h4>
-  >
+  }
-    @if (alert.title) {
+  <span [innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams"></span>
-      <h4
+  @if (alert.dismissible) {
-        class="alert-heading"
+  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" (click)="service.remove(i)"></button>
-        [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams"
+  }
-      ></h4>
+</div>
-    }
+}
-    <span
-      [innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams"
-    ></span>
-    @if (alert.dismissible) {
-      <button
-        type="button"
-        class="btn-close"
-        data-dismiss="alert"
-        aria-label="Close"
-        (click)="service.remove(i)"
-      ></button>
-    }
-  </div>
-}