Merge pull request #12161 from abpframework/auto-merge/rel-5-1/966

Merge branch rel-5.2 with rel-5.1

docs/en/Tutorials/Part-2.md

@@ -512,7 +512,7 @@ Open the `/src/app/book/book.component.html` and replace the content as shown be
           {%{{{ '::Menu:Books' | abpLocalization }}}%}
         </h5>
       </div>
-      <div class="text-right col col-md-6"></div>
+      <div class="text-end col col-md-6"></div>
     </div>
   </div>
   <div class="card-body">

docs/en/Tutorials/Part-3.md

@@ -145,7 +145,7 @@ Open the `Pages/Books/Index.cshtml` and set the content of `abp-card-header` tag
         <abp-column size-md="_6">
             <abp-card-title>@L["Books"]</abp-card-title>
         </abp-column>
-        <abp-column size-md="_6" class="text-right">
+        <abp-column size-md="_6" class="text-end">
             <abp-button id="NewBookButton"
                         text="@L["NewBook"].Value"
                         icon="plus"
@@ -175,7 +175,7 @@ The final content of `Index.cshtml` is shown below:
             <abp-column size-md="_6">
                 <abp-card-title>@L["Books"]</abp-card-title>
             </abp-column>
-            <abp-column size-md="_6" class="text-right">
+            <abp-column size-md="_6" class="text-end">
                 <abp-button id="NewBookButton"
                             text="@L["NewBook"].Value"
                             icon="plus"
@@ -687,10 +687,10 @@ Open `/src/app/book/book.component.html` and make the following changes:
       <div class="col col-md-6">
         <h5 class="card-title">{%{{{ '::Menu:Books' | abpLocalization }}}%}</h5>
       </div>        
-      <div class="text-right col col-md-6">
+      <div class="text-end col col-md-6">
 
         <!-- Add the "new book" button here -->
-        <div class="text-lg-right pt-2">
+        <div class="text-lg-end pt-2">
           <button id="create" class="btn btn-primary" type="button" (click)="createBook()">
             <i class="fa fa-plus mr-1"></i>
             <span>{%{{{ "::NewBook" | abpLocalization }}}%}</span>

docs/en/Tutorials/Part-5.md

@@ -227,7 +227,7 @@ Open the `Pages/Books/Index.cshtml` file and change the content as shown below:
             <abp-column size-md="_6">
                 <abp-card-title>@L["Books"]</abp-card-title>
             </abp-column>
