From 3009c886167c641ecb343f70e615ccf8ffe825a9 Mon Sep 17 00:00:00 2001
From: d2eight <dzolotarenko@thingsboard.io>
Date: Mon, 15 Apr 2024 18:33:18 +0300
Subject: [PATCH 1/2] Adding card-padding setting to the next lis of widgets:
 Value and chart card Simpe Value and chart card Doughnut Progress bar Toggle
 button Power button Slider Battery level Signal strength Liquid level

---
 .../basic/button/power-button-basic-config.component.html   | 6 ++++++
 .../basic/button/power-button-basic-config.component.ts     | 2 ++
 .../basic/button/toggle-button-basic-config.component.html  | 6 ++++++
 .../basic/button/toggle-button-basic-config.component.ts    | 2 ++
 .../cards/aggregated-value-card-basic-config.component.html | 6 ++++++
 .../cards/aggregated-value-card-basic-config.component.ts   | 2 ++
 .../basic/cards/progress-bar-basic-config.component.html    | 6 ++++++
 .../basic/cards/progress-bar-basic-config.component.ts      | 2 ++
 .../cards/value-chart-card-basic-config.component.html      | 6 ++++++
 .../basic/cards/value-chart-card-basic-config.component.ts  | 2 ++
 .../config/basic/chart/doughnut-basic-config.component.html | 6 ++++++
 .../config/basic/chart/doughnut-basic-config.component.ts   | 2 ++
 .../indicator/battery-level-basic-config.component.html     | 6 ++++++
 .../basic/indicator/battery-level-basic-config.component.ts | 2 ++
 .../indicator/liquid-level-card-basic-config.component.html | 6 ++++++
 .../indicator/liquid-level-card-basic-config.component.ts   | 2 ++
 .../indicator/signal-strength-basic-config.component.html   | 6 ++++++
 .../indicator/signal-strength-basic-config.component.ts     | 2 ++
 .../config/basic/rpc/slider-basic-config.component.html     | 6 ++++++
 .../config/basic/rpc/slider-basic-config.component.ts       | 2 ++
 .../widget/lib/button/toggle-button-widget.component.html   | 3 ++-
 .../widget/lib/button/toggle-button-widget.component.ts     | 4 ++++
 .../widget/lib/button/toggle-button-widget.models.ts        | 4 +++-
 .../lib/cards/aggregated-value-card-widget.component.html   | 3 ++-
 .../lib/cards/aggregated-value-card-widget.component.ts     | 4 ++++
 .../widget/lib/cards/aggregated-value-card.models.ts        | 4 +++-
 .../widget/lib/cards/progress-bar-widget.component.html     | 3 ++-
 .../widget/lib/cards/progress-bar-widget.component.ts       | 4 ++++
 .../widget/lib/cards/progress-bar-widget.models.ts          | 4 +++-
 .../widget/lib/cards/value-chart-card-widget.component.html | 3 ++-
 .../widget/lib/cards/value-chart-card-widget.component.ts   | 4 ++++
 .../widget/lib/cards/value-chart-card-widget.models.ts      | 4 +++-
 .../widget/lib/chart/doughnut-widget.component.html         | 3 ++-
 .../widget/lib/chart/doughnut-widget.component.ts           | 4 ++++
 .../components/widget/lib/chart/doughnut-widget.models.ts   | 4 +++-
 .../lib/indicator/battery-level-widget.component.html       | 3 ++-
 .../widget/lib/indicator/battery-level-widget.component.ts  | 4 ++++
 .../widget/lib/indicator/battery-level-widget.models.ts     | 4 +++-
 .../widget/lib/indicator/liquid-level-widget.component.html | 3 ++-
 .../widget/lib/indicator/liquid-level-widget.component.ts   | 4 ++++
 .../widget/lib/indicator/liquid-level-widget.models.ts      | 4 +++-
 .../lib/indicator/signal-strength-widget.component.html     | 3 ++-
 .../lib/indicator/signal-strength-widget.component.ts       | 4 ++++
 .../widget/lib/indicator/signal-strength-widget.models.ts   | 4 +++-
 .../widget/lib/rpc/power-button-widget.component.html       | 3 ++-
 .../widget/lib/rpc/power-button-widget.component.ts         | 4 ++++
 .../components/widget/lib/rpc/power-button-widget.models.ts | 4 +++-
 .../components/widget/lib/rpc/slider-widget.component.html  | 3 ++-
 .../components/widget/lib/rpc/slider-widget.component.ts    | 4 ++++
 .../home/components/widget/lib/rpc/slider-widget.models.ts  | 4 +++-
 .../button/power-button-widget-settings.component.html      | 6 ++++++
 .../button/power-button-widget-settings.component.ts        | 3 ++-
 .../button/toggle-button-widget-settings.component.html     | 6 ++++++
 .../button/toggle-button-widget-settings.component.ts       | 3 ++-
 .../aggregated-value-card-widget-settings.component.html    | 6 ++++++
 .../aggregated-value-card-widget-settings.component.ts      | 3 ++-
 .../cards/progress-bar-widget-settings.component.html       | 6 ++++++
 .../cards/progress-bar-widget-settings.component.ts         | 3 ++-
 .../cards/value-chart-card-widget-settings.component.html   | 6 ++++++
 .../cards/value-chart-card-widget-settings.component.ts     | 3 ++-
 .../settings/chart/doughnut-widget-settings.component.html  | 6 ++++++
 .../settings/chart/doughnut-widget-settings.component.ts    | 3 ++-
 .../settings/control/slider-widget-settings.component.html  | 6 ++++++
 .../settings/control/slider-widget-settings.component.ts    | 1 +
 .../indicator/battery-level-widget-settings.component.html  | 6 ++++++
 .../indicator/battery-level-widget-settings.component.ts    | 3 ++-
 .../liquid-level-card-widget-settings.component.html        | 6 ++++++
 .../liquid-level-card-widget-settings.component.ts          | 1 +
 .../signal-strength-widget-settings.component.html          | 6 ++++++
 .../indicator/signal-strength-widget-settings.component.ts  | 1 +
 70 files changed, 247 insertions(+), 27 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
