Merge pull request #10290 from abpframework/bs5-with-dev

Bs5 with dev
abpframework · Oct 15, 2021 · 45dc916 · 45dc916
2 parents 56b262d + e478942
commit 45dc916
Show file tree

Hide file tree

Showing 34 changed files with 181 additions and 150 deletions.
diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json
@@ -179,7 +179,7 @@
             "assets": ["apps/dev-app/src/favicon.ico", "apps/dev-app/src/assets"],
             "styles": [
               {
-                "input": "node_modules/@abp/ng.theme.shared/styles/bootstrap-rtl.min.css",
+                "input": "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css",
                 "inject": false,
                 "bundleName": "bootstrap-rtl.min"
               },

diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json
@@ -67,7 +67,7 @@
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
-    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^11.0.0-beta.2",
     "@ngneat/spectator": "^8.0.3",
     "@ngx-validate/core": "^0.0.13",
     "@nrwl/angular": "12.6.5",
@@ -85,7 +85,7 @@
     "@typescript-eslint/eslint-plugin": "~4.28.3",
     "@typescript-eslint/parser": "~4.28.3",
     "angular-oauth2-oidc": "^12.1.0",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^5.1.1",
     "chart.js": "^3.5.1",
     "cypress": "^7.3.0",
     "dotenv": "~10.0.0",
@@ -115,4 +115,4 @@
     "typescript": "~4.3.5",
     "zone.js": "~0.11.4"
   }
