From 590fdfd205d6c70d3d7215c986a208bf2b4fe15d Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Tue, 22 Jul 2025 14:59:44 +0000
Subject: [PATCH 1/3] color picker

---
 backend/src/enums/widget-type.enum.ts         |  3 +-
 .../db-table-widgets.component.ts             |  1 +
 .../color/color.component.css                 | 42 +++++++++++++++++++
 .../color/color.component.html                | 23 ++++++++++
 .../color/color.component.ts                  | 36 ++++++++++++++++
 .../color/color.component.css                 | 18 ++++++++
 .../color/color.component.html                | 18 ++++++++
 .../color/color.component.ts                  | 22 ++++++++++
 frontend/src/app/consts/record-edit-types.ts  |  2 +
 .../src/app/consts/table-display-types.ts     |  2 +
 .../shared/enums/table-widget-type.enum.ts    |  1 +
 11 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
 create mode 100644 frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html
 create mode 100644 frontend/src/app/components/ui-components/record-edit-fields/color/color.component.ts
 create mode 100644 frontend/src/app/components/ui-components/table-display-fields/color/color.component.css
 create mode 100644 frontend/src/app/components/ui-components/table-display-fields/color/color.component.html
 create mode 100644 frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts

diff --git a/backend/src/enums/widget-type.enum.ts b/backend/src/enums/widget-type.enum.ts
index 4a421be86..7af6c010e 100644
--- a/backend/src/enums/widget-type.enum.ts
+++ b/backend/src/enums/widget-type.enum.ts
@@ -18,5 +18,6 @@ export enum WidgetTypeEnum {
   URL = 'URL',
   Code = 'Code',
   Phone = 'Phone',
-  Country = 'Country'
+  Country = 'Country',
+  Color = 'Color'
 }
