Merge pull request #8402 from abpframework/fix/8398

Add abpClose directive to modal component

docs/en/Tutorials/Part-3.md

@@ -709,7 +709,7 @@ Open `/src/app/book/book.component.html` and make the following changes:
   <ng-template #abpBody> </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary" abpClose>
       {%{{{ '::Close' | abpLocalization }}}%}
     </button>
   </ng-template>
@@ -844,7 +844,7 @@ Also replace `<ng-template #abpFooter> </ng-template>` with the following code p
 
 ````html
 <ng-template #abpFooter>
-  <button type="button" class="btn btn-secondary" #abpClose>
+  <button type="button" class="btn btn-secondary" abpClose>
       {%{{{ '::Close' | abpLocalization }}}%}
   </button>
 

docs/en/Tutorials/Part-9.md

@@ -792,7 +792,7 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
   </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary" abpClose>
       {%{{{ '::Close' | abpLocalization }}}%}
     </button>
 

docs/en/UI/Angular/Entity-Action-Extensions.md

@@ -180,7 +180,7 @@ Let's employ dependency injection to extend the functionality of `IdentityModule
     </ng-template>
 
     <ng-template #abpFooter>
-      <button type="button" class="btn btn-secondary" #abpClose>
+      <button type="button" class="btn btn-secondary" abpClose>
         {%{{{ 'AbpUi::Close' | abpLocalization }}}%}
       </button>
     </ng-template>

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

