feat: add abpClose directive to modal

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/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({