From 5dd2c534f2c51f17623031564bd8aaa7638cc10d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?=
 <30300440+bariscanyilmaz@users.noreply.github.com>
Date: Tue, 7 Feb 2023 11:25:19 +0300
Subject: [PATCH] create visible directive

---
 .../theme-shared/src/lib/directives/index.ts  |  1 +
 .../src/lib/directives/visible.directive.ts   | 59 +++++++++++++++++++
 .../src/lib/theme-shared.module.ts            |  2 +
 3 files changed, 62 insertions(+)
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts
index b0a79877fe..3f22a36f1b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts
@@ -2,3 +2,4 @@ export * from './ellipsis.directive';
 export * from './loading.directive';
 export * from './ngx-datatable-default.directive';
 export * from './ngx-datatable-list.directive';
+export * from './visible.directive';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts
new file mode 100644
index 0000000000..9c2c408d0e
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts
@@ -0,0 +1,59 @@
+import { OnInit, Directive, OnDestroy, Input, ViewContainerRef, TemplateRef } from '@angular/core';
+import { EMPTY, from, Observable, of, Subscription } from 'rxjs';
+
+@Directive({
+  selector: '[abpVisible]',
+})
+export class AbpVisibleDirective implements OnDestroy, OnInit {
+  conditionSubscription: Subscription | undefined;
+  isVisible: boolean | undefined;
+
+  @Input('abpVisible') set abpVisible(
+    value: boolean | Promise<boolean> | Observable<boolean> | undefined | null,
+  ) {
+    this.condition$ = checkType(value);
+    this.subscribeToCondition();
+  }
+
+  private condition$: Observable<boolean> = of(false);
+
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private templateRef: TemplateRef<unknown>,
+  ) {}
+  ngOnInit(): void {
+    this.updateVisibility();
+  }
+  ngOnDestroy(): void {
+    this.conditionSubscription?.unsubscribe();
+  }
+
+  private subscribeToCondition() {
+    this.conditionSubscription = this.condition$.subscribe(value => {
+      this.isVisible = value;
+      this.updateVisibility();
+    });
+  }
+  private updateVisibility() {
+    this.viewContainerRef.clear();
+    // it should be false not falsy
+    if (this.isVisible === false) {
+      return;
+    }
+    this.viewContainerRef.createEmbeddedView(this.templateRef);
+  }
+}
+
+function checkType(value: boolean | Promise<boolean> | Observable<boolean> | undefined | null) {
+  if (value instanceof Promise) {
+    return from(value);
+  } else if (value instanceof Observable) {
+    return value;
+  } else if (typeof value === 'boolean') {
+    return of(value);
+  } else if (value === undefined || value === null) {
+    return of(true);
+  } else {
+    return EMPTY;
+  }
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index fd9a0cd236..20c7de13d4 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -36,6 +36,7 @@ import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.t
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
 import { PasswordComponent } from './components/password/password.component';
+import { AbpVisibleDirective } from './directives';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -52,6 +53,7 @@ const declarationsWithExports = [
   NgxDatatableListDirective,
   LoadingDirective,
   ModalCloseDirective,
+  AbpVisibleDirective,
 ];
 
 @NgModule({