From 6896319bf02579d97b1ad31e92138e2a50e4fce2 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 9 Dec 2020 10:03:07 +0300
Subject: [PATCH 1/7] feat: add default expand template to tree component

---
 .../src/lib/components/tree.component.html    | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index b98aa7e4ff..c3147194dd 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -38,3 +38,39 @@
     </div>
   </div>
 </ng-template>
+
+<ng-template #defaultIconTemplate let-node let-origin="origin">
+  <i style="line-height: 28px" aria-hidden="true">
+    <ng-container *ngTemplateOutlet="node.isExpanded ? minusIcon : plusIcon"></ng-container
+  ></i>
+</ng-template>
+
+<ng-template #minusIcon>
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  >
+    <path
+      d="M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm-6.5 10h13v1h-13v-1z"
+    />
+  </svg>
+</ng-template>
+
+<ng-template #plusIcon>
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  >
+    <path
+      d="M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm.5 10h6v1h-6v6h-1v-6h-6v-1h6v-6h1v6z"
+    />
+  </svg>
+</ng-template>

From 38410fe906d68a36b0fa261f543d1fce1738b382 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 9 Dec 2020 10:05:05 +0300
Subject: [PATCH 2/7] feat(components): improve node template

---
 .../src/lib/components/tree.component.html    | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index c3147194dd..c99d9e364c 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -8,6 +8,7 @@
   [nzTreeTemplate]="treeTemplate"
   [nzExpandedKeys]="expandedKeys"
   [nzExpandedIcon]="expandedIconTemplate?.template"
+  [nzExpandedIcon]="expandedIconTemplate?.template || defaultIconTemplate"
   (nzExpandChange)="onExpandedKeysChange($event)"
   (nzCheckBoxChange)="onCheckboxChange($event)"
   (nzOnDrop)="onDrop($event)"
@@ -19,16 +20,17 @@
     [title]="node.title"
     (click)="onSelectedNodeChange(node)"
   >
-    <ng-container
-      *ngTemplateOutlet="
-        customNodeTemplate?.template || defaultNodeTemplate;
-        context: { $implicit: node }
-      "
-    ></ng-container>
+    <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: node }"></ng-container>
 
-    <ng-template #defaultNodeTemplate>
-      <span>{{ node.title }}</span>
-    </ng-template>
+    <ng-template #nodeTemplate let-node>
+      <div class="d-inline-block">
+        <ng-container
+          *ngTemplateOutlet="
+            customNodeTemplate ? customNodeTemplate?.template : defaultNodeTemplate;
+            context: { $implicit: node }
+          "
+        ></ng-container>
+      </div>
 
     <div *ngIf="menu" class="ellipsis" ngbDropdown placement="bottom" container="body">
       <i class="fas fa-ellipsis-h" ngbDropdownToggle [class.dropdown-toggle]="false"></i>
@@ -36,6 +38,9 @@
         <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
       </div>
     </div>
+    <ng-template #defaultNodeTemplate let-node>
+      <span>{{ node.title }}</span>
+    </ng-template>
   </div>
 </ng-template>
 

From 75dba7a0ad3004271203fa1db853384bc6ee7ba2 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 9 Dec 2020 10:06:12 +0300
Subject: [PATCH 3/7] feat(components): add disable animation option to
 tree.component

set nzNoAnimation default value to true
---
 .../components/tree/src/lib/components/tree.component.html | 1 +
 .../components/tree/src/lib/components/tree.component.ts   | 1 +
 .../packages/components/tree/src/lib/tree.module.ts        | 7 ++++---
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index c99d9e364c..182d4a1ff9 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -12,6 +12,7 @@
   (nzExpandChange)="onExpandedKeysChange($event)"
   (nzCheckBoxChange)="onCheckboxChange($event)"
   (nzOnDrop)="onDrop($event)"