-            <abp-column size-md="_6" class="text-right">
+            <abp-column size-md="_6" class="text-end">
                 @if (await AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Create))
                 {
                     <abp-button id="NewBookButton"

docs/en/Tutorials/Part-9.md

@@ -73,7 +73,7 @@ Create a new razor page, `Index.cshtml` under the `Pages/Authors` folder of the
             <abp-column size-md="_6">
                 <abp-card-title>@L["Authors"]</abp-card-title>
             </abp-column>
-            <abp-column size-md="_6" class="text-right">
+            <abp-column size-md="_6" class="text-end">
                 @if (await AuthorizationService
                     .IsGrantedAsync(BookStorePermissions.Authors.Create))
                 {
@@ -722,8 +722,8 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
           {%{{{ '::Menu:Authors' | abpLocalization }}}%}
         </h5>
       </div>
-      <div class="text-right col col-md-6">
-        <div class="text-lg-right pt-2">
+      <div class="text-end col col-md-6">
+        <div class="text-lg-end pt-2">
           <button *abpPermission="'BookStore.Authors.Create'" id="create" class="btn btn-primary" type="button" (click)="createAuthor()">
             <i class="fa fa-plus mr-1"></i>
             <span>{%{{{ '::NewAuthor' | abpLocalization }}}%}</span>

docs/en/UI/Angular/Component-Replacement.md

@@ -227,7 +227,7 @@ Open the generated `routes.component.html` in `src/app/routes` folder and replac
             abpEllipsis="210px"
             [abpEllipsisEnabled]="!smallScreen"
             role="button"
-            class="btn d-block text-left dropdown-toggle"
+            class="btn d-block text-start dropdown-toggle"
           >
             <i class="fa fa-id-card-o"></i>
             {%{{{ 'AbpIdentity::Menu:IdentityManagement' | abpLocalization }}}%}
@@ -264,7 +264,7 @@ Open the generated `routes.component.html` in `src/app/routes` folder and replac
             abpEllipsis="210px"
             [abpEllipsisEnabled]="!smallScreen"
             role="button"
-            class="btn d-block text-left dropdown-toggle"
+            class="btn d-block text-start dropdown-toggle"
           >
             <i class="fa fa-users"></i>
             {%{{{ 'AbpTenantManagement::Menu:TenantManagement' | abpLocalization }}}%}

docs/en/UI/Angular/Config-State-Service.md

@@ -110,7 +110,7 @@ this.config.getSetting$("Abp.Identity.TwoFactor.Behaviour").subscribe(twoFactorB
 
 #### State Properties
 
-Please refer to `ApplicationConfiguration.Response` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [application-configuration.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/application-configuration.ts#L4).
+Please refer to `ApplicationConfigurationDto` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [models.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/proxy/volo/abp/asp-net-core/mvc/application-configurations/models.ts#L11).
 
 
 ## Set State

docs/en/UI/Angular/Confirmation-Service.md

@@ -2,12 +2,10 @@
 
 You can use the `ConfirmationService` in @abp/ng.theme.shared package to display a confirmation popup by placing at the root level in your project.
 
-
 ## Getting Started
 
 You do not have to provide the `ConfirmationService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
 
-
 ```js
 import { ConfirmationService } from '@abp/ng.theme.shared';
 
@@ -26,7 +24,7 @@ You can use the `success`, `warn`, `error`, and `info` methods of `ConfirmationS
 ### How to Display a Confirmation Popup
 
 ```js
-const confirmationStatus$ = this.confirmation.success('Message', 'Title');
+const confirmationStatus$ = this.confirmation.success("Message", "Title");
 ```
 
 - The `ConfirmationService` methods accept three parameters that are `message`, `title`, and `options`.
@@ -48,18 +46,16 @@ this.confirmation
   });
 ```
 
-
 - The `message` and `title` parameters accept a string, localization key or localization object. See the [localization document](./Localization.md)
 - `Confirmation.Status` is an enum and has three properties;
-    - `Confirmation.Status.confirm` is a closing event value that will be emitted when the popup is closed by the confirm button.
-    - `Confirmation.Status.reject` is a closing event value that will be emitted when the popup is closed by the cancel button.
-    - `Confirmation.Status.dismiss` is a closing event value that will be emitted when the popup is closed by pressing the escape or clicking the backdrop.
-
+  - `Confirmation.Status.confirm` is a closing event value that will be emitted when the popup is closed by the confirm button.
+  - `Confirmation.Status.reject` is a closing event value that will be emitted when the popup is closed by the cancel button.
+  - `Confirmation.Status.dismiss` is a closing event value that will be emitted when the popup is closed by pressing the escape or clicking the backdrop.
 
 If you are not interested in the confirmation status, you do not have to subscribe to the returned observable:
 
 ```js
-this.confirmation.error('You are not authorized.', 'Error');
+this.confirmation.error("You are not authorized.", "Error");
 ```
 
 ### How to Display a Confirmation Popup With Given Options
@@ -71,19 +67,19 @@ const options: Partial<Confirmation.Options> = {
   hideCancelBtn: false,
   hideYesBtn: false,
   dismissible: false,
-  cancelText: 'Close',
-  yesText: 'Confirm',
-  messageLocalizationParams: ['Demo'],
+  cancelText: "Close",
+  yesText: "Confirm",
+  messageLocalizationParams: ["Demo"],
   titleLocalizationParams: [],
   // You can customize icon 
   // icon: 'fa fa-exclamation-triangle', // or
   // iconTemplate : '<img src="custom-image-path.jpg" alt=""/>'
 } 
 
 this.confirmation.warn(
-  'AbpIdentity::RoleDeletionConfirmationMessage',
-  'Are you sure?',
-  options,
+  "AbpIdentity::RoleDeletionConfirmationMessage",
+  "Are you sure?",
+  options
 );
 ```
 
@@ -115,7 +111,7 @@ this.confirmation.warn(
     Do you confirm that?
   `,
   '<span class="my-custom-title">Are you sure?</span>',
-  options,
+  options
 );
 ```
 
@@ -162,8 +158,7 @@ success(
 ): Observable<Confirmation.Status>
 ```
 
-> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`Confirmation` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts)
-
+> See the [`LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/localization.ts#L6) and [`Confirmation` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts)
 
 ### warn
 

docs/en/UI/Angular/Environment.md

@@ -1,6 +1,6 @@
 # Environment
 
-Every application needs some **environment** variables. In Angular world, this is usually managed by `environment.ts`, `environment.prod.ts` and so on. It is the same for ABP as well. 
+Every application needs some **environment** variables. In Angular world, this is usually managed by `environment.ts`, `environment.prod.ts` and so on. It is the same for ABP as well.
 
 Current `Environment` configuration holds sub config classes as follows:
 
@@ -30,7 +30,7 @@ export interface ApiConfig {
 ```
 
 Api config has to have a default config and it may have some additional ones for different modules.
-I.e. you may want to connect to different Apis for different modules. 
+I.e. you may want to connect to different Apis for different modules.
 
 Take a look at following example
 
@@ -39,73 +39,71 @@ Take a look at following example
   // ...
   "apis": {
     "default": {
-      "url": "https://localhost:8080",
+      "url": "https://localhost:8080"
     },
     "AbpIdentity": {
-      "url": "https://localhost:9090",
+      "url": "https://localhost:9090"
     }
-  },
+  }
   // ...
 }
 ```
 
-When an api from `AbpIdentity` is called, the request will be sent to `"https://localhost:9090"`. 
+When an api from `AbpIdentity` is called, the request will be sent to `"https://localhost:9090"`.
 Everything else will be sent to `"https://localhost:8080"`
 
-* `rootNamespace` **(new)** : Root namespace of the related API. e.g. Acme.BookStore
+- `rootNamespace` **(new)** : Root namespace of the related API. e.g. Acme.BookStore
 
 ## Application
 
 ```js
- export interface Application {
+export interface Application {
   name: string;
   baseUrl?: string;
   logoUrl?: string;
 }
 ```
 
-* `name`: Name of the backend Application. It is also used by `logo.component` if `logoUrl` is not provided.
-* `logoUrl`: Url of the application logo. It is used by `logo.component`
-* `baseUrl`: [For detailed information](./Multi-Tenancy.md#domain-tenant-resolver)
-
+- `name`: Name of the backend Application. It is also used by `logo.component` if `logoUrl` is not provided.
+- `logoUrl`: Url of the application logo. It is used by `logo.component`
+- `baseUrl`: [For detailed information](./Multi-Tenancy.md#domain-tenant-resolver)
 
 ## AuthConfig
 
 For authentication, we use angular-oauth2-oidc. Please check their [docs](https://github.com/manfredsteyer/angular-oauth2-oidc) out
 
 ## RemoteEnvironment
 
-Some applications need to integrate an existing config into the `environment` used throughout the application. 
+Some applications need to integrate an existing config into the `environment` used throughout the application.
 Abp Framework supports this out of box.
 
 To integrate an existing config json into the `environment`, you need to set `remoteEnv`
 
 ```js
 export type customMergeFn = (
   localEnv: Partial<Config.Environment>,
-  remoteEnv: any,
+  remoteEnv: any
 ) => Config.Environment;
 
 export interface RemoteEnv {
   url: string;
-  mergeStrategy: 'deepmerge' | 'overwrite' | customMergeFn;
+  mergeStrategy: "deepmerge" | "overwrite" | customMergeFn;
   method?: string;
   headers?: ABP.Dictionary<string>;
 }
 ```
 
-* `url` *: Required. The url to be used to retrieve environment config
-* `mergeStrategy` *: Required. Defines how the local and the remote `environment` json will be merged
-  * `deepmerge`: Both local and remote `environment` json will be merged recursively. If both configs have same nested path, the remote `environment` will be prioritized. 
-  * `overwrite`: Remote `environment` will be used and local environment will be ignored.
-  * `customMergeFn`: You can also provide your own merge function as shown in the example. It will take two parameters, `localEnv: Partial<Config.Environment>` and `remoteEnv` and it needs to return a `Config.Environment` object.
-* `method`: HTTP method to be used when retrieving environment config. Default: `GET`
-* `headers`: If extra headers are needed for the request, it can be set through this field.
+- `url` \*: Required. The url to be used to retrieve environment config
+- `mergeStrategy` \*: Required. Defines how the local and the remote `environment` json will be merged
+  - `deepmerge`: Both local and remote `environment` json will be merged recursively. If both configs have same nested path, the remote `environment` will be prioritized.
+  - `overwrite`: Remote `environment` will be used and local environment will be ignored.
+  - `customMergeFn`: You can also provide your own merge function as shown in the example. It will take two parameters, `localEnv: Partial<Config.Environment>` and `remoteEnv` and it needs to return a `Config.Environment` object.
+- `method`: HTTP method to be used when retrieving environment config. Default: `GET`
+- `headers`: If extra headers are needed for the request, it can be set through this field.
 
 ## EnvironmentService
 
-` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store.
-
+` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store.
 
 ### Before Use
 
@@ -124,7 +122,6 @@ class DemoComponent {
 
 You do not have to provide the `EnvironmentService` at module or component/directive level, because it is already **provided in root**.
 
-
 ### Get Methods
 
 `EnvironmentService` has numerous get methods which allow you to get a specific value or all environment object.
@@ -141,9 +138,9 @@ You can use the `getEnvironment` or `getEnvironment$` method of `EnvironmentServ
 const environment = this.environment.getEnvironment();
 
 // or
-this.environment.getEnvironment$().subscribe(environment => {
-   // use environment here
-})
+this.environment.getEnvironment$().subscribe((environment) => {
+  // use environment here
+});
 ```
 
 #### How to Get API URL
@@ -156,14 +153,13 @@ The `getApiUrl` or `getApiUrl$` method is used to get a specific API URL from th
 const apiUrl = this.environment.getApiUrl();
 // environment.apis.default.url
 
-this.environment.getApiUrl$("search").subscribe(searchUrl => {
-// environment.apis.search.url
-})
+this.environment.getApiUrl$("search").subscribe((searchUrl) => {
+  // environment.apis.search.url
+});
 ```
 
 This method returns the `url` of a specific API based on the key given as its only parameter. If there is no key, `'default'` is used.
 
-
 #### How to Set the Environment
 
 `EnvironmentService` has a method named `setState` which allows you to set the state value.
@@ -178,4 +174,4 @@ Note that **you do not have to call this method at application initiation**, bec
 
 #### Environment Properties
 
-Please refer to `Environment` type for all the properties. It can be found in the [config.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L13).
+Please refer to `Environment` type for all the properties. It can be found in the [environment.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/environment.ts#L4).

docs/en/UI/Angular/How-Replaceable-Components-Work-with-Extensions.md

@@ -171,7 +171,7 @@ Open the generated `src/app/my-role/my-role.component.html` file and replace its
       <div class="col col-md-6">
         <h5 class="card-title">My Roles</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>

docs/en/UI/Angular/Quick-Start.md

@@ -198,7 +198,7 @@ In addition, you can [deploy your application to certain targets using the Angul
 - [Azure](https://github.com/Azure/ng-deploy-azure#readme)
 - [Firebase](https://github.com/angular/angularfire#readme)
 - [Netlify](https://github.com/ngx-builders/netlify-builder#readme)
-- [Vercel](https://github.com/vercel/ng-deploy-vercel#readme)
+- [Vercel `vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular)
 - [GitHub Pages](https://github.com/angular-schule/angular-cli-ghpages/#readme)
 
 ---

docs/en/UI/Angular/Testing.md

@@ -123,7 +123,7 @@ The **queries in Angular Testing Library follow practices for maintainable tests
 
 - [Queries](https://testing-library.com/docs/dom-testing-library/api-queries)
 - [User Event](https://testing-library.com/docs/ecosystem-user-event)
-- [Examples](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/app/examples)
+- [Examples](https://github.com/testing-library/angular-testing-library/tree/main/apps/example-app/src/app/examples)
 
 ### Clearing DOM After Each Spec
 
@@ -377,4 +377,4 @@ npm test -- --prod
 
 ## See Also
 
-* [ABP Community Video - Unit Testing with the Angular UI](https://community.abp.io/articles/unit-testing-with-the-angular-ui-p4l550q3)
+- [ABP Community Video - Unit Testing with the Angular UI](https://community.abp.io/articles/unit-testing-with-the-angular-ui-p4l550q3)