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

Bs5 with dev

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"
               },

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"
   }
-}
+}

npm/ng-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

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

@@ -7,8 +7,10 @@
   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 @@
     {{ '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 @@
 
   <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>

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

@@ -6,8 +6,8 @@
   }}</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 @@
       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 @@
 
   <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>

npm/ng-packs/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

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

@@ -12,8 +12,10 @@
   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 @@
       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"

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

@@ -8,13 +8,17 @@
   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 @@
       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()"
   >

npm/ng-packs/packages/components/page/src/page.component.html

@@ -26,7 +26,7 @@
 
 <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>

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"

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;

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html

@@ -30,16 +30,16 @@
                 (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 @@
                   </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 @@
                 </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 @@
       </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>

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>

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -4,7 +4,7 @@
       <div class="col col-md-6">
         <h5 class="card-title">{{ 'AbpIdentity::Users' | 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>
@@ -53,17 +53,15 @@
           <ng-template ngbNavContent>
             <div
               *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
-              class="custom-checkbox custom-control mb-2"
+              class="form-check mb-2"
             >
               <input
                 type="checkbox"
-                class="custom-control-input"
+                class="form-check-input"
                 [attr.id]="'roles-' + i"
                 [formControl]="roleGroup.controls[roles[i].name]"
               />
-              <label class="custom-control-label" [attr.for]="'roles-' + i">{{
-                roles[i].name
-              }}</label>
+              <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
             </div>
           </ng-template>
         </li>

npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts

@@ -17,12 +17,12 @@ export const DEFAULT_ROLES_ENTITY_PROPS = EntityProp.createMany<IdentityRoleDto>
       return of(
         name +
           (isDefault
-            ? `<span class="badge badge-pill badge-success ml-1">${t(
+            ? `<span class="badge rounded-pill bg-success ms-1">${t(
                 'AbpIdentity::DisplayName:IsDefault',
               )}</span>`
             : '') +
           (isPublic
-            ? `<span class="badge badge-pill badge-info ml-1">${t(
+            ? `<span class="badge rounded-pill bg-info ms-1">${t(
                 'AbpIdentity::DisplayName:IsPublic',
               )}</span>`
             : ''),

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html

@@ -1,4 +1,4 @@
-<abp-modal [(visible)]="visible" [busy]="modalBusy">
+<abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
   <ng-container *ngIf="data.entityDisplayName">
     <ng-template #abpHeader>
       <h4>
@@ -7,16 +7,16 @@
       </h4>
     </ng-template>
     <ng-template #abpBody>
-      <div class="custom-checkbox custom-control mb-2">
+      <div class="form-check mb-2">
         <input
           type="checkbox"
           id="select-all-in-all-tabs"
           name="select-all-in-all-tabs"
-          class="custom-control-input"
+          class="form-check-input"
           [(ngModel)]="selectAllTab"
           (click)="onClickSelectAll()"
         />
-        <label class="custom-control-label" for="select-all-in-all-tabs">{{
+        <label class="form-check-label" for="select-all-in-all-tabs">{{
           'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
         }}</label>
       </div>
@@ -43,17 +43,17 @@
         <div class="col-md-8 overflow-scroll">
           <h4>{{ selectedGroup?.displayName }}</h4>
           <hr class="mt-2 mb-3" />
-          <div class="pl-1 pt-1">
-            <div class="custom-checkbox custom-control mb-2">
+          <div class="ps-1 pt-1">
+            <div class="form-check mb-2">
               <input
                 type="checkbox"
                 id="select-all-in-this-tabs"
                 name="select-all-in-this-tabs"
-                class="custom-control-input"
+                class="form-check-input"
                 [(ngModel)]="selectThisTab"
                 (click)="onClickSelectThisTab()"
               />
-              <label class="custom-control-label" for="select-all-in-this-tabs">{{
+              <label class="form-check-label" for="select-all-in-this-tabs">{{
                 'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
               }}</label>
             </div>
@@ -61,7 +61,7 @@
             <div
               *ngFor="let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn"
               [ngStyle]="permission.style"
-              class="custom-checkbox custom-control mb-2"
+              class="form-check mb-2"
             >
               <input
                 #permissionCheckbox
@@ -69,18 +69,18 @@
                 [checked]="getChecked(permission.name)"
                 [value]="getChecked(permission.name)"
                 [attr.id]="permission.name"
-                class="custom-control-input"
+                class="form-check-input"
                 [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
               />
               <label
-                class="custom-control-label"
+                class="form-check-label"
                 [attr.for]="permission.name"
                 (click)="onClickCheckbox(permission, permissionCheckbox.value)"
                 >{{ permission.displayName }}
                 <ng-container *ngIf="!hideBadges">
                   <span
                     *ngFor="let provider of permission.grantedProviders"
-                    class="badge badge-light"
+                    class="badge bg-light text-dark"
                     >{{ provider.providerName }}: {{ provider.providerKey }}</span
                   >
                 </ng-container>

npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.html

@@ -3,42 +3,46 @@
 <hr class="my-3" />
 
 <form *ngIf="form" [formGroup]="form" (ngSubmit)="submit()" validateOnSubmit>
-  <div class="form-group">
-    <label>{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization }}</label>
+  <div class="mb-3 form-group">
+    <label class="form-label">{{
+      'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
+    }}</label>
     <input type="text" class="form-control" formControlName="defaultFromDisplayName" />
   </div>
-  <div class="form-group">
-    <label>{{ 'AbpSettingManagement::DefaultFromAddress' | abpLocalization }}</label>
+  <div class="mb-3 form-group">
+    <label class="form-label">{{
+      'AbpSettingManagement::DefaultFromAddress' | abpLocalization
+    }}</label>
     <input type="text" class="form-control" formControlName="defaultFromAddress" />
   </div>
-  <div class="form-group">
-    <label>{{ 'AbpSettingManagement::SmtpHost' | abpLocalization }}</label>
+  <div class="mb-3 form-group">
+    <label class="form-label">{{ 'AbpSettingManagement::SmtpHost' | abpLocalization }}</label>
     <input type="text" class="form-control" formControlName="smtpHost" />
   </div>
-  <div class="form-group">
-    <label>{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}</label>
+  <div class="mb-3 form-group">
+    <label class="form-label">{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}</label>
     <input type="number" class="form-control" formControlName="smtpPort" />
   </div>
 
-  <div class="custom-checkbox custom-control mb-2">
+  <div class="form-check mb-2">
     <input
       type="checkbox"
       id="smtp-enable-ssl"
-      class="custom-control-input"
+      class="form-check-input"
       formControlName="smtpEnableSsl"
     />
-    <label class="custom-control-label" for="smtp-enable-ssl">{{
+    <label class="form-check-label" for="smtp-enable-ssl">{{
       'AbpSettingManagement::SmtpEnableSsl' | abpLocalization
     }}</label>
   </div>
-  <div class="custom-checkbox custom-control mb-2">
+  <div class="form-check mb-2">
     <input
       type="checkbox"
       id="smtp-use-default-credentials"
-      class="custom-control-input"
+      class="form-check-input"
       formControlName="smtpUseDefaultCredentials"
     />
-    <label class="custom-control-label" for="smtp-use-default-credentials">{{
+    <label class="form-check-label" for="smtp-use-default-credentials">{{
       'AbpSettingManagement::SmtpUseDefaultCredentials' | abpLocalization
     }}</label>
   </div>
@@ -49,18 +53,18 @@
       params: { time: '200ms', easing: 'linear' }
     }"
   >
-    <div class="form-group">
-      <label>{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
+    <div class="mb-3 form-group">
+      <label class="form-label">{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
       <input type="text" class="form-control" formControlName="smtpDomain" />
     </div>
 
-    <div class="form-group">
-      <label>{{ 'AbpSettingManagement::SmtpUserName' | abpLocalization }}</label>
+    <div class="mb-3 form-group">
+      <label class="form-label">{{ 'AbpSettingManagement::SmtpUserName' | abpLocalization }}</label>
       <input type="text" class="form-control" formControlName="smtpUserName" />
     </div>
 
-    <div class="form-group">
-      <label>{{ 'AbpSettingManagement::SmtpPassword' | abpLocalization }}</label>
+    <div class="mb-3 form-group">
+      <label class="form-label">{{ 'AbpSettingManagement::SmtpPassword' | abpLocalization }}</label>
       <input type="text" class="form-control" formControlName="smtpPassword" />
     </div>
   </div>

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -4,7 +4,7 @@
       <div class="col col-md-6">
         <h5 class="card-title">{{ 'AbpTenantManagement::Tenants' | 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>

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.html

@@ -31,8 +31,10 @@
     <ng-template #abpBody>
       <form (ngSubmit)="service.save()">
         <div class="mt-2">
-          <div class="form-group">
-            <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
+          <div class="mb-3 form-group">
+            <label for="name" class="form-label">{{
+              'AbpUiMultiTenancy::Name' | abpLocalization
+            }}</label>
             <input
               [(ngModel)]="service.name"
               type="text"

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html

@@ -27,15 +27,15 @@
     <strong>{{ (currentUser$ | async)?.userName }}</strong>
   </a>
   <div
-    class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
+    class="dropdown-menu dropdown-menu-end border-0 shadow-sm"
     aria-labelledby="dropdownMenuLink"
     [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
   >
     <a class="dropdown-item pointer" (click)="navigateToManageProfile()"
-      ><i class="fa fa-cog mr-1"></i>{{ 'AbpAccount::MyAccount' | abpLocalization }}</a
+      ><i class="fa fa-cog me-1"></i>{{ 'AbpAccount::MyAccount' | abpLocalization }}</a
     >
     <a class="dropdown-item" href="javascript:void(0)" (click)="logout()"
-      ><i class="fa fa-power-off mr-1"></i>{{ 'AbpUi::Logout' | abpLocalization }}</a
+      ><i class="fa fa-power-off me-1"></i>{{ 'AbpUi::Logout' | abpLocalization }}</a
     >
   </div>
 </div>

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html

@@ -86,7 +86,7 @@
           abpEllipsis="210px"
           [abpEllipsisEnabled]="!smallScreen"
           role="button"
-          class="btn d-block text-left dropdown-toggle"
+          class="btn d-block text-start dropdown-toggle"
         >
           <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
           {{ child.name | abpLocalization }}
@@ -94,7 +94,7 @@
       </div>
       <div
         #childrenContainer
-        class="dropdown-menu border-0 shadow-sm"
+        class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
         [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
       >
         <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }"></ng-container>

npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts

@@ -44,6 +44,11 @@ export default `
     top: 0;
     left: 100%;
 }
+/* work around for rtl. Track https://github.com/ng-bootstrap/ng-bootstrap/issues/4100 issue */
+[dir=rtl] .navbar .dropdown-submenu .dropdown-menu {
+    top: 0;
+    right: 100%;
+}
 .card-header .btn {
     padding: 2px 6px;
 }

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -1,4 +1,4 @@
-<div class="form-group" *abpPermission="prop.permission" [ngSwitch]="getComponent(prop)">
+<div class="mb-3 form-group" *abpPermission="prop.permission" [ngSwitch]="getComponent(prop)">
   <ng-template ngSwitchCase="input">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <input
@@ -18,18 +18,18 @@
   </ng-template>
 
   <ng-template ngSwitchCase="checkbox">
-    <div class="custom-checkbox custom-control" validationTarget>
+    <div class="form-check" validationTarget>
       <input
         #field
         [id]="prop.id"
         [formControlName]="prop.name"
         [abpDisabled]="disabled"
         type="checkbox"
-        class="custom-control-input"
+        class="form-check-input"
       />
       <ng-template
         [ngTemplateOutlet]="label"
-        [ngTemplateOutletContext]="{ $implicit: 'custom-control-label' }"
+        [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }"
       ></ng-template>
     </div>
   </ng-template>
@@ -41,7 +41,7 @@
       [id]="prop.id"
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
-      class="custom-select form-control"
+      class="form-select form-control"
     >
       <option
         *ngFor="let option of options$ | async; trackBy: track.by('value')"
@@ -60,7 +60,7 @@
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
       multiple="multiple"
-      class="custom-select form-control"
+      class="form-select form-control"
     >
       <option
         *ngFor="let option of options$ | async; trackBy: track.by('value')"
@@ -132,7 +132,7 @@
 </div>
 
 <ng-template #label let-classes>
-  <label [htmlFor]="prop.id" [ngClass]="classes"
+  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'"
     >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label
   >
 </ng-template>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html

@@ -5,7 +5,7 @@
     aria-haspopup="true"
     ngbDropdownToggle
   >
-    <i [ngClass]="icon" [class.mr-1]="icon"></i>{{ text | abpLocalization }}
+    <i [ngClass]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }}
   </button>
   <div ngbDropdownMenu>
     <ng-container
@@ -33,7 +33,7 @@
       class="{{ actionList.length === 1 ? 'btn btn-primary' : '' }}"
       [class.text-center]="actionList.length === 1"
     >
-      <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+      <i [ngClass]="action.icon" [class.me-1]="action.icon"></i>
       <span *ngIf="action.icon; else ellipsis">{{ action.text | abpLocalization }}</span>
       <ng-template #ellipsis>
         <div abpEllipsis>{{ action.text | abpLocalization }}</div>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html

@@ -1,5 +1,9 @@
-<div class="row justify-content-end mx-n1" id="AbpContentToolbar">
-  <div class="col-auto px-1 pt-0 pt-md-2" *ngFor="let action of actionList; trackBy: trackByFn">
+<div class="row justify-content-end mx-0" id="AbpContentToolbar">
+  <div
+    class="col-auto px-1 pt-0 pt-md-2"
+    [class.pe-0]="last"
+    *ngFor="let action of actionList; trackBy: trackByFn; let last = last"
+  >
     <ng-container *ngIf="action.visible(data)">
       <ng-container *abpPermission="action.permission">
         <ng-container *ngIf="action.component as component; else button">
@@ -10,7 +14,7 @@
 
         <ng-template #button>
           <button (click)="action.action(data)" type="button" class="btn btn-primary btn-sm">
-            <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+            <i [ngClass]="action.icon" [class.me-1]="action.icon"></i>
             {{ action.text | abpLocalization }}
           </button>
         </ng-template>

npm/ng-packs/packages/theme-shared/ng-package.json

@@ -1,7 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/packages/theme-shared",
-  "assets": ["./styles/**/*"],
   "lib": {
     "entryFile": "src/public-api.ts"
   },

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

@@ -24,7 +24,7 @@ import {
       (focus)="focus.next($event); abpFocus.next($event)"
       (blur)="blur.next($event); abpBlur.next($event)"
     >
-      <i [ngClass]="icon" class="mr-1"></i><ng-content></ng-content>
+      <i [ngClass]="icon" class="me-1"></i><ng-content></ng-content>
     </button>
   `,
 })

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

@@ -8,7 +8,7 @@
     *ngIf="!hideCloseIcon"
     id="abp-close-button"
     type="button"
-    class="close mr-2"
+    class="close me-2"
     (click)="destroy()"
   >
     <span aria-hidden="true">&times;</span>

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

@@ -7,12 +7,10 @@
     <button
       id="abp-modal-close-button"
       type="button"
-      class="close"
+      class="btn-sm btn-close"
       aria-label="Close"
       (click)="modal.dismiss()"
-    >
-      <span aria-hidden="true">&times;</span>
-    </button>
+    ></button>
   </div>
   <div id="abp-modal-body" class="modal-body">
     <ng-container *ngTemplateOutlet="abpBody"></ng-container>

npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts

@@ -175,7 +175,9 @@ ngb-typeahead-window, ngb-typeahead-window.dropdown-menu {
 }
 
 /* </animations */
-
+.ngb-dp-body {
+  z-index: 1055 !important;
+}
 `;
 
 export const BOOTSTRAP = 'bootstrap-{{dir}}.min.css';

templates/app/angular/angular.json

@@ -56,7 +56,7 @@
                 "bundleName": "ngx-datatable-material"
               },
               {
-                "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"
               },

templates/app/angular/src/app/home/home.component.html

@@ -10,7 +10,7 @@
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
-    <a *ngIf="!hasLoggedIn" (click)="login()" class="px-4 btn btn-primary ml-1" role="button"
+    <a *ngIf="!hasLoggedIn" (click)="login()" class="px-4 btn btn-primary ms-1" role="button"
       ><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
     >
   </div>
@@ -281,7 +281,7 @@
 </div>
 
 <ng-template #starterLinkTemplate let-context>
-  <div class="col-lg-4 border-left">
+  <div class="col-lg-4 border-start">
     <div class="p-4">
       <h5 class="mb-3">
         <i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> {{ context.title }}
@@ -303,7 +303,7 @@
 </ng-template>
 
 <ng-template #featuresTemplate let-context>
-  <div class="col-lg-2 border-left">
+  <div class="col-lg-2 border-start">
     <div class="p-3">
       <h6>
         <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i>
@@ -317,16 +317,16 @@
 </ng-template>
 
 <style scoped>
-  .col-lg-2.border-left:nth-of-type(6n + 1) {
+  .col-lg-2.border-start:nth-of-type(6n + 1) {
     border-left: 0 !important;
   }
 
-  .col-lg-4.border-left:nth-of-type(3n + 1) {
+  .col-lg-4.border-start:nth-of-type(3n + 1) {
     border-left: 0 !important;
   }
 
   @media (max-width: 991px) {
-    .border-left {
+    .border-start {
       border-left: 0 !important;
     }
   }

templates/module/angular/angular.json

@@ -95,7 +95,7 @@
                 "bundleName": "ngx-datatable-material"
               },
               {
-                "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"
               },