From 4597e51f580f22701d602c5322c419f9f229d4b4 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 17 Nov 2025 17:20:56 +0200
Subject: [PATCH 1/2] widgets: add background_color option for select widget

---
 .../record-view-fields/select/select.component.css           | 5 ++++-
 .../record-view-fields/select/select.component.html          | 2 +-
 .../record-view-fields/select/select.component.ts            | 2 ++
 .../table-display-fields/select/select.component.css         | 5 ++++-
 .../table-display-fields/select/select.component.html        | 2 +-
 .../table-display-fields/select/select.component.ts          | 2 ++
 6 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/ui-components/record-view-fields/select/select.component.css b/frontend/src/app/components/ui-components/record-view-fields/select/select.component.css
index 8b1378917..288f5afca 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/select/select.component.css
+++ b/frontend/src/app/components/ui-components/record-view-fields/select/select.component.css
@@ -1 +1,4 @@
-
+.field-view-value {
+    padding: 2px 6px;
+    border-radius: 4px;
+}
diff --git a/frontend/src/app/components/ui-components/record-view-fields/select/select.component.html b/frontend/src/app/components/ui-components/record-view-fields/select/select.component.html
index 8f3bd4c32..2fd355c75 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/select/select.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/select/select.component.html
@@ -1 +1 @@
-<span class="field-view-value">{{displayValue}}</span>
+<span class="field-view-value" [style.backgroundColor]="backgroundColor">{{displayValue}}</span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/select/select.component.ts b/frontend/src/app/components/ui-components/record-view-fields/select/select.component.ts
index 7b196d05f..fb414c937 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/select/select.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/select/select.component.ts
@@ -11,6 +11,7 @@ import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-rec
 })
 export class SelectRecordViewComponent extends BaseRecordViewFieldComponent implements OnInit {
   public displayValue: string;
+  public backgroundColor: string;
 
   ngOnInit(): void {
     this.setDisplayValue();
@@ -28,6 +29,7 @@ export class SelectRecordViewComponent extends BaseRecordViewFieldComponent impl
         (opt: { value: any, label: string }) => opt.value === this.value
       );
       this.displayValue = option ? option.label : this.value;
+      this.backgroundColor = option && option.background_color ? option.background_color : 'transparent';
     } else if (this.structure?.data_type_params) {
       // If no widget structure but we have data_type_params, just use the value
       this.displayValue = this.value;
diff --git a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.css b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.css
index 8b1378917..3015d8368 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.css
@@ -1 +1,4 @@
-
+.field-value {
+    padding: 2px 6px;
+    border-radius: 4px;
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.html b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.html
index 58124cc57..6a53e0703 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.html
@@ -1,5 +1,5 @@
 <div class="field-display">
-  <span class="field-value">{{displayValue}}</span>
+  <span class="field-value" [style.backgroundColor]="backgroundColor">{{displayValue}}</span>
   <button type="button" mat-icon-button
       class="field-copy-button"
       matTooltip="Copy"
diff --git a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.ts b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.ts
index ef98d4e69..ef7407857 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.ts
@@ -15,6 +15,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 })
 export class SelectDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
   public displayValue: string;
+  public backgroundColor: string;
 
   ngOnInit(): void {
     this.setDisplayValue();
@@ -32,6 +33,7 @@ export class SelectDisplayComponent extends BaseTableDisplayFieldComponent imple
         (opt: { value: any, label: string }) => opt.value === this.value
       );
       this.displayValue = option ? option.label : this.value;
+      this.backgroundColor = option && option.background_color ? option.background_color : 'transparent';
     } else if (this.structure?.data_type_params) {
       // If no widget structure but we have data_type_params, just use the value
       this.displayValue = this.value;

From fd3e30bc76bce19635df8125e84f6d1479328fe4 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 17 Nov 2025 17:27:58 +0200
Subject: [PATCH 2/2] widgets: add abckground_color to param example

---
 .../db-table-widgets/db-table-widgets.component.ts       | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
index 1138124d0..c45046d76 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
@@ -219,15 +219,18 @@ export class DbTableWidgetsComponent implements OnInit {
   "options": [
     {
       "value": "UA",
-      "label": "🇺🇦 Ukraine"
+      "label": "🇺🇦 Ukraine",
+      "background_color": "gold"
     },
     {
       "value": "PL",
-      "label": "🇵🇱 Poland"
+      "label": "🇵🇱 Poland",
+      "background_color": "#FF1212"
     },
     {
       "value": "US",
-      "label": "🇺🇸 United States"
+      "label": "🇺🇸 United States",
+      "background_color": "rgba(100, 150, 255, 0.5)"
     }
   ]
 }`,