Add color picker

tools/src/app/app.routes.ts

@@ -7,6 +7,7 @@ import { TextToCronComponent } from '../tools/client-side/text-to-cron/text-to-c
 import { DdsToPngComponent } from '../tools/client-side/dds-to-png/dds-to-png.component';
 import { ImageConverterComponent } from '../tools/server-side/image-converter/image-converter.component';
 import { WordCounterComponent } from '../tools/client-side/word-counter/word-counter.component';
+import { ColorPickerComponent } from '../tools/client-side/color-picker/color-picker/color-picker.component';
 
 export const routes: Routes = [
   {
@@ -48,6 +49,11 @@ export const routes: Routes = [
     path: 'text-counter',
     pathMatch: 'full',
     component: WordCounterComponent
+  },
+  {
+    path: 'color-picker',
+    pathMatch: 'full',
+    component: ColorPickerComponent
   }
 ];
 

tools/src/app/header/header.component.ts

@@ -53,6 +53,11 @@ export class HeaderComponent implements OnInit {
 												label: 'Text to Cron Expression',
 												routerLink: 'text-to-cron',
 												routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Color picker',
+												routerLink: 'color-picker',
+												routerLinkActiveOptions: { exact: true }
 											}
 									],
 									

tools/src/tools/client-side/color-picker/color-picker/color-picker.component.html

@@ -0,0 +1,5 @@
+<div class="color-picker">
+    <label for="color-input">Choose Color:</label>
+    <input #colorPicker type="color" id="color-input" [formControl]="colorControl" (input)="onColorChange(colorPicker.value)" />
+    <input #colorText type="text" [formControl]="colorControl" (input)="onColorChange(colorText.value)" />
+</div>

tools/src/tools/client-side/color-picker/color-picker/color-picker.component.scss

@@ -0,0 +1,18 @@
+.color-picker {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  .color-picker input[type="color"] {
+    width: 50px;
+    height: 50px;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .color-picker input[type="text"] {
+    padding: 5px;
+    font-size: 16px;
+    width: 100px;
+  }

tools/src/tools/client-side/color-picker/color-picker/color-picker.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ColorPickerComponent } from './color-picker.component';
+
+describe('ColorPickerComponent', () => {
+  let component: ColorPickerComponent;
+  let fixture: ComponentFixture<ColorPickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ColorPickerComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ColorPickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/tools/client-side/color-picker/color-picker/color-picker.component.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+  selector: 'app-color-picker',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    InputTextModule,
+    ButtonModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './color-picker.component.html',
+  styleUrl: './color-picker.component.scss'
+})
+export class ColorPickerComponent {
+  colorControl = new FormControl('#ff0000');
+
+  onColorChange(value: string) {
+    this.colorControl.setValue(value);
+  }
+}