diff --git a/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts
index bf1076cb6..c776a442b 100644
--- a/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts
@@ -193,6 +193,7 @@ export class DbTableWidgetsComponent implements OnInit {
   "allow_negative": true
 }
 `,
+  Color: `// No settings required`,
   }
 
   constructor(
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
new file mode 100644
index 000000000..c8c452e1b
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
@@ -0,0 +1,42 @@
+.color-edit-container {
+  width: 100%;
+}
+
+.color-form-field {
+  width: 100%;
+}
+
+.color-picker-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+}
+
+.color-picker-input {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  padding: 0;
+}
+
+.color-picker-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.color-preview {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  flex-shrink: 0;
+}
+
+.mat-form-field.mat-form-field-invalid .color-preview {
+  border-color: #f44336;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html
new file mode 100644
index 000000000..536561720
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html
@@ -0,0 +1,23 @@
+<div class="color-edit-container">
+  <mat-form-field class="color-form-field" appearance="outline">
+    <mat-label>{{normalizedLabel}}</mat-label>
+    <input matInput type="text" name="{{label}}-{{key}}"
+        [required]="required" [disabled]="disabled" [readonly]="readonly"
+        attr.data-testid="record-{{label}}-color"
+        [(ngModel)]="value" (ngModelChange)="onTextInputChange()"
+        placeholder="#000000"
+        pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$">
+    <div matSuffix class="color-picker-container">
+      <input type="color" 
+             class="color-picker-input"
+             [value]="isValidColor ? value : '#000000'"
+             [disabled]="disabled || readonly"
+             (change)="onColorPickerChange($event)"
+             title="Choose color">
+      <div class="color-preview" 
+           [style.background-color]="isValidColor ? value : '#cccccc'"
+           [title]="value || 'No color'">
+      </div>
+    </div>
+  </mat-form-field>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.ts
new file mode 100644
index 000000000..16d8c5b66
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.ts
@@ -0,0 +1,36 @@
+import { Component, Injectable, Input } from '@angular/core';
+
+import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Injectable()
+
+@Component({
+  selector: 'app-edit-color',
+  templateUrl: './color.component.html',
+  styleUrls: ['./color.component.css'],
+  imports: [MatFormFieldModule, MatInputModule, FormsModule]
+})
+export class ColorEditComponent extends BaseEditFieldComponent {
+  @Input() value: string;
+
+  static type = 'color';
+
+  get isValidColor(): boolean {
+    if (!this.value) return false;
+    const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return colorRegex.test(this.value);
+  }
+
+  onColorPickerChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    this.value = target.value;
+    this.onFieldChange.emit(this.value);
+  }
+
+  onTextInputChange() {
+    this.onFieldChange.emit(this.value);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.css b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.css
new file mode 100644
index 000000000..9f8cf474b
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.css
@@ -0,0 +1,18 @@
+.color-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  flex-shrink: 0;
+}
+
+.field-value {
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.html b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.html
new file mode 100644
index 000000000..4a6b934a7
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.html
@@ -0,0 +1,18 @@
+<div class="field-display">
+  <div class="color-display">
+    <div 
+      class="color-swatch" 
+      [style.background-color]="isValidColor ? value : '#cccccc'"
+      [title]="value || 'No color'"
+    ></div>
+    <span class="field-value">{{value || '—'}}</span>
+  </div>
+  <button type="button" mat-icon-button
+      class="field-copy-button"
+      matTooltip="Copy"
+      [cdkCopyToClipboard]="value"
+      (cdkCopyToClipboardCopied)="onCopyToClipboard.emit('Color value was copied to clipboard.')"
+      (click)="$event.stopPropagation()">
+      <mat-icon>content_copy</mat-icon>
+  </button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts
new file mode 100644
index 000000000..ee071f32a
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts
@@ -0,0 +1,22 @@
+import { Component, Injectable } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Injectable()
+@Component({
+  selector: 'app-display-color',
+  templateUrl: './color.component.html',
+  styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './color.component.css'],
+  imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class ColorDisplayComponent extends BaseTableDisplayFieldComponent {
+  get isValidColor(): boolean {
+    if (!this.value) return false;
+    const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return colorRegex.test(this.value);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/consts/record-edit-types.ts b/frontend/src/app/consts/record-edit-types.ts
index eb0295eed..efefaa413 100644
--- a/frontend/src/app/consts/record-edit-types.ts
+++ b/frontend/src/app/consts/record-edit-types.ts
@@ -1,6 +1,7 @@
 import { BinaryDataCaptionEditComponent } from '../components/ui-components/record-edit-fields/binary-data-caption/binary-data-caption.component';
 import { BooleanEditComponent } from 'src/app/components/ui-components/record-edit-fields/boolean/boolean.component'
 import { CodeEditComponent } from '../components/ui-components/record-edit-fields/code/code.component';
+import { ColorEditComponent } from '../components/ui-components/record-edit-fields/color/color.component';
 import { CountryEditComponent } from '../components/ui-components/record-edit-fields/country/country.component';
 import { DateEditComponent } from '../components/ui-components/record-edit-fields/date/date.component';
 import { DateTimeEditComponent } from '../components/ui-components/record-edit-fields/date-time/date-time.component';
@@ -49,6 +50,7 @@ export const UIwidgets = {
     Phone: PhoneEditComponent,
     Money: MoneyEditComponent,
     Foreign_key: ForeignKeyEditComponent,
+    Color: ColorEditComponent,
 }
 
 export const recordEditTypes = {
diff --git a/frontend/src/app/consts/table-display-types.ts b/frontend/src/app/consts/table-display-types.ts
index 9513fefb3..9dd1a089f 100644
--- a/frontend/src/app/consts/table-display-types.ts
+++ b/frontend/src/app/consts/table-display-types.ts
@@ -1,5 +1,6 @@
 import { BooleanDisplayComponent } from 'src/app/components/ui-components/table-display-fields/boolean/boolean.component';
 import { CodeDisplayComponent } from '../components/ui-components/table-display-fields/code/code.component';
+import { ColorDisplayComponent } from '../components/ui-components/table-display-fields/color/color.component';
 import { CountryDisplayComponent } from '../components/ui-components/table-display-fields/country/country.component';
 import { DateDisplayComponent } from '../components/ui-components/table-display-fields/date/date.component';
 import { DateTimeDisplayComponent } from '../components/ui-components/table-display-fields/date-time/date-time.component';
@@ -42,6 +43,7 @@ export const UIwidgets = {
     Phone: PhoneDisplayComponent,
     Money: MoneyDisplayComponent,
     Foreign_key: ForeignKeyDisplayComponent,
+    Color: ColorDisplayComponent,
 }
 
 export const tableDisplayTypes = {
diff --git a/shared-code/src/data-access-layer/shared/enums/table-widget-type.enum.ts b/shared-code/src/data-access-layer/shared/enums/table-widget-type.enum.ts
index cbedd9c46..eac6aabeb 100644
--- a/shared-code/src/data-access-layer/shared/enums/table-widget-type.enum.ts
+++ b/shared-code/src/data-access-layer/shared/enums/table-widget-type.enum.ts
@@ -19,4 +19,5 @@ export enum TableWidgetTypeEnum {
   Code = 'Code',
   Phone = 'Phone',
   Country = 'Country',
+  Color = 'Color',
 }

From 4fe02ff7662b5e793d900f675661ff9ea62ab509 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Tue, 29 Jul 2025 09:26:45 +0000
Subject: [PATCH 2/3] remove second preview

---
 .../record-edit-fields/color/color.component.css     | 12 ------------
 .../record-edit-fields/color/color.component.html    |  4 ----
 2 files changed, 16 deletions(-)

diff --git a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
index c8c452e1b..6236dd6f0 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
@@ -9,7 +9,6 @@
 .color-picker-container {
   display: flex;
   align-items: center;
-  gap: 4px;
   margin-left: 8px;
 }
 
@@ -29,14 +28,3 @@
   opacity: 0.6;
 }
 
-.color-preview {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  flex-shrink: 0;
-}
-
-.mat-form-field.mat-form-field-invalid .color-preview {
-  border-color: #f44336;
-}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html
index 536561720..99e173663 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html
@@ -14,10 +14,6 @@
              [disabled]="disabled || readonly"
              (change)="onColorPickerChange($event)"
              title="Choose color">
-      <div class="color-preview" 
-           [style.background-color]="isValidColor ? value : '#cccccc'"
-           [title]="value || 'No color'">
-      </div>
     </div>
   </mat-form-field>
 </div>
\ No newline at end of file

From ffae57d8803526acbd00295871b2a20a16e56425 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Tue, 29 Jul 2025 12:51:41 +0300
Subject: [PATCH 3/3] color widget: fix spaces and display

---
 .../db-table-widgets/db-table-widgets.component.ts       | 3 ++-
 .../record-edit-fields/color/color.component.css         | 1 +
 .../table-display-fields/color/color.component.css       | 9 ++++-----
 .../table-display-fields/color/color.component.html      | 6 +++---
 .../table-display-fields/color/color.component.ts        | 3 ++-
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts
index c776a442b..55af1b0b0 100644
--- a/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts
@@ -193,7 +193,8 @@ export class DbTableWidgetsComponent implements OnInit {
   "allow_negative": true
 }
 `,
-  Color: `// No settings required`,
+  Color: `// No settings required
+// You can use this field to display colors in hex format, like #FF5733 or #333.`,
   }
 
   constructor(
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
index 6236dd6f0..4e1b787a7 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css
@@ -21,6 +21,7 @@
   outline: none;
   background: none;
   padding: 0;
+  margin-right: 8px;
 }
 
 .color-picker-input:disabled {
diff --git a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.css b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.css
index 9f8cf474b..273272d64 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.css
@@ -5,14 +5,13 @@
 }
 
 .color-swatch {
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   border-radius: 4px;
-  border: 1px solid #ccc;
+  /* border: 1px solid #ccc; */
   flex-shrink: 0;
 }
 
 .field-value {
-  font-family: 'Courier New', monospace;
-  font-size: 0.9em;
+  font-family: monospace;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.html b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.html
index 4a6b934a7..331411389 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.html
@@ -1,8 +1,8 @@
 <div class="field-display">
   <div class="color-display">
-    <div 
-      class="color-swatch" 
-      [style.background-color]="isValidColor ? value : '#cccccc'"
+    <div *ngIf="isValidColor"
+      class="color-swatch"
+      [style.background-color]="value"
       [title]="value || 'No color'"
     ></div>
     <span class="field-value">{{value || '—'}}</span>
diff --git a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts
index ee071f32a..ed3651077 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts
@@ -5,13 +5,14 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgIf } from '@angular/common';
 
 @Injectable()
 @Component({
   selector: 'app-display-color',
   templateUrl: './color.component.html',
   styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './color.component.css'],
-  imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+  imports: [NgIf, ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
 })
 export class ColorDisplayComponent extends BaseTableDisplayFieldComponent {
   get isValidColor(): boolean {