index 8d057515b3..9003b70fe0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@@ -190,6 +190,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.ts
index 174ded9ed3..2c92936141 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.ts
@@ -100,6 +100,7 @@ export class PowerButtonBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -140,6 +141,7 @@ export class PowerButtonBasicConfigComponent extends BasicWidgetConfigComponent
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
index 19e05057bb..a615a022d4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
@@ -170,6 +170,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
       formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.ts
index e93a3a9e38..281d7188d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.ts
@@ -92,6 +92,7 @@ export class ToggleButtonBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -128,6 +129,7 @@ export class ToggleButtonBasicConfigComponent extends BasicWidgetConfigComponent
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
index 8487212a16..8044dcfc79 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
@@ -147,6 +147,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
index f45cbb4c6b..0b7a29d723 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
@@ -255,6 +255,7 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -302,6 +303,7 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
index 9f8d580bbc..4780983685 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
@@ -167,6 +167,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
index 2036d30f88..f9b4356f59 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
@@ -126,6 +126,7 @@ export class ProgressBarBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -170,6 +171,7 @@ export class ProgressBarBasicConfigComponent extends BasicWidgetConfigComponent
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
index 3cf96ecd40..e8b173fde1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
@@ -130,6 +130,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
index 26c97ffeb5..8fa1437d1c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
@@ -116,6 +116,7 @@ export class ValueChartCardBasicConfigComponent extends BasicWidgetConfigCompone
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -156,6 +157,7 @@ export class ValueChartCardBasicConfigComponent extends BasicWidgetConfigCompone
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html
index 9d6e9a4bd5..615f9abc7b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html
@@ -248,6 +248,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
index 99e45d49a7..30d015a657 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
@@ -170,6 +170,7 @@ export class DoughnutBasicConfigComponent extends BasicWidgetConfigComponent {
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -221,6 +222,7 @@ export class DoughnutBasicConfigComponent extends BasicWidgetConfigComponent {
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
index 3cbc1d4a6c..768f1d89ad 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
@@ -130,6 +130,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
index 8244fc85db..18c99d87cd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
@@ -121,6 +121,7 @@ export class BatteryLevelBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -157,6 +158,7 @@ export class BatteryLevelBasicConfigComponent extends BasicWidgetConfigComponent
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index b00a89969b..a3bfce9d5d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -332,6 +332,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
index 0fc034d496..2a9994486c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
@@ -223,6 +223,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
       background: [settings.background],
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -290,6 +291,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.background = config.background;
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
index 9d6c7d9b05..0e8475aacf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
@@ -193,6 +193,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
index ed04af6049..dd4bf4f65a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
@@ -138,6 +138,7 @@ export class SignalStrengthBasicConfigComponent extends BasicWidgetConfigCompone
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -189,6 +190,7 @@ export class SignalStrengthBasicConfigComponent extends BasicWidgetConfigCompone
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index a8d84d4dc4..d9d0694bdd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -264,6 +264,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
       formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
index b80c6acb08..5f336f8580 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
@@ -129,6 +129,7 @@ export class SliderBasicConfigComponent extends BasicWidgetConfigComponent {
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -193,6 +194,7 @@ export class SliderBasicConfigComponent extends BasicWidgetConfigComponent {
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
index 366b7d3290..3fe6d5c239 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-toggle-button-panel" [style]="backgroundStyle$ | async">
+<div class="tb-toggle-button-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-toggle-button-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-toggle-button-container"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts
index b6943775a7..d982ea6f6d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts
@@ -40,6 +40,8 @@ export class ToggleButtonWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   value = false;
   disabled = false;
@@ -68,6 +70,8 @@ export class ToggleButtonWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     const getInitialStateSettings =
       {...this.settings.initialState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.initial-state')};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.models.ts
index 91bc8a65b8..12e115792b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.models.ts
@@ -41,6 +41,7 @@ export interface ToggleButtonWidgetSettings {
   checkedAppearance: WidgetButtonAppearance;
   uncheckedAppearance: WidgetButtonAppearance;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const toggleButtonDefaultSettings: ToggleButtonWidgetSettings = {
@@ -139,5 +140,6 @@ export const toggleButtonDefaultSettings: ToggleButtonWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
index ce19fad496..390542d524 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-aggregated-value-card-panel" [style]="backgroundStyle$ | async">
+<div class="tb-aggregated-value-card-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-aggregated-value-card-overlay" [style]="overlayStyle"></div>
   <div class="tb-aggregated-value-card-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
index 908ed263e4..a82cd1631e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
@@ -106,6 +106,8 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   private lineChart: TbTimeSeriesChart;
   private lineChartDataKey: DataKey;
@@ -169,6 +171,8 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
   }
 
   ngAfterViewInit(): void {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
index 34a3433ac5..d9aa4ff175 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
@@ -43,6 +43,7 @@ export interface AggregatedValueCardWidgetSettings {
   dateColor: string;
   showChart: boolean;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export enum AggregatedValueCardKeyPosition {
@@ -145,7 +146,8 @@ export const aggregatedValueCardDefaultSettings: AggregatedValueCardWidgetSettin
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '18px'
 };
 
 export const aggregatedValueCardDefaultKeySettings: AggregatedValueCardKeySettings = {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
index 405276cdd5..729b57e389 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div #progressBarPanel class="tb-progress-bar-panel" [style]="backgroundStyle$ | async">
+<div #progressBarPanel class="tb-progress-bar-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-progress-bar-overlay" [style]="overlayStyle"></div>
   <div #progressBarContainer class="tb-progress-bar-container" [class]="layoutClass">
     <ng-container *ngIf="layout === progressBarLayout.default">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
index 77b35227ef..4f2515ed11 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
@@ -98,6 +98,8 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   progressBarPanelResize$: ResizeObserver;
 
@@ -151,6 +153,8 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
   }
 
   ngAfterViewInit() {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.models.ts
index 0361e63b35..e7a8d4cce3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.models.ts
@@ -57,6 +57,7 @@ export interface ProgressBarWidgetSettings {
   barColor: ColorSettings;
   barBackground: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const progressBarDefaultSettings: ProgressBarWidgetSettings = {
@@ -94,5 +95,6 @@ export const progressBarDefaultSettings: ProgressBarWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
index ba538d8104..cd932180f6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-value-chart-card-panel" [style]="backgroundStyle$ | async">
+<div class="tb-value-chart-card-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-value-chart-card-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #valueChartCardContent class="tb-value-chart-card-content" [class]="layout" [class.auto-scale]="autoScale && showValue">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
index fe5953787a..3b075f183c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
@@ -98,6 +98,8 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   private lineChart: TbTimeSeriesChart;
   private lineChartDataKey: DataKey;
@@ -146,6 +148,8 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     if (this.ctx.defaultSubscription.firstDatasource?.dataKeys?.length) {
       this.lineChartDataKey = this.ctx.defaultSubscription.firstDatasource?.dataKeys[0];
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.models.ts
index 22d26206fb..2849c85a47 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.models.ts
@@ -50,6 +50,7 @@ export interface ValueChartCardWidgetSettings {
   valueFont: Font;
   valueColor: ColorSettings;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const valueChartCardDefaultSettings: ValueChartCardWidgetSettings = {
@@ -73,5 +74,6 @@ export const valueChartCardDefaultSettings: ValueChartCardWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.html
index 3465e80c15..d22fe8e69e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-doughnut-panel" [style]="backgroundStyle$ | async">
+<div class="tb-doughnut-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-doughnut-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #doughnutContent class="tb-doughnut-content" [class]="legendClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
index d215f37a32..743ed00528 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
@@ -107,6 +107,8 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   legendItems: DoughnutLegendItem[];
   legendLabelStyle: ComponentStyle;
@@ -159,6 +161,8 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     if (this.showLegend) {
       this.legendItems = [];
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
index 9110cfcd4d..1e61166630 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
@@ -86,6 +86,7 @@ export interface DoughnutWidgetSettings {
   tooltipBackgroundColor: string;
   tooltipBackgroundBlur: number;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const doughnutDefaultSettings = (horizontal: boolean): DoughnutWidgetSettings => ({
@@ -144,5 +145,6 @@ export const doughnutDefaultSettings = (horizontal: boolean): DoughnutWidgetSett
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 });
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
index c22145075a..e3bd3c5746 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-battery-level-panel" [style]="backgroundStyle$ | async" [class.tb-battery-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-battery-level-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async" [class.tb-battery-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
   <div class="tb-battery-level-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #batteryLevelContent class="tb-battery-level-content" [class]="layoutClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
index 0cc6d266b0..3fdad38aca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
@@ -132,6 +132,8 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   batteryBoxResize$: ResizeObserver;
 
@@ -199,6 +201,8 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.models.ts
index 081aae6558..beb4ea7a6a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.models.ts
@@ -61,6 +61,7 @@ export interface BatteryLevelWidgetSettings {
   batteryLevelColor: ColorSettings;
   batteryShapeColor: ColorSettings;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const batteryLevelDefaultSettings: BatteryLevelWidgetSettings = {
@@ -105,6 +106,7 @@ export const batteryLevelDefaultSettings: BatteryLevelWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
index 5c247ca794..5cbdb3007d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-liquid-level-panel" [style]="backgroundStyle$ | async" [class.tb-liquid-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-liquid-level-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async" [class.tb-liquid-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
   <div class="tb-liquid-level-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #liquidLevelContent class="tb-liquid-level-content"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
index 0933bfe537..946ee201ee 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
@@ -81,6 +81,8 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   hasCardClickAction = false;
 
@@ -124,6 +126,8 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
index 632cfe570d..96b6a531d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
@@ -81,6 +81,7 @@ export interface LevelCardWidgetSettings extends WidgetConfig {
   tooltipBackgroundColor: string;
   tooltipBackgroundBlur: number;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export enum Shapes {
@@ -322,7 +323,8 @@ export const levelCardDefaultSettings: LevelCardWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 
 export const convertLiters = (value: number, units: CapacityUnits, conversionType: ConversionType): number => {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
index 79f95c52d3..c76e137e39 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-signal-strength-panel" [style]="backgroundStyle$ | async" [class.tb-signal-strength-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-signal-strength-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async" [class.tb-signal-strength-pointer]="hasCardClickAction" (click)="cardClick($event)">
     <div class="tb-signal-strength-overlay" [style]="overlayStyle"></div>
     <div *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel || showDate" class="tb-signal-strength-title-panel">
         <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
index ef60683d70..e681d3b24e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
@@ -125,6 +125,8 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   shapeResize$: ResizeObserver;
 
@@ -208,6 +210,8 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.models.ts
index 6b426197d0..f085787079 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.models.ts
@@ -66,6 +66,7 @@ export interface SignalStrengthWidgetSettings {
   tooltipBackgroundColor: string;
   tooltipBackgroundBlur: number;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const signalStrengthDefaultSettings: SignalStrengthWidgetSettings = {
@@ -126,7 +127,8 @@ export const signalStrengthDefaultSettings: SignalStrengthWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 
 export const signalBarActive = (rssi: number, index: number): boolean => {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
index 48e4106a97..78bc0852bf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-power-button-panel" [style]="backgroundStyle$ | async">
+<div class="tb-power-button-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-power-button-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-power-button-content">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts
index 02c58b3e9a..997fc16cb3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts
@@ -56,6 +56,8 @@ export class PowerButtonWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   value = false;
   disabled = false;
@@ -82,6 +84,8 @@ export class PowerButtonWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     const getInitialStateSettings =
       {...this.settings.initialState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.initial-state')};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
index 656ba75fa1..00cc3f24f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
@@ -75,6 +75,7 @@ export interface PowerButtonWidgetSettings {
   mainColorDisabled: string;
   backgroundColorDisabled: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const powerButtonDefaultSettings: PowerButtonWidgetSettings = {
@@ -173,7 +174,8 @@ export const powerButtonDefaultSettings: PowerButtonWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 
 interface PowerButtonColor {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
index f15892dd52..f92b688526 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-slider-panel" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style]="backgroundStyle$ | async">
+<div class="tb-slider-panel" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-slider-overlay" [style]="overlayStyle"></div>
   <div *ngIf="showWidgetTitlePanel" class="tb-slider-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
index 37b5319d44..7ab378db69 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
@@ -94,6 +94,8 @@ export class SliderWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   value: number = null;
   private prevValue: number = null;
@@ -145,6 +147,8 @@ export class SliderWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     this.layout = this.settings.layout;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts
index f6daba5da7..3df4359dce 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts
@@ -81,6 +81,7 @@ export interface SliderWidgetSettings {
   rightIconSizeUnit: cssUnit;
   rightIconColor: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const sliderWidgetDefaultSettings: SliderWidgetSettings = {
@@ -192,5 +193,6 @@ export const sliderWidgetDefaultSettings: SliderWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '24px'
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
index b37030c884..9552e59a87 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
@@ -81,6 +81,12 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.power-button.button</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.ts
index c1d9f98460..141db877b1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.ts
@@ -82,7 +82,8 @@ export class PowerButtonWidgetSettingsComponent extends WidgetSettingsComponent
       mainColorDisabled: [settings.mainColorDisabled, []],
       backgroundColorDisabled: [settings.backgroundColorDisabled, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
index 3a7e5865c1..a5d12ee890 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
@@ -92,6 +92,12 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <div class="tb-form-panel">
     <div fxLayout="row" fxLayoutAlign="space-between center">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.ts
index 04788e3a14..ef0d1b08a3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.ts
@@ -72,7 +72,8 @@ export class ToggleButtonWidgetSettingsComponent extends WidgetSettingsComponent
       checkedAppearance: [settings.checkedAppearance, []],
       uncheckedAppearance: [settings.uncheckedAppearance, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
index 0cb8b62616..8c8c3e9793 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
@@ -66,5 +66,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts
index 643bd59e46..5f5301c5cd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts
@@ -63,7 +63,8 @@ export class AggregatedValueCardWidgetSettingsComponent extends WidgetSettingsCo
 
       showChart: [settings.showChart, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
index 31c8276666..7b849f0b00 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
@@ -93,5 +93,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.ts
index d1d30011b8..5886c75330 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.ts
@@ -79,7 +79,8 @@ export class ProgressBarWidgetSettingsComponent extends WidgetSettingsComponent
       barColor: [settings.barColor, []],
       barBackground: [settings.barBackground, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
index 013dfe1a7a..661761fb3b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
@@ -53,5 +53,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.ts
index 403dc4adbe..fd9a9501b1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.ts
@@ -66,7 +66,8 @@ export class ValueChartCardWidgetSettingsComponent extends WidgetSettingsCompone
       valueFont: [settings.valueFont, []],
       valueColor: [settings.valueColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html
index ac99c1c42e..859fee522b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html
@@ -159,5 +159,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts
index 20910e36af..8e12baafbf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts
@@ -116,7 +116,8 @@ export class DoughnutWidgetSettingsComponent extends WidgetSettingsComponent {
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
index 0f3c3f11a3..f516fd732b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@@ -75,6 +75,12 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.slider.slider</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts
index a215a93d88..86e66ee44a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts
@@ -113,6 +113,7 @@ export class SliderWidgetSettingsComponent extends WidgetSettingsComponent {
       rightIconColor: [settings.rightIconColor, []],
 
       background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
index ed79ec1820..f8d8f053d3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
@@ -67,5 +67,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
index fb0e2b540c..95015b0901 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
@@ -75,7 +75,8 @@ export class BatteryLevelWidgetSettingsComponent extends WidgetSettingsComponent
       batteryLevelColor: [settings.batteryLevelColor, []],
       batteryShapeColor: [settings.batteryShapeColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index 0040e7fa64..f4a1c9c6cb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -185,6 +185,12 @@
         <tb-background-settings formControlName="background">
         </tb-background-settings>
       </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'widget-config.card-padding' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
       <div class="tb-form-row space-between"
            *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
index e25e02d1b7..ad424069a8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
@@ -173,6 +173,7 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
 
       liquidColor: [settings.liquidColor, []],
       background: [settings.background],
+      padding: [settings.padding, []],
 
       showTooltip: [settings.showTooltip, []],
       showTooltipLevel: [settings.showTooltipLevel, []],
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
index 2270ebbddc..7124ee0f02 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
@@ -62,6 +62,12 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.signal-strength.no-signal-rssi-value</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts
index 075a4eb506..8e0dad0daa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts
@@ -87,6 +87,7 @@ export class SignalStrengthWidgetSettingsComponent extends WidgetSettingsCompone
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
 
       background: [settings.background, []],
+      padding: [settings.padding, []],
       noSignalRssiValue: [settings.noSignalRssiValue, []]
     });
   }

From 7ac88d807ce121e554cdb98cb66760553a7246a3 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 31 May 2024 16:19:00 +0300
Subject: [PATCH 2/2] UI: Optimize code to override overlay padding in widgets

---
 .../widget/lib/button/toggle-button-widget.component.html     | 3 +--
 .../widget/lib/button/toggle-button-widget.component.ts       | 4 +---
 .../lib/cards/aggregated-value-card-widget.component.html     | 3 +--
 .../lib/cards/aggregated-value-card-widget.component.ts       | 4 +---
 .../widget/lib/cards/progress-bar-widget.component.html       | 3 +--
 .../widget/lib/cards/progress-bar-widget.component.ts         | 4 +---
 .../widget/lib/cards/value-chart-card-widget.component.html   | 3 +--
 .../widget/lib/cards/value-chart-card-widget.component.ts     | 4 +---
 .../lib/chart/bar-chart-with-labels-widget.component.html     | 3 +--
 .../lib/chart/bar-chart-with-labels-widget.component.ts       | 4 +---
 .../components/widget/lib/chart/latest-chart.component.html   | 3 +--
 .../components/widget/lib/chart/latest-chart.component.ts     | 4 +---
 .../widget/lib/chart/range-chart-widget.component.html        | 3 +--
 .../widget/lib/chart/range-chart-widget.component.ts          | 4 +---
 .../widget/lib/chart/time-series-chart-widget.component.html  | 3 +--
 .../widget/lib/chart/time-series-chart-widget.component.scss  | 4 +---
 .../widget/lib/chart/time-series-chart-widget.component.ts    | 4 +---
 .../widget/lib/indicator/battery-level-widget.component.html  | 4 ++--
 .../widget/lib/indicator/battery-level-widget.component.ts    | 4 +---
 .../widget/lib/indicator/liquid-level-widget.component.html   | 4 ++--
 .../widget/lib/indicator/liquid-level-widget.component.ts     | 4 +---
 .../lib/indicator/signal-strength-widget.component.html       | 4 ++--
 .../widget/lib/indicator/signal-strength-widget.component.ts  | 4 +---
 .../widget/lib/rpc/power-button-widget.component.html         | 3 +--
 .../widget/lib/rpc/power-button-widget.component.ts           | 4 +---
 .../components/widget/lib/rpc/slider-widget.component.html    | 3 +--
 .../home/components/widget/lib/rpc/slider-widget.component.ts | 4 +---
 27 files changed, 30 insertions(+), 68 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
index 3fe6d5c239..8fb2f5bf77 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-toggle-button-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-toggle-button-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-toggle-button-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-toggle-button-container"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts
index d982ea6f6d..ae5fc2c796 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts
@@ -40,7 +40,6 @@ export class ToggleButtonWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   value = false;
@@ -70,8 +69,7 @@ export class ToggleButtonWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     const getInitialStateSettings =
       {...this.settings.initialState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.initial-state')};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
index 390542d524..aa6aa6ee52 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-aggregated-value-card-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-aggregated-value-card-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-aggregated-value-card-overlay" [style]="overlayStyle"></div>
   <div class="tb-aggregated-value-card-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
index a82cd1631e..2d6525e6f7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
@@ -106,7 +106,6 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   private lineChart: TbTimeSeriesChart;
@@ -171,8 +170,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
   }
 
   ngAfterViewInit(): void {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
index 729b57e389..8262f016f6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div #progressBarPanel class="tb-progress-bar-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div #progressBarPanel class="tb-progress-bar-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-progress-bar-overlay" [style]="overlayStyle"></div>
   <div #progressBarContainer class="tb-progress-bar-container" [class]="layoutClass">
     <ng-container *ngIf="layout === progressBarLayout.default">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
index 4f2515ed11..9b71a9979f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
@@ -98,7 +98,6 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   progressBarPanelResize$: ResizeObserver;
@@ -153,8 +152,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
   }
 
   ngAfterViewInit() {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
index cd932180f6..fac00578a7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-value-chart-card-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-value-chart-card-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-value-chart-card-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #valueChartCardContent class="tb-value-chart-card-content" [class]="layout" [class.auto-scale]="autoScale && showValue">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
index 3b075f183c..8511944868 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
@@ -98,7 +98,6 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   private lineChart: TbTimeSeriesChart;
@@ -148,8 +147,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     if (this.ctx.defaultSubscription.firstDatasource?.dataKeys?.length) {
       this.lineChartDataKey = this.ctx.defaultSubscription.firstDatasource?.dataKeys[0];
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
index f48b8def30..5070ad08a9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-bar-chart-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-bar-chart-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-bar-chart-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-bar-chart-content" [class]="legendClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
index b840f49e3b..9762f8da34 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
@@ -65,7 +65,6 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   legendKeys: DataKey[];
@@ -86,8 +85,7 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.showLegend = this.settings.showLegend;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html
index 7089cb27e9..9a25451d0f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-latest-chart-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-latest-chart-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-latest-chart-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #chartContent class="tb-latest-chart-content" [class]="legendClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
index 7f8277b0e6..54d674d636 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
@@ -83,7 +83,6 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   get legendItems(): LatestChartLegendItem[] {
@@ -113,8 +112,7 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     if (this.showLegend) {
       this.legendClass = `legend-${this.settings.legendPosition}`;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
index 63a549bb48..b5e09be857 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-range-chart-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-range-chart-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-range-chart-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-range-chart-content" [class]="legendClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
index 9d89154111..12a13a2fc4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
@@ -73,7 +73,6 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   legendLabelStyle: ComponentStyle;
@@ -112,8 +111,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.rangeItems = toRangeItems(this.settings.rangeColors);
     this.visibleRangeItems = this.rangeItems.filter(item => item.visible);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
index 147214c355..092b0c2783 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-time-series-chart-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-time-series-chart-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-time-series-chart-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-time-series-chart-content" [class]="legendClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss
index 79a162a7ae..84f9d51e07 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss
@@ -24,9 +24,7 @@ $maxLegendHeight: 35%;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  &.overlay {
-    padding: 20px 24px 24px 24px;
-  }
+  padding: 20px 24px 24px 24px;
   > div:not(.tb-time-series-chart-overlay) {
     z-index: 1;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
index 48a328613e..0a242eba36 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
@@ -73,7 +73,6 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   legendColumnTitleStyle: ComponentStyle;
@@ -97,8 +96,7 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.showLegend = this.settings.showLegend;
     if (this.showLegend) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
index e3bd3c5746..5c284e8d77 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-battery-level-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async" [class.tb-battery-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-battery-level-panel" [style.padding]="padding" [style]="backgroundStyle$ | async"
+     [class.tb-battery-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
   <div class="tb-battery-level-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #batteryLevelContent class="tb-battery-level-content" [class]="layoutClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
index 8640cf859a..263b6edbb1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
@@ -132,7 +132,6 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   batteryBoxResize$: ResizeObserver;
@@ -216,8 +215,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
index 5cbdb3007d..21d7c7a01b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-liquid-level-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async" [class.tb-liquid-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-liquid-level-panel" [style.padding]="padding" [style]="backgroundStyle$ | async"
+     [class.tb-liquid-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
   <div class="tb-liquid-level-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #liquidLevelContent class="tb-liquid-level-content"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
index 946ee201ee..37be6455f2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
@@ -81,7 +81,6 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   hasCardClickAction = false;
@@ -126,8 +125,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
index c76e137e39..a0b9c895d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-signal-strength-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async" [class.tb-signal-strength-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-signal-strength-panel" [style.padding]="padding" [style]="backgroundStyle$ | async"
+     [class.tb-signal-strength-pointer]="hasCardClickAction" (click)="cardClick($event)">
     <div class="tb-signal-strength-overlay" [style]="overlayStyle"></div>
     <div *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel || showDate" class="tb-signal-strength-title-panel">
         <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
index e681d3b24e..3a898f0f82 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
@@ -125,7 +125,6 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   shapeResize$: ResizeObserver;
@@ -210,8 +209,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
index 78bc0852bf..447c813777 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-power-button-panel" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-power-button-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-power-button-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-power-button-content">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts
index 997fc16cb3..7c2250ce39 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts
@@ -56,7 +56,6 @@ export class PowerButtonWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   value = false;
@@ -84,8 +83,7 @@ export class PowerButtonWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     const getInitialStateSettings =
       {...this.settings.initialState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.initial-state')};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
index f92b688526..9fea4f7f07 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-slider-panel" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding"
-     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
+<div class="tb-slider-panel" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-slider-overlay" [style]="overlayStyle"></div>
   <div *ngIf="showWidgetTitlePanel" class="tb-slider-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
index 7ab378db69..a3d81bbe0d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
@@ -94,7 +94,6 @@ export class SliderWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
-  overlayEnabled: boolean;
   padding: string;
 
   value: number = null;
@@ -147,8 +146,7 @@ export class SliderWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
-    this.overlayEnabled = this.settings.background.overlay.enabled;
-    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.layout = this.settings.layout;