+  [nzNoAnimation]="noAnimation"
 ></nz-tree>
 <ng-template #treeTemplate let-node>
   <div
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
index 7ba6280c0b..e4fda04736 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
@@ -33,6 +33,7 @@ export class TreeComponent {
   @Output() readonly expandedKeysChange = new EventEmitter<string[]>();
   @Output() readonly selectedNodeChange = new EventEmitter();
   @Output() readonly dropOver = new EventEmitter<DropEvent>();
+  @Input() noAnimation = true;
   @Input() draggable: boolean;
   @Input() checkable: boolean;
   @Input() checkStrictly: boolean;
diff --git a/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts b/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts
index b645a69925..2013c37588 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts
@@ -1,17 +1,18 @@
-import { CommonModule } from '@angular/common';
+import { CoreModule } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { TreeComponent } from './components/tree.component';
-import { TreeNodeTemplateDirective } from './templates/tree-node-template.directive';
 import { ExpandedIconTemplateDirective } from './templates/expanded-icon-template.directive';
+import { TreeNodeTemplateDirective } from './templates/tree-node-template.directive';
 
 const templates = [TreeNodeTemplateDirective, ExpandedIconTemplateDirective];
 
 const exported = [...templates, TreeComponent];
 
 @NgModule({
-  imports: [CommonModule, NzTreeModule, NgbDropdownModule],
+  imports: [CoreModule, NzTreeModule, NgbDropdownModule, NzNoAnimationModule],
   exports: [...exported],
   declarations: [...exported],
 })

From c0d1d1adc012daaa6b103bd6668616e15df0149a Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 9 Dec 2020 10:06:51 +0300
Subject: [PATCH 4/7] style: improve tree node dropdown

---
 .../src/lib/components/tree.component.html    | 25 ++++++++++++++-----
 .../tree/src/lib/components/tree.component.ts |  7 ++++++
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index 182d4a1ff9..cf2619b19a 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -7,7 +7,6 @@
   [nzData]="nodes"
   [nzTreeTemplate]="treeTemplate"
   [nzExpandedKeys]="expandedKeys"
-  [nzExpandedIcon]="expandedIconTemplate?.template"
   [nzExpandedIcon]="expandedIconTemplate?.template || defaultIconTemplate"
   (nzExpandChange)="onExpandedKeysChange($event)"
   (nzCheckBoxChange)="onCheckboxChange($event)"
@@ -33,12 +32,26 @@
         ></ng-container>
       </div>
 
-    <div *ngIf="menu" class="ellipsis" ngbDropdown placement="bottom" container="body">
-      <i class="fas fa-ellipsis-h" ngbDropdownToggle [class.dropdown-toggle]="false"></i>
-      <div ngbDropdownMenu>
-        <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
+      <div
+        #dropdown="ngbDropdown"
+        *ngIf="menu"
+        class="d-inline-block ml-1"
+        ngbDropdown
+        placement="bottom"
+        container="body"
+        (abpInit)="initDropdown(node.key, dropdown)"
+      >
+        <i
+          class="fas fa-caret-down text-muted"
+          ngbDropdownToggle
+          [class.dropdown-toggle]="false"
+        ></i>
+        <div ngbDropdownMenu>
+          <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
+        </div>
       </div>
-    </div>
+    </ng-template>
+
     <ng-template #defaultNodeTemplate let-node>
       <span>{{ node.title }}</span>
     </ng-template>
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
index e4fda04736..3f6179a5b2 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
@@ -11,6 +11,7 @@ import { NzFormatEmitEvent, NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
 import { of } from 'rxjs';
 import { TreeNodeTemplateDirective } from '../templates/tree-node-template.directive';
 import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 
 export type DropEvent = NzFormatEmitEvent & { pos: number };
 
@@ -26,6 +27,8 @@ export type DropEvent = NzFormatEmitEvent & { pos: number };
 export class TreeComponent {
   dropPosition: number;
 
+  dropdowns = {} as { [key: string]: NgbDropdown };
+
   @ContentChild('menu') menu: TemplateRef<any>;
   @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;
   @ContentChild(ExpandedIconTemplateDirective) expandedIconTemplate: ExpandedIconTemplateDirective;
@@ -69,4 +72,8 @@ export class TreeComponent {
 
     this.dropOver.emit(event);
   }
+
+  initDropdown(key: string, dropdown: NgbDropdown) {
+    this.dropdowns[key] = dropdown;
+  }
 }

From 8c8cd24ff66cd8de790aeab17a34b88191409be3 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 9 Dec 2020 10:07:07 +0300
Subject: [PATCH 5/7] feat: add context menu to abp-tree component

---
 .../components/tree/src/lib/components/tree.component.html       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index cf2619b19a..4f4aaf472d 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -12,6 +12,7 @@
   (nzCheckBoxChange)="onCheckboxChange($event)"
   (nzOnDrop)="onDrop($event)"
   [nzNoAnimation]="noAnimation"
+  (nzContextMenu)="dropdowns[$event.node?.key]?.toggle()"
 ></nz-tree>
 <ng-template #treeTemplate let-node>
   <div

From 551faeac9f8fa3262118a87dcc146f1b7cca9732 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 9 Dec 2020 10:07:24 +0300
Subject: [PATCH 6/7] chore: add a peer dependency

---
 npm/ng-packs/packages/components/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/npm/ng-packs/packages/components/package.json b/npm/ng-packs/packages/components/package.json
index 3d4d25dd56..da5038f1f2 100644
--- a/npm/ng-packs/packages/components/package.json
+++ b/npm/ng-packs/packages/components/package.json
@@ -8,6 +8,7 @@
   },
   "peerDependencies": {
     "@abp/ng.core": ">=4.0.0",
+    "@abp/ng.theme.shared": ">=4.0.0",
     "@ng-bootstrap/ng-bootstrap": ">=6.0.0"
   },
   "dependencies": {

From ab4dfe0b5faf2d50195f668e0fd1d97bd1604e4e Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 9 Dec 2020 10:07:40 +0300
Subject: [PATCH 7/7] chore: remove unnecessary styles

---
 .../tree/src/lib/components/tree.component.scss      | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss
index 113996455f..07ca018f0d 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss
@@ -27,18 +27,6 @@
     cursor: pointer;
     padding-left: 8px;
     border: 1px solid transparent;
-
-    &:hover {
-      background-color: transparent;
-      border: 1px solid var(--primary);
-      color: var(--text-color);
-    }
-
-    &.selected {
-      background-color: transparent;
-      color: var(--white);
-      background-color: var(--primary);
-    }
   }
 
   .ellipsis {