From 49ecd30db4154935075f66434d231034d08ff80b Mon Sep 17 00:00:00 2001
From: masumulu28 <masum.ulu@hotmail.com>
Date: Wed, 15 Nov 2023 15:05:32 +0300
Subject: [PATCH] fix: visibility issue in extensible table component set as
 standalone visible.directive

---
 .../extensible-table/extensible-table.component.html   |  2 +-
 .../extensible-table/extensible-table.component.ts     | 10 +++++++---
 .../src/lib/directives/visible.directive.ts            |  1 +
 .../theme-shared/src/lib/theme-shared.module.ts        |  5 +++--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
index 0d3aa9dd16..65c958d6aa 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
@@ -44,7 +44,7 @@
       </ng-template>
       <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
         <ng-container *abpPermission="prop.permission; runChangeDetection: false">
-          <ng-container *ngIf="row['_' + prop.name]?.visible">
+          <ng-container *abpVisible="row['_' + prop.name]?.visible">
             <div
               *ngIf="!row['_' + prop.name].component; else component"
               [innerHTML]="row['_' + prop.name]?.value | async"
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
index 697f8d36bd..62cf358b84 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
@@ -8,13 +8,12 @@ import {
   ListService,
   PermissionService,
 } from '@abp/ng.core';
-import { CommonModule, formatDate } from '@angular/common';
+import { formatDate } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   inject,
-  Inject,
   Injector,
   Input,
   LOCALE_ID,
@@ -39,7 +38,11 @@ import {
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { GridActionsComponent } from '../grid-actions/grid-actions.component';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import { NgxDatatableDefaultDirective, NgxDatatableListDirective } from '@abp/ng.theme.shared';
+import {
+  AbpVisibleDirective,
+  NgxDatatableDefaultDirective,
+  NgxDatatableListDirective,
+} from '@abp/ng.theme.shared';
 
 const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
 
@@ -49,6 +52,7 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
   standalone: true,
   imports: [
     CoreModule,
+    AbpVisibleDirective,
     NgxDatatableModule,
     GridActionsComponent,
     NgbTooltip,
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
index 9613779472..bcdd94a5d4 100644
--- 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
@@ -2,6 +2,7 @@ import { OnInit, Directive, OnDestroy, Input, ViewContainerRef, TemplateRef } fr
 import { EMPTY, from, Observable, of, Subscription } from 'rxjs';
 
 @Directive({
+  standalone: true,
   selector: '[abpVisible]',
 })
 export class AbpVisibleDirective implements OnDestroy, OnInit {
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 44fbc85c0f..53c2498f60 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
@@ -54,7 +54,6 @@ const declarationsWithExports = [
   ToastContainerComponent,
   LoadingDirective,
   ModalCloseDirective,
-  AbpVisibleDirective,
   FormInputComponent,
   FormCheckboxComponent,
 ];
@@ -70,7 +69,8 @@ const declarationsWithExports = [
     PasswordComponent,
     NgxDatatableDefaultDirective,
     NgxDatatableListDirective,
-    DisabledDirective
+    DisabledDirective,
+    AbpVisibleDirective,
   ],
   declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
   exports: [
@@ -78,6 +78,7 @@ const declarationsWithExports = [
     NgxValidateCoreModule,
     CardModule,
     DisabledDirective,
+    AbpVisibleDirective,
     NgxDatatableListDirective,
     NgxDatatableDefaultDirective,
     ...declarationsWithExports,