Merge pull request #10572 from d2eight/card-padding

[Widgets] - Adding card-padding setting

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">

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;

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">

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;

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">

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts

@@ -257,6 +257,7 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -304,6 +305,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;

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">

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;

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">

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;

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html

@@ -220,6 +220,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">

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts

@@ -189,6 +189,7 @@ export abstract class LatestChartBasicConfigComponent<S extends LatestChartWidge
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -237,6 +238,7 @@ export abstract class LatestChartBasicConfigComponent<S extends LatestChartWidge
 
     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;
 

ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html

@@ -148,6 +148,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">

ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts

@@ -131,6 +131,7 @@ export class BatteryLevelBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -167,6 +168,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;

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">

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;

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">

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;

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">

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;

ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-toggle-button-panel" [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"

ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.ts

@@ -40,6 +40,7 @@ export class ToggleButtonWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   value = false;
   disabled = false;
@@ -68,6 +69,7 @@ export class ToggleButtonWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    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')};

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

ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-aggregated-value-card-panel" [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>

ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts

@@ -106,6 +106,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   private lineChart: TbTimeSeriesChart;
   private lineChartDataKey: DataKey;
@@ -169,6 +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.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
   }
 
   ngAfterViewInit(): void {

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

ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #progressBarPanel class="tb-progress-bar-panel" [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">

ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts

@@ -98,6 +98,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   progressBarPanelResize$: ResizeObserver;
 
@@ -151,6 +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.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
   }
 
   ngAfterViewInit() {

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

ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-value-chart-card-panel" [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">

ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts

@@ -98,6 +98,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   private lineChart: TbTimeSeriesChart;
   private lineChartDataKey: DataKey;
@@ -146,6 +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.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];

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

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">

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;
 

ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-latest-chart-panel" [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">

ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts

@@ -83,6 +83,7 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   get legendItems(): LatestChartLegendItem[] {
     return this.latestChart ? this.latestChart.getLegendItems() : [];
@@ -111,6 +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.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     if (this.showLegend) {
       this.legendClass = `legend-${this.settings.legendPosition}`;

ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts

@@ -104,6 +104,7 @@ export interface LatestChartWidgetSettings extends LatestChartSettings {
   legendValueFont: Font;
   legendValueColor: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const latestChartWidgetDefaultSettings: LatestChartWidgetSettings = {
@@ -136,7 +137,8 @@ export const latestChartWidgetDefaultSettings: LatestChartWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 
 export const latestChartTooltipFormatter = (renderer: Renderer2,

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">

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

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">

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

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

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" [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">

ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts

@@ -132,6 +132,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   batteryBoxResize$: ResizeObserver;
 
@@ -214,6 +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.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
 

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 = {
@@ -109,6 +110,7 @@ export const batteryLevelDefaultSettings: BatteryLevelWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 

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" [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>

ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts

@@ -81,6 +81,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   hasCardClickAction = false;
 
@@ -124,6 +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.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
 

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

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" [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>

ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts

@@ -125,6 +125,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   shapeResize$: ResizeObserver;
 
@@ -208,6 +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.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
   }

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 = {
@@ -128,7 +129,8 @@ export const signalStrengthDefaultSettings: SignalStrengthWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 
 export const signalBarActive = (rssi: number, index: number): boolean => {

ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-power-button-panel" [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">

ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts

@@ -56,6 +56,7 @@ export class PowerButtonWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   value = false;
   disabled = false;
@@ -82,6 +83,7 @@ export class PowerButtonWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    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')};

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 {

ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html

@@ -15,7 +15,7 @@
     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" [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>

ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts

@@ -94,6 +94,7 @@ export class SliderWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   value: number = null;
   private prevValue: number = null;
@@ -145,6 +146,7 @@ export class SliderWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.layout = this.settings.layout;
 

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

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>

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, []]
     });
   }
 }

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">

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, []]
     });
   }
 

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>

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, []]
     });
   }
 

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>

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, []]
     });
   }
 

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>

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, []]
     });
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html

@@ -119,12 +119,19 @@
   <tb-chart-animation-settings
       formControlName="animation">
   </tb-chart-animation-settings>
-  <div class="tb-form-panel no-padding">
-    <div class="tb-form-row no-border space-between">
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
+    <div class="tb-form-row space-between">
       <div>{{ 'widgets.background.background' | translate }}</div>
       <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>
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts

@@ -141,7 +141,8 @@ export abstract class LatestChartWidgetSettingsComponent<S extends LatestChartWi
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
     this.setupLatestChartControls(this.latestChartWidgetSettingsForm, settings);
   }

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>

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, []]
     });
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html

@@ -89,5 +89,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>

ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts

@@ -84,7 +84,8 @@ export class BatteryLevelWidgetSettingsComponent extends WidgetSettingsComponent
       batteryLevelColor: [settings.batteryLevelColor, []],
       batteryShapeColor: [settings.batteryShapeColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 

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>

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, []],

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">

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, []]
     });
   }