-}
+}
diff --git a/...-packs/packages/account/src/lib/components/change-password/change-password.component.html b/...-packs/packages/account/src/lib/components/change-password/change-password.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn" validateOnSubmit>
-  <div *ngIf="!hideCurrentPassword" class="form-group">
-    <label for="current-password">{{
+  <div *ngIf="!hideCurrentPassword" class="mb-3 form-group">
+    <label for="current-password" class="form-label">{{
       'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization
     }}</label
     ><span> * </span
@@ -13,8 +13,10 @@
       autocomplete="current-password"
     />
   </div>
-  <div class="form-group">
-    <label for="new-password">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="new-password" class="form-label">{{
+      'AbpIdentity::DisplayName:NewPassword' | abpLocalization
+    }}</label
     ><span> * </span
     ><input
       type="password"
@@ -24,8 +26,8 @@
       autocomplete="new-password"
     />
   </div>
-  <div class="form-group">
-    <label for="confirm-new-password">{{
+  <div class="mb-3 form-group">
+    <label for="confirm-new-password" class="form-label">{{
       'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization
     }}</label
     ><span> * </span

diff --git a/...-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html b/...-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html
@@ -7,8 +7,10 @@ <h4>{{ 'AbpAccount::ForgotPassword' | abpLocalization }}</h4>
   validateOnSubmit
 >
   <p>{{ 'AbpAccount::SendPasswordResetLink_Information' | abpLocalization }}</p>
-  <div class="form-group">
-    <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="input-email-address" class="form-label">{{
+      'AbpAccount::EmailAddress' | abpLocalization
+    }}</label
     ><span> * </span>
     <input type="email" id="input-email-address" class="form-control" formControlName="email" />
   </div>
@@ -22,7 +24,7 @@ <h4>{{ 'AbpAccount::ForgotPassword' | abpLocalization }}</h4>
     {{ 'AbpAccount::Submit' | abpLocalization }}
   </abp-button>
   <a routerLink="/account/login"
-    ><i class="fa fa-long-arrow-left mr-1"></i>{{ 'AbpAccount::Login' | abpLocalization }}</a
+    ><i class="fa fa-long-arrow-left me-1"></i>{{ 'AbpAccount::Login' | abpLocalization }}</a
   >
 </form>
 
@@ -33,7 +35,7 @@ <h4>{{ 'AbpAccount::ForgotPassword' | abpLocalization }}</h4>
 
   <a routerLink="/account/login">
     <button class="d-block mt-2 mb-3 btn btn-primary btn-block">
-      <i class="fa fa-long-arrow-left mr-1"></i>
+      <i class="fa fa-long-arrow-left me-1"></i>
       {{ 'AbpAccount::BackToLogin' | abpLocalization }}
     </button>
   </a>

diff --git a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html b/npm/ng-packs/packages/account/src/lib/components/login/login.component.html
@@ -6,8 +6,8 @@ <h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
   }}</a>
 </strong>
 <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
-  <div class="form-group">
-    <label for="login-input-user-name-or-email-address">{{
+  <div class="mb-3 form-group">
+    <label for="login-input-user-name-or-email-address" class="form-label">{{
       'AbpAccount::UserNameOrEmailAddress' | abpLocalization
     }}</label>
     <input
@@ -19,8 +19,8 @@ <h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
       autofocus
     />
   </div>
-  <div class="form-group">
-    <label for="login-input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label>
+  <div class="mb-3 form-group">
+    <label for="login-input-password" class="form-label">{{ 'AbpAccount::Password' | abpLocalization }}</label>
     <input
       class="form-control"
       type="password"
@@ -32,17 +32,19 @@ <h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
 
   <div class="row">
     <div class="col">
-      <label class="custom-checkbox custom-control mb-2" for="login-input-remember-me">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          id="login-input-remember-me"
-          formControlName="rememberMe"
-        />
-        {{ 'AbpAccount::RememberMe' | abpLocalization }}
-      </label>
+      <div class="form-check">
+        <label class="form-check-label mb-2" for="login-input-remember-me">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="login-input-remember-me"
+            formControlName="rememberMe"
+          />
+          {{ 'AbpAccount::RememberMe' | abpLocalization }}
+        </label>
+      </div>
     </div>
-    <div class="text-right col">
+    <div class="text-end col">
       <a routerLink="/account/forgot-password">{{
         'AbpAccount::ForgotPassword' | abpLocalization
       }}</a>

diff --git a/...ks/packages/account/src/lib/components/personal-settings/personal-settings.component.html b/...ks/packages/account/src/lib/components/personal-settings/personal-settings.component.html
@@ -1,6 +1,8 @@
 <form validateOnSubmit *ngIf="form" [formGroup]="form" (ngSubmit)="submit()">
-  <div class="form-group">
-    <label for="username">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="username" class="form-label">{{
+      'AbpIdentity::DisplayName:UserName' | abpLocalization
+    }}</label
     ><span> * </span
     ><input
       type="text"
@@ -13,25 +15,33 @@
   </div>
   <div class="row">
     <div class="col col-md-6">
-      <div class="form-group">
-        <label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label
+      <div class="mb-3 form-group">
+        <label for="name" class="form-label">{{
+          'AbpIdentity::DisplayName:Name' | abpLocalization
+        }}</label
         ><input type="text" id="name" class="form-control" formControlName="name" />
       </div>
     </div>
     <div class="col col-md-6">
-      <div class="form-group">
-        <label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label
+      <div class="mb-3 form-group">
+        <label for="surname" class="form-label">{{
+          'AbpIdentity::DisplayName:Surname' | abpLocalization
+        }}</label
         ><input type="text" id="surname" class="form-control" formControlName="surname" />
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <label for="email-address">{{ 'AbpIdentity::DisplayName:Email' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="email-address" class="form-label">{{
+      'AbpIdentity::DisplayName:Email' | abpLocalization
+    }}</label
     ><span> * </span
     ><input type="text" id="email-address" class="form-control" formControlName="email" />
   </div>
-  <div class="form-group">
-    <label for="phone-number">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="phone-number" class="form-label">{{
+      'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization
+    }}</label
     ><input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
   </div>
   <abp-button

diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
@@ -12,8 +12,10 @@ <h4>{{ 'AbpAccount::Register' | abpLocalization }}</h4>
   validateOnSubmit
   class="mt-4"
 >
-  <div class="form-group">
-    <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="input-user-name" class="form-label">{{
+      'AbpAccount::UserName' | abpLocalization
+    }}</label
     ><span> * </span
     ><input
       autofocus
@@ -24,13 +26,17 @@ <h4>{{ 'AbpAccount::Register' | abpLocalization }}</h4>
       autocomplete="username"
     />
   </div>
-  <div class="form-group">
-    <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="input-email-address" class="form-label">{{
+      'AbpAccount::EmailAddress' | abpLocalization
+    }}</label
     ><span> * </span
     ><input type="email" id="input-email-address" class="form-control" formControlName="email" />
   </div>
-  <div class="form-group">
-    <label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="input-password" class="form-label">{{
+      'AbpAccount::Password' | abpLocalization
+    }}</label
     ><span> * </span
     ><input
       type="password"

diff --git a/...ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.html b/...ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.html
@@ -8,13 +8,17 @@ <h4>{{ 'AbpAccount::ResetPassword' | abpLocalization }}</h4>
   validateOnSubmit
 >
   <p>{{ 'AbpAccount::ResetPassword_Information' | abpLocalization }}</p>
-  <div class="form-group">
-    <label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="input-password" class="form-label">{{
+      'AbpAccount::Password' | abpLocalization
+    }}</label
     ><span> * </span>
     <input type="password" id="input-password" class="form-control" formControlName="password" />
   </div>
-  <div class="form-group">
-    <label for="input-confirm-password">{{ 'AbpAccount::ConfirmPassword' | abpLocalization }}</label
+  <div class="mb-3 form-group">
+    <label for="input-confirm-password" class="form-label">{{
+      'AbpAccount::ConfirmPassword' | abpLocalization
+    }}</label
     ><span> * </span>
     <input
       type="password"
@@ -23,12 +27,12 @@ <h4>{{ 'AbpAccount::ResetPassword' | abpLocalization }}</h4>
       formControlName="confirmPassword"
     />
   </div>
-  <button class="mr-2 btn btn-secondary" type="button" routerLink="/account/login">
+  <button class="me-2 btn btn-secondary" type="button" routerLink="/account/login">
     {{ 'AbpAccount::Cancel' | abpLocalization }}
   </button>
   <abp-button
     buttonType="submit"
-    buttonClass="mr-2 btn btn-primary"
+    buttonClass="me-2 btn btn-primary"
     [loading]="inProgress"
     (click)="onSubmit()"
   >

diff --git a/npm/ng-packs/packages/components/page/src/page.component.html b/npm/ng-packs/packages/components/page/src/page.component.html
@@ -26,7 +26,7 @@ <h1 class="content-header-title">
 
 <ng-template #defaultBreadcrumbTemplate>
   <ng-container *ngIf="breadcrumbVisible">
-    <div class="col-lg-auto pl-lg-0" *abpPagePart="pageParts.breadcrumb">
+    <div class="col-lg-auto ps-lg-0" *abpPagePart="pageParts.breadcrumb">
       <abp-breadcrumb></abp-breadcrumb>
     </div>
   </ng-container>

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -36,7 +36,7 @@
       <div
         #dropdown="ngbDropdown"
         *ngIf="menu"
-        class="d-inline-block ml-1"
+        class="d-inline-block ms-1"
         ngbDropdown
         placement="bottom"
         container="body"

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss
@@ -20,7 +20,7 @@
     display: inline-block;
     margin: 0;
     padding: 0 5px;
-    line-height: 24px;
+    line-height: 30px;
     text-decoration: none;
     vertical-align: top;
     border-radius: 2px;

diff --git a/...eature-management/src/lib/components/feature-management/feature-management.component.html b/...eature-management/src/lib/components/feature-management/feature-management.component.html
@@ -30,16 +30,16 @@ <h4>{{ selectedGroupDisplayName }}</h4>
                 (keyup.enter)="save()"
               >
                 <ng-container *ngSwitchCase="valueTypes.ToggleStringValueType">
-                  <div class="custom-checkbox custom-control">
+                  <div class="form-check">
                     <input
-                      class="custom-control-input"
+                      class="form-check-input"
                       type="checkbox"
                       [id]="feature.name"
                       [(ngModel)]="feature.value"
                       (ngModelChange)="onCheckboxClick($event, feature)"
                     />
 
-                    <label class="custom-control-label" [htmlFor]="feature.name">{{
+                    <label class="form-check-label" [htmlFor]="feature.name">{{
                       feature.displayName
                     }}</label>
                     <ng-container
@@ -48,8 +48,10 @@ <h4>{{ selectedGroupDisplayName }}</h4>
                   </div>
                 </ng-container>
                 <ng-container *ngSwitchCase="valueTypes.FreeTextStringValueType">
-                  <div class="form-group">
-                    <label [htmlFor]="feature.name">{{ feature.displayName }}</label>
+                  <div class="mb-3 form-group">
+                    <label [htmlFor]="feature.name" class="form-label">{{
+                      feature.displayName
+                    }}</label>
                     <input
                       class="form-control"
                       type="text"
@@ -65,13 +67,11 @@ <h4>{{ selectedGroupDisplayName }}</h4>
                 </ng-container>
                 <ng-container *ngSwitchCase="valueTypes.SelectionStringValueType">
                   <ng-container *ngIf="feature.valueType.itemSource?.items?.length">
-                    <div class="form-group">
-                      <label [htmlFor]="feature.name">{{ feature.displayName }}</label>
-                      <select
-                        class="form-control custom-select"
-                        [id]="feature.name"
-                        [(ngModel)]="feature.value"
-                      >
+                    <div class="mb-3 form-group">
+                      <label [htmlFor]="feature.name" class="form-label">{{
+                        feature.displayName
+                      }}</label>
+                      <select class="form-select" [id]="feature.name" [(ngModel)]="feature.value">
                         <option
                           *ngFor="
                             let item of feature.valueType.itemSource?.items;
@@ -99,7 +99,7 @@ <h4>{{ selectedGroupDisplayName }}</h4>
       </div>
 
       <ng-template #descTmp let-description>
-        <small *ngIf="description" class="form-text text-muted">{{ description }}</small>
+        <small *ngIf="description" class="d-block form-text text-muted">{{ description }}</small>
       </ng-template>
 
       <div class="col-md-8"><div [ngbNavOutlet]="nav"></div></div>

diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -4,7 +4,7 @@
       <div class="col col-md-6">
         <h5 class="card-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h5>
       </div>
-      <div class="text-right col col-md-6">
+      <div class="text-end col col-md-6">
         <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
       </div>
     </div>