From b0f2026b5c586ca84a52ed3a457342bcdc2d6d54 Mon Sep 17 00:00:00 2001
From: sibiraj-s <dev.sibiraj@outlook.com>
Date: Sat, 1 May 2021 17:56:02 +0530
Subject: [PATCH] feat: add dropdownPlacement option to menubar

---
 .../ngx-editor/src/lib/editor.component.scss  | 20 ++++++++++++++++++-
 .../src/lib/modules/menu/menu.component.html  |  2 +-
 .../src/lib/modules/menu/menu.component.ts    |  1 +
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/projects/ngx-editor/src/lib/editor.component.scss b/projects/ngx-editor/src/lib/editor.component.scss
index 72ad8ca1..8a247eea 100644
--- a/projects/ngx-editor/src/lib/editor.component.scss
+++ b/projects/ngx-editor/src/lib/editor.component.scss
@@ -182,12 +182,12 @@ $menubar-text-padding: 0 $menu-item-spacing;
   .NgxEditor__Dropdown--DropdownMenu {
     position: absolute;
     left: 0;
-    top: calc(#{$menubar-height} + 2px);
     box-shadow: rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
     border-radius: $border-radius;
     background-color: #fff;
     z-index: 10;
     width: 100%;
+    top: calc(#{$menubar-height} + 2px);
   }
 
   .NgxEditor__Dropdown--Item {
@@ -218,6 +218,24 @@ $menubar-text-padding: 0 $menu-item-spacing;
   }
 }
 
+.NgxEditor__MenuBar--Reverse {
+  .NgxEditor__Dropdown--DropdownMenu {
+    top: unset;
+    bottom: calc(#{$menubar-height} + 2px);
+  }
+
+  .NgxEditor__Dropdown--Text {
+    &::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  .NgxEditor__Popup {
+    top: unset;
+    bottom: calc(#{$menubar-height} + 2px);
+  }
+}
+
 .NgxEditor__Popup {
   $self: &;
   position: absolute;
diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.html b/projects/ngx-editor/src/lib/modules/menu/menu.component.html
index 858c630e..bf431bc9 100644
--- a/projects/ngx-editor/src/lib/modules/menu/menu.component.html
+++ b/projects/ngx-editor/src/lib/modules/menu/menu.component.html
@@ -1,4 +1,4 @@
-<div class="NgxEditor__MenuBar" [ngClass]="{'NgxEditor--Disabled': disabled}">
+<div class="NgxEditor__MenuBar" [ngClass]="{'NgxEditor--Disabled': disabled, 'NgxEditor__MenuBar--Reverse': dropdownPlacement === 'top'}">
 
   <ng-container *ngFor="let toolbarItem of toolbar; let lastToolbarItem = last">
     <ng-container *ngFor="let item of toolbarItem; let lastItem = last">
diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts b/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
index daab178a..bdf7bc73 100644
--- a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
+++ b/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
@@ -51,6 +51,7 @@ export class MenuComponent implements OnInit {
   @Input() disabled = false;
   @Input() editor: Editor;
   @Input() customMenuRef: TemplateRef<any> | null = null;
+  @Input() dropdownPlacement: 'top' | 'bottom' = 'top';
 
   toggleCommands: any[] = [
     'bold', 'italic',