feature(core): add new input visibility directive for no listen to dom

npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts

@@ -9,34 +9,49 @@ export class VisibilityDirective implements AfterViewInit {
   @Input('abpVisibility')
   focusedElement: HTMLElement;
 
+  @Input()
+  mutationObserverEnabled: boolean = true;
+
   completed$ = new Subject<boolean>();
 
   constructor(@Optional() private elRef: ElementRef, private renderer: Renderer2) {}
 
   ngAfterViewInit() {
-    const observer = new MutationObserver(mutations => {
+    let observer: MutationObserver;
-      mutations.forEach(mutation => {
+    if (this.mutationObserverEnabled) {
-        if (!mutation.target) return;
+      observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (!mutation.target) return;
 
-        const htmlNodes = snq(
+          const htmlNodes = snq(
-          () => Array.from(mutation.target.childNodes).filter(node => node instanceof HTMLElement),
+            () => Array.from(mutation.target.childNodes).filter(node => node instanceof HTMLElement),
-          [],
+            [],
-        );
+          );
 
-        if (!htmlNodes.length) {
+          if (!htmlNodes.length) {
-          this.renderer.removeChild(this.elRef.nativeElement.parentElement, this.elRef.nativeElement);
+            this.removeFromDOM();
-          this.disconnect();
-        } else {
-          setTimeout(() => {
             this.disconnect();
-          }, 0);
+          } else {
-        }
+            setTimeout(() => {
+              this.disconnect();
+            }, 0);
+          }
+        });
       });
-    });
 
-    observer.observe(this.focusedElement, {
+      observer.observe(this.focusedElement, {
-      childList: true,
+        childList: true,
-    });
+      });
+    } else {
+      setTimeout(() => {
+        const htmlNodes = snq(
+          () => Array.from(this.focusedElement.childNodes).filter(node => node instanceof HTMLElement),
+          [],
+        );
+
+        if (!htmlNodes.length) this.removeFromDOM();
+      }, 0);
+    }
 
     this.completed$.subscribe(() => observer.disconnect());
   }
@@ -45,4 +60,8 @@ export class VisibilityDirective implements AfterViewInit {
     this.completed$.next();
     this.completed$.complete();
   }
+
+  removeFromDOM() {
+    this.renderer.removeChild(this.elRef.nativeElement.parentElement, this.elRef.nativeElement);
+  }
 }

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

@@ -5,7 +5,7 @@
     "@abp/ng.core": "^0.8.3",
     "@angular/cdk": "^8.0.1",
     "@ng-bootstrap/ng-bootstrap": "^5.1.0",
-    "@ngx-validate/core": "^0.0.4",
+    "@ngx-validate/core": "^0.0.5",
     "bootstrap": "^4.3.1",
     "chart.js": "^2.8.0",
     "font-awesome": "^4.7.0",