From d6ff604f585053afc6318108c282ec2623154ac7 Mon Sep 17 00:00:00 2001
From: wfpena <wilsonf.pena@gmail.com>
Date: Thu, 7 Nov 2024 09:15:42 -0300
Subject: [PATCH] fix: color picker positioning

---
 package.json                                  |  2 +-
 projects/angular-editor/package.json          |  2 +-
 .../lib/angular-editor-toolbar.component.html | 27 ++++++++++++-------
 .../lib/angular-editor-toolbar.component.ts   |  2 ++
 .../src/lib/angular-editor.component.html     |  1 +
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 596c3b4..d001ba7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wfpena/angular-wysiwyg",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/projects/angular-editor/package.json b/projects/angular-editor/package.json
index f7ffc4b..692c23d 100644
--- a/projects/angular-editor/package.json
+++ b/projects/angular-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wfpena/angular-wysiwyg",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A rich WYSIWYG text editor for Angular 13+. Rich Text editor component for Angular built using Angular 17.",
   "author": "Wilson Pena <wilsonf.pena@gmail.com>",
   "repository": "https://github.com/wfpena/angular-wysiwyg",
diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
index b317065..a6e9dbc 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
@@ -95,24 +95,31 @@
                title="Font Size">
     </ae-select>
   </div>
-  <div class="angular-editor-toolbar-set">
+  <div class="angular-editor-toolbar-set" style="position: relative;">
     <input
-      style="display: none"
-      type="color" (change)="insertColor(fgInput.value, 'textColor')"
+      type="color"
+      (change)="insertColor(fgInput.value, 'textColor')"
+      style="visibility: hidden;height: 0px; width: 0px; position: absolute; left: 25px;"
+      [style.top]="toolbarPosition !== 'bottom' ? '-225px' : '225px'"
       #fgInput>
-    <button [id]="'foregroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; fgInput.click()"
+    <button [id]="'foregroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="fgInput.click()"
             title="Text Color"
             [disabled]="htmlMode" [hidden]="isButtonHidden('textColor')" tabindex="-1"><span
       class="color-label foreground"><i class="fa fa-font"></i></span>
     </button>
+  </div>
+  <div class="angular-editor-toolbar-set" style="position: relative;">
     <input
-      style="display: none"
-      type="color" (change)="insertColor(bgInput.value, 'backgroundColor')"
+      type="color"
+      (change)="insertColor(bgInput.value, 'backgroundColor')"
+      style="visibility: hidden;height: 0px; width: 0px; position: absolute; left: 25px;"
+      [style.top]="toolbarPosition !== 'bottom' ? '-225px' : '225px'"
       #bgInput>
-    <button [id]="'backgroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; bgInput.click()"
-            title="Background Color"
-            [disabled]="htmlMode" [hidden]="isButtonHidden('backgroundColor')" tabindex="-1"><span
-      class="color-label background"><i class="fa fa-font"></i></span>
+    <button [id]="'backgroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="bgInput.click()"
+            title="Background ColorA"
+            [disabled]="htmlMode"
+            [hidden]="isButtonHidden('backgroundColor')"
+            tabindex="-1"><span class="color-label background"><i class="fa fa-font"></i></span>
     </button>
   </div>
   <div *ngIf="_customClasses" class="angular-editor-toolbar-set">
diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
index d05394d..c64555a 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
@@ -166,6 +166,8 @@ export class AngularEditorToolbarComponent {
     }
   }
 
+  @Input() toolbarPosition: string;
+
   @Input() hiddenButtons: string[][];
 
   @Output() execute: EventEmitter<string> = new EventEmitter<string>();
diff --git a/projects/angular-editor/src/lib/angular-editor.component.html b/projects/angular-editor/src/lib/angular-editor.component.html
index 321bed9..4ab63c0 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.html
+++ b/projects/angular-editor/src/lib/angular-editor.component.html
@@ -68,6 +68,7 @@
           [defaultFontName]="config.defaultFontName"
           [defaultFontSize]="config.defaultFontSize"
           [hiddenButtons]="config.toolbarHiddenButtons"
+          [toolbarPosition]="config.toolbarPosition"
           (execute)="executeCommand($event)"
      ></angular-editor-toolbar>
 </div>