fix: color picker positioning

Author: wfpena

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wfpena/angular-wysiwyg",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

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",

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">

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>();

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>