color picker

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'
 }

frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts

@@ -193,6 +193,8 @@ export class DbTableWidgetsComponent implements OnInit {
   "allow_negative": true
 }
 `,
+  Color: `// No settings required
+// You can use this field to display colors in hex format, like #FF5733 or #333.`,
   }
 
   constructor(

frontend/src/app/components/ui-components/record-edit-fields/color/color.component.css

@@ -0,0 +1,31 @@
+.color-edit-container {
+  width: 100%;
+}
+
+.color-form-field {
+  width: 100%;
+}
+
+.color-picker-container {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+}
+
+.color-picker-input {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.color-picker-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+

frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html

@@ -0,0 +1,19 @@
+<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>
+  </mat-form-field>
+</div>

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);
+  }
+}

frontend/src/app/components/ui-components/table-display-fields/color/color.component.css

@@ -0,0 +1,17 @@
+.color-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  /* border: 1px solid #ccc; */
+  flex-shrink: 0;
+}
+
+.field-value {
+  font-family: monospace;
+}

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 *ngIf="isValidColor"
+      class="color-swatch"
+      [style.background-color]="value"
+      [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>

frontend/src/app/components/ui-components/table-display-fields/color/color.component.ts

@@ -0,0 +1,23 @@
+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';
+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: [NgIf, 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);
+  }
+}

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 = {

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 = {

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',
 }