@@ -215,7 +215,7 @@ Open the generated `src/app/my-role/my-role.component.html` file and replace its
   </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary" abpClose>
       {%{{{ 'AbpIdentity::Cancel' | abpLocalization }}}%}
     </button>
     <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{%{{{

docs/en/UI/Angular/Modal.md

@@ -6,7 +6,7 @@ The `abp-modal` provides some additional benefits:
  
  - It is **flexible**. You can pass header, body, footer templates easily by adding the templates to the `abp-modal` content. It can also be implemented quickly.
  - Provides several inputs be able to customize the modal and several outputs be able to listen to some events.
- - Automatically detects the close button which has a `#abpClose` template variable and closes the modal when pressed this button.
+ - Automatically detects the close button which has a `abpClose` directive attached to and closes the modal when pressed this button.
  - Automatically detects the `abp-button` and triggers its loading spinner when the `busy` input value of the modal component is true.
  - Automatically checks if the form inside the modal **has changed, but not saved**. It warns the user by displaying a [confirmation popup](Confirmation-Service) in this case when a user tries to close the modal or refresh/close the tab of the browser.
 
@@ -47,7 +47,7 @@ You can add the `abp-modal` to your component very quickly. See an example:
   </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>Close</button>
+    <button type="button" class="btn btn-secondary" abpClose>Close</button>
   </ng-template>
 </abp-modal>
 ```
@@ -116,7 +116,7 @@ See an example form inside a modal:
   </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary" abpClose>
       Cancel
     </button>
 

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

@@ -459,7 +459,7 @@ Open the generated `permission-management.component.html` in `src/app/permission
       </div>
     </ng-template>
     <ng-template #abpFooter>
-      <button type="button" class="btn btn-secondary" #abpClose>
+      <button type="button" class="btn btn-secondary" abpClose>
         {%{{{ 'AbpIdentity::Cancel' | abpLocalization }}}%}
       </button>
       <abp-button iconClass="fa fa-check" (click)="submit()">{%{{{

docs/pt-BR/Tutorials/Angular/Part-II.md

@@ -90,7 +90,7 @@ Abra o `book-list.component.html`e adicione o `abp-modal`para mostrar / ocultar
   <ng-template #abpBody> </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary" abpClose>
       Cancel
     </button>
   </ng-template>
@@ -276,7 +276,7 @@ Abra o `book-list.component.html`e adicione um `abp-button`para salvar o formul
 
 ```html
 <ng-template #abpFooter>
-  <button type="button" class="btn btn-secondary" #abpClose>
+  <button type="button" class="btn btn-secondary" abpClose>
     Cancel
   </button>
   <button class="btn btn-primary" (click)="save()">

docs/zh-Hans/Tutorials/Part-3.md

@@ -718,7 +718,7 @@ export class BookComponent implements OnInit {
   <ng-template #abpBody> </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary" abpClose>
       {%{{{ '::Close' | abpLocalization }}}%}
     </button>
   </ng-template>
@@ -859,7 +859,7 @@ export class BookComponent implements OnInit {
 
 ````html
 <ng-template #abpFooter>
-  <button type="button" class="btn btn-secondary" #abpClose>
+  <button type="button" class="btn btn-secondary" abpClose>
       {%{{{ '::Close' | abpLocalization }}}%}
   </button>
 

docs/zh-Hans/UI/Angular/Permission-Management-Component-Replacement.md

@@ -459,7 +459,7 @@ function getPermissions(groups: PermissionManagement.Group[]): PermissionManagem
       </div>
     </ng-template>
     <ng-template #abpFooter>
-      <button type="button" class="btn btn-secondary" #abpClose>
+      <button type="button" class="btn btn-secondary" abpClose>
         {%{{{ 'AbpIdentity::Cancel' | abpLocalization }}}%}
       </button>
       <abp-button iconClass="fa fa-check" (click)="submit()">{%{{{

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

@@ -3,7 +3,7 @@
     <div class="card-body px-5">
       <div class="row">
         <div class="col">
-          <span style="font-size: 0.8em;" class="text-uppercase text-muted">{{
+          <span style="font-size: 0.8em" class="text-uppercase text-muted">{{
             'AbpUiMultiTenancy::Tenant' | abpLocalization
           }}</span
           ><br />
@@ -47,7 +47,7 @@
       </form>
     </ng-template>
     <ng-template #abpFooter>
-      <button #abpClose type="button" class="btn btn-secondary">
+      <button abpClose type="button" class="btn btn-secondary">
         {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
       </button>
       <abp-button

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

@@ -82,8 +82,8 @@
                           {{
                             item.displayText?.resourceName + '::' + item.displayText?.name
                               | abpLocalization
-                          }}</option
-                        >
+                          }}
+                        </option>
                       </select>
                       <ng-container
                         *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
@@ -111,7 +111,7 @@
   </ng-template>
 
   <ng-template #abpFooter>
-    <button #abpClose type="button" class="btn btn-secondary">
+    <button abpClose type="button" class="btn btn-secondary">
       {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
     </button>
     <abp-button

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

@@ -31,7 +31,7 @@
   </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary" abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
     <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{

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

@@ -74,7 +74,7 @@
   </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary" abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
     <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{

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

@@ -94,7 +94,7 @@
       </div>
     </ng-template>
     <ng-template #abpFooter>
-      <button type="button" class="btn btn-secondary" #abpClose>
+      <button type="button" class="btn btn-secondary" abpClose>
         {{ 'AbpIdentity::Cancel' | abpLocalization }}
       </button>
       <abp-button iconClass="fa fa-check" (click)="submit()">{{

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

@@ -40,7 +40,7 @@
   </ng-template>
 
   <ng-template #abpFooter>
-    <button #abpClose type="button" class="btn btn-secondary">
+    <button abpClose type="button" class="btn btn-secondary">
       {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
     </button>
     <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="isDisabledSaveButton">{{

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

@@ -6,6 +6,7 @@ export * from './http-error-wrapper/http-error-wrapper.component';
 export * from './loader-bar/loader-bar.component';
 export * from './loading/loading.component';
 export * from './modal/modal.component';
+export * from './modal/modal-close.directive';
 export * from './sort-order-icon/sort-order-icon.component';
 export * from './table-empty-message/table-empty-message.component';
 export * from './table/table.component';

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

@@ -0,0 +1,16 @@
+import { Directive, HostListener, Optional } from '@angular/core';
+import { ModalComponent } from './modal.component';
+
+@Directive({ selector: '[abpClose]' })
+export class ModalCloseDirective {
+  constructor(@Optional() private modal: ModalComponent) {
+    if (!modal) {
+      console.error('Please use abpClose within an abp-modal');
+    }
+  }
+
+  @HostListener('click')
+  onClick() {
+    this.modal?.close();
+  }
+}

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

@@ -11,6 +11,7 @@ import {
   Output,
   TemplateRef,
   ViewChild,
+  isDevMode,
 } from '@angular/core';
 import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { fromEvent, Subject } from 'rxjs';
@@ -78,6 +79,9 @@ export class ModalComponent implements OnDestroy {
   @ContentChild(ButtonComponent, { static: false, read: ButtonComponent })
   abpSubmit: ButtonComponent;
 
+  /**
+   * @deprecated will be removed in v5.0
+   */
   @ContentChild('abpClose', { static: false, read: ElementRef })
   abpClose: ElementRef<any>;
 
@@ -203,6 +207,7 @@ export class ModalComponent implements OnDestroy {
 
     setTimeout(() => {
       if (!this.abpClose) return;
+      this.warnForDeprecatedClose();
       fromEvent(this.abpClose.nativeElement, 'click')
         .pipe(takeUntil(this.destroy$))
         .subscribe(() => this.close());
@@ -210,4 +215,12 @@ export class ModalComponent implements OnDestroy {
 
     this.init.emit();
   }
+
+  private warnForDeprecatedClose() {
+    if (isDevMode()) {
+      console.warn(
+        'Please use abpClose directive instead of #abpClose template variable. #abpClose will be removed in v5.0',
+      );
+    }
+  }
 }

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

@@ -51,7 +51,7 @@ describe('ModalComponent', () => {
 
         <ng-template #abpFooter>
           <div class="footer">
-            <button id="abp-close" #abpClose></button>
+            <button id="abp-close" abpClose></button>
             <abp-button>Submit</abp-button>
           </div>
         </ng-template>

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

@@ -37,6 +37,7 @@ import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider';
 import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
 import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
+import { ModalCloseDirective } from './components/modal/modal-close.directive';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -55,6 +56,7 @@ const declarationsWithExports = [
   NgxDatatableListDirective,
   LoadingDirective,
   TableSortDirective,
+  ModalCloseDirective,
 ];
 
 @NgModule({

npm/ng-packs/yarn.lock

@@ -2,12 +2,20 @@
 # yarn lockfile v1
 
 
-"@abp/ng.core@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.core/-/ng.core-4.2.2.tgz#2b0b2d210bd124e4aaab3560763f36d38b24c63f"
-  integrity sha512-G2d5tcFgvmeLNP9JxlU6L3ywMqFdGBwdG5hTzyVxkE3qpiSfzCPCrMVcCh4SnOxm+Qo7kEXtT3xDv6b+Ye2uTQ==
+"@abp/ng.components@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.components/-/ng.components-4.3.0-rc.1.tgz#7142e476577fe74429b0eb0f0f9af5955a3aea3f"
+  integrity sha512-JjRRbE9RHh8X82PKLO1VKsEMui+mCNzGgkmBVL1qwTrlLcfUW6IYjCVXUxQX67e6waHVT+cIFFWWk00zfVEMJw==
+  dependencies:
+    ng-zorro-antd "^11.0.0"
+    tslib "^2.0.0"
+
+"@abp/ng.core@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.core/-/ng.core-4.3.0-rc.1.tgz#8cd396fcdbeff3ad71ff4a3ce175395fdaf0cca4"
+  integrity sha512-9ydmdginW0f4g9ZlAF78q2RUvHhGBr0Aj5cN/sAnD+ohNDkYeSd42szqJAkoktEfTw4yHEFC+kKJLELAhRgChg==
   dependencies:
-    "@abp/utils" "^4.2.1"
+    "@abp/utils" "^4.2.2"
     "@angular/localize" "~10.0.10"
     "@ngxs/store" "^3.7.0"
     angular-oauth2-oidc "^10.0.0"
@@ -17,88 +25,97 @@
     ts-toolbelt "6.15.4"
     tslib "^2.0.0"
 
-"@abp/ng.feature-management@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.feature-management/-/ng.feature-management-4.2.2.tgz#694f6d6e391d5688b0cbca3ed6e9b80e24cac37f"
-  integrity sha512-KvE4sRPpQRrg3y03hO/2y6LUDPSaHJGm7pyEb0vwv4728RTMoR1cFwGiu8o2uRxslApq3O6EM3DvKY+6F0VNSw==
+"@abp/ng.feature-management@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.feature-management/-/ng.feature-management-4.3.0-rc.1.tgz#d4a3536add0901851f035a3c1e591e6f3bbaa6fc"
+  integrity sha512-PH5X7D2L+tyhCqEBTLxOVFToJvdgalvxGWWxiTHT+0GwN9yKNy4cmot4WM7U2iRG9DjwpNKhQSEwqjRM1hxc/Q==
   dependencies:
-    "@abp/ng.theme.shared" "~4.2.2"
+    "@abp/ng.theme.shared" "~4.3.0-rc.1"
     tslib "^2.0.0"
 
-"@abp/ng.identity@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.identity/-/ng.identity-4.2.2.tgz#640065e823fd6e9430711d499084f04779c2e990"
-  integrity sha512-gbkY2hL21OjzsZwZCwqhxBT8xndFIVU8SD9qAYAv6XlIGUuIwIy/VLSuU/hFF0+8qg0TdU359aH1F6FtwSm+/g==
+"@abp/ng.identity@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.identity/-/ng.identity-4.3.0-rc.1.tgz#ffe6644e876f8998e3e6dff110e5d1c8461a6c71"
+  integrity sha512-F5pGGVOUYKK+vLAE87u+rYlRGhrlTfYlme9gwHgXW8sElrdSPe03Q63kXap9e/w/foeqe/C6PLBrZ255K2BtwQ==
   dependencies:
-    "@abp/ng.permission-management" "~4.2.2"
-    "@abp/ng.theme.shared" "~4.2.2"
+    "@abp/ng.permission-management" "~4.3.0-rc.1"
+    "@abp/ng.theme.shared" "~4.3.0-rc.1"
     tslib "^2.0.0"
 
-"@abp/ng.permission-management@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.permission-management/-/ng.permission-management-4.2.2.tgz#a63a25bbe48c0044630af430b7674c5d040a5999"
-  integrity sha512-c1C8O73oqRf3NCSXMvECayzvjTx+nEGnh3KX7IWtNMr0/GIUCokzH9yX2Cd8uZPYINvlZTOLu73ImrIjTllJ/w==
+"@abp/ng.permission-management@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.permission-management/-/ng.permission-management-4.3.0-rc.1.tgz#9fe9fbb2a5a4306ff549ed0f00bf9a47fb7a3f49"
+  integrity sha512-5LVC22bukBWD6r1kMZD8ooq0dr8k9AjpdGk/vcdC/86l8oOlqbaarrGiFawSabFIZqjglC6cZ0V4lEymRxhNQQ==
   dependencies:
-    "@abp/ng.theme.shared" "~4.2.2"
+    "@abp/ng.theme.shared" "~4.3.0-rc.1"
     tslib "^2.0.0"
 
-"@abp/ng.schematics@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.schematics/-/ng.schematics-4.2.2.tgz#757a638fe01f4816f74742551f8b304d55aa5bc0"
-  integrity sha512-1YRMg1Hex+6CigDs68fXCe48SU/f8kYSkhLWGs2ZiYJeo00Cv5Sd+Vo8ZbRzuC04w4JQlI0U6jCgZfcbf7eehQ==
+"@abp/ng.schematics@~4.3.0-rc.1":
+  version "4.3.0-rc.1-1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.schematics/-/ng.schematics-4.3.0-rc.1-1.tgz#70897e5be3ea308b1a535241ddbf08ad730be1cf"
+  integrity sha512-YKnsx4q4OrUBJl8VbzHORlnPT1iEv6y72soe/xWqasL8i1UIEAUQjLx7ZDZCMWq+Dm+v7EgMU/yOjcNpdL3Eng==
   dependencies:
     "@angular-devkit/core" "~11.0.2"
     "@angular-devkit/schematics" "~11.0.2"
     got "^11.5.2"
     jsonc-parser "^2.3.0"
+    should-quote "^1.0.0"
     typescript "~3.9.2"
 
-"@abp/ng.setting-management@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.setting-management/-/ng.setting-management-4.2.2.tgz#f92040222d29e84b31b074c23fe0233c344a705e"
-  integrity sha512-hm/kuday+L32hqvvFCjNGEhmOwZSK8X+h1l8v8xaSA7JaP82pqBKARtUjumey6v52UiL/mDj/p89M+E9PryD5w==
+"@abp/ng.setting-management@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.setting-management/-/ng.setting-management-4.3.0-rc.1.tgz#d157eb62c5b34675a5cb40090b87ace318e2aacd"
+  integrity sha512-8aA7ixn5sKk9jgW9cGoGRWAmHL5D7As5E7aBxddTIxlvIIChc9A7xF8GigD+WufOHoKEFKRxHmEzDtnpTS0Hqg==
   dependencies:
-    "@abp/ng.theme.shared" "~4.2.2"
+    "@abp/ng.components" "~4.3.0-rc.1"
+    "@abp/ng.theme.shared" "~4.3.0-rc.1"
     tslib "^2.0.0"
 
-"@abp/ng.tenant-management@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.tenant-management/-/ng.tenant-management-4.2.2.tgz#91fa26176a9019bde52e4a8652e77a0f8394d0d7"
-  integrity sha512-/5yDzIKK0lokyy7vddIIsmM3fcXkxA9pOMMZYOIMchOTQkUnqQ6Gfo53iCRrt8UgIYIzEd1eY0fObHhwKu33yA==
+"@abp/ng.tenant-management@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.tenant-management/-/ng.tenant-management-4.3.0-rc.1.tgz#72f9d62868ba50ad7ae30964ff3f28b50ef89b4e"
+  integrity sha512-/Z1qED1BEx1vkR/N1qPeE+OqE/HXksHrl3v4bPjKMy1k6HGorzfzaBXghpwumvwGcAOLXGgigJAkG7bBr6qlrA==
   dependencies:
-    "@abp/ng.feature-management" "~4.2.2"
-    "@abp/ng.theme.shared" "~4.2.2"
+    "@abp/ng.feature-management" "~4.3.0-rc.1"
+    "@abp/ng.theme.shared" "~4.3.0-rc.1"
     tslib "^2.0.0"
 
-"@abp/ng.theme.basic@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.theme.basic/-/ng.theme.basic-4.2.2.tgz#87e349365a3cec93ab19364d29e6f22a58650371"
-  integrity sha512-tKCviHib50Eal7n/pUDVU/HtCfEP+BO7ys/SQFY5+TZrIQwUMsI9r6RhHVZGtHzvmwFXzT8r03IqKrpjZjfjSg==
+"@abp/ng.theme.basic@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.theme.basic/-/ng.theme.basic-4.3.0-rc.1.tgz#f9d1cdaff4f64fa1b1e79b288a4780f99dd70989"
+  integrity sha512-E+cALwuHHjg32kPR/dd/4rHrLc+pv4BSV+SH0RmdVPhbmbQBDCzz5YOCmss1p7KFSlGWF4+pUVn9ev4I+yYFhA==
   dependencies:
-    "@abp/ng.theme.shared" "~4.2.2"
+    "@abp/ng.theme.shared" "~4.3.0-rc.1"
     tslib "^2.0.0"
 
-"@abp/ng.theme.shared@~4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@abp/ng.theme.shared/-/ng.theme.shared-4.2.2.tgz#c8e19884e29f286323ae9dd1ffa1d7b4e3584971"
-  integrity sha512-qq+/klJywoy/Pr2dW0gM0jb2ac2qnZAYuUKhkV+wp+xMgZV2PW24V7mHbpPwtzg5ClQnLLyBYuj7S5qHblXRiw==
+"@abp/ng.theme.shared@~4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/ng.theme.shared/-/ng.theme.shared-4.3.0-rc.1.tgz#1442443baf2a70832f0bd0f04a2103a731b7b521"
+  integrity sha512-1Ht2lKkenFQYrMxIaebiRmYhv8ASZEM/QFaEVak5u5C9KCVxC9sFX1Dl+MgFY11hoxiEbbI0GiXT+TfjAOmuVw==
   dependencies:
-    "@abp/ng.core" "~4.2.2"
+    "@abp/ng.core" "~4.3.0-rc.1"
     "@fortawesome/fontawesome-free" "^5.14.0"
     "@ng-bootstrap/ng-bootstrap" "^7.0.0"
     "@ngx-validate/core" "^0.0.13"
     "@swimlane/ngx-datatable" "^17.1.0"
-    bootstrap "^4.5.0"
+    bootstrap "~4.6.0"
     chart.js "^2.9.3"
     tslib "^2.0.0"
 
-"@abp/utils@^4.2.1", "@abp/utils@^4.2.2":
+"@abp/utils@^4.2.2":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@abp/utils/-/utils-4.2.2.tgz#7afdbbd14246ce06c074109c51d01588596805a9"
   integrity sha512-fyPCe5BcS8b88qQd8Ns1D65TdlaOoOryL7mgkYAwBTTpmADLNJQ7R2L4VZxDybkMN2lou+ckCx7qlFIlQmWa7g==
   dependencies:
     just-compare "^1.3.0"
 
+"@abp/utils@^4.3.0-rc.1":
+  version "4.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@abp/utils/-/utils-4.3.0-rc.1.tgz#82ef26e01e0cb38417bf4fa9459fde85cbc2b424"
+  integrity sha512-C/sk6jZQDENI7FbylBoPnTb1rC5eVPnsL8B++vAH4jS//OAj2iNvE6tCewK21GYI/JmfmQzzauQBzOiOJR9a6A==
+  dependencies:
+    just-compare "^1.3.0"
+
 "@angular-builders/jest@^10.0.0":
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/@angular-builders/jest/-/jest-10.0.1.tgz#a1a6fb5d11b5d54c051bdaa2012b5f046371560c"
@@ -3968,7 +3985,7 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^4.5.0:
+bootstrap@^4.5.0, bootstrap@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
   integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
@@ -9832,7 +9849,7 @@ ng-packagr@^11.0.1:
     sync-rpc "^1.3.6"
     terser "^5.5.1"
 
-ng-zorro-antd@^11.0.1:
+ng-zorro-antd@^11.0.0, ng-zorro-antd@^11.0.1:
   version "11.3.0"
   resolved "https://registry.yarnpkg.com/ng-zorro-antd/-/ng-zorro-antd-11.3.0.tgz#c09c6c34229bad3cdb22a64b4806f898053f7bb3"
   integrity sha512-6oX+DidXd07bLWihwfhPqn8YeA6ZhZsYQsHUOib17lF/wVRZQCl9bacuYc7R/e6AyxuvFCsJQHVp0PEP7v+wTQ==