Merge pull request #11320 from d2eight/card-padding

[Widgets] - Adding card-padding setting

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

@@ -126,6 +126,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-card-basic-config.component.ts

@@ -144,6 +144,7 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -183,6 +184,7 @@ export class ValueCardBasicConfigComponent 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/status-widget-basic-config.component.html

@@ -94,6 +94,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/status-widget-basic-config.component.ts

@@ -79,6 +79,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -99,6 +100,7 @@ export class StatusWidgetBasicConfigComponent 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/rpc/single-switch-basic-config.component.html

@@ -211,6 +211,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 column-lt-md">
       <div translate>widget-config.show-card-buttons</div>
       <mat-chip-listbox multiple formControlName="cardButtons">

ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts

@@ -108,6 +108,7 @@ export class SingleSwitchBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -159,6 +160,7 @@ export class SingleSwitchBasicConfigComponent 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/weather/wind-speed-direction-basic-config.component.html

@@ -208,6 +208,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/weather/wind-speed-direction-basic-config.component.ts

@@ -147,6 +147,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -198,6 +199,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
 
     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/cards/value-card-widget.component.html

@@ -15,41 +15,41 @@
     limitations under the License.
 
 -->
-<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style]="backgroundStyle$ | async">
+<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-value-card-overlay" [style]="overlayStyle"></div>
   <div class="tb-value-card-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
   <div #valueCardContent class="tb-value-card-content" [class]="this.layout">
     <ng-container [ngSwitch]="layout">
-    <ng-template [ngSwitchCase]="valueCardLayout.square">
+      <ng-template [ngSwitchCase]="valueCardLayout.square">
-      <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.vertical">
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.centered">
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      <div class="tb-value-card-icon-row">
-        <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      </div>
+      </ng-template>
-      <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
+      <ng-template [ngSwitchCase]="valueCardLayout.vertical">
-    </ng-template>
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-    <ng-template [ngSwitchCase]="valueCardLayout.simplified">
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+      </ng-template>
-    </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.centered">
-    <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-                                 layout === valueCardLayout.horizontal_reversed ? layout : ''">
+        <div class="tb-value-card-icon-row">
-      <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
+          <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
-      <div fxFlex></div>
+          <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+        </div>
-    </ng-template>
+        <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
-  </ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.simplified">
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
+                                   layout === valueCardLayout.horizontal_reversed ? layout : ''">
+        <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
+        <div fxFlex></div>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+      </ng-template>
+    </ng-container>
   </div>
 </div>
 <ng-template #iconWithLabelTpl>

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

@@ -38,6 +38,7 @@ import {
   getSingleTsValue,
   iconStyle,
   overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } from './value-card-widget.models';
@@ -48,7 +49,6 @@ import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 
 const squareLayoutSize = 160;
-const squareLayoutPadding = 48;
 const horizontalLayoutHeight = 80;
 
 @Component({
@@ -96,6 +96,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   private panelResize$: ResizeObserver;
 
@@ -148,6 +149,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
 
     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;
   }
 
   public ngAfterViewInit() {
@@ -199,8 +201,13 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   private onResize() {
-    const panelWidth = this.valueCardPanel.nativeElement.getBoundingClientRect().width - squareLayoutPadding;
+    const computedStyle = getComputedStyle(this.valueCardPanel.nativeElement);
-    const panelHeight = this.valueCardPanel.nativeElement.getBoundingClientRect().height - (this.horizontal ? 0 : squareLayoutPadding);
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+
+    const widgetBoundingClientRect = this.valueCardPanel.nativeElement.getBoundingClientRect();
+    const panelWidth = widgetBoundingClientRect.width - (pLeft + pRight);
+    const panelHeight = widgetBoundingClientRect.height - (pTop + pBottom);
     let scale: number;
     if (!this.horizontal) {
       const size = Math.min(panelWidth, panelHeight);

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

@@ -19,8 +19,10 @@ import {
   BackgroundType,
   ColorSettings,
   constantColor,
-  cssUnit, DateFormatSettings,
+  cssUnit,
-  Font, lastUpdateAgoDateFormat
+  DateFormatSettings,
+  Font,
+  lastUpdateAgoDateFormat
 } from '@shared/models/widget-settings.models';
 
 export enum ValueCardLayout {
@@ -80,6 +82,7 @@ export interface ValueCardWidgetSettings {
   dateFont: Font;
   dateColor: ColorSettings;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSettings => ({
@@ -128,5 +131,6 @@ export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSe
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: ''
 });

ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html

@@ -20,7 +20,7 @@
   <div class="tb-status-widget-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #statusWidgetContent class="tb-status-widget-content" [class]="this.layout">
+  <div #statusWidgetContent class="tb-status-widget-content" [class]="this.layout" [style.padding]="padding">
     <div class="tb-status-widget-icon-container">
       <tb-icon [style]="iconStyle">{{ icon }}</tb-icon>
     </div>

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

@@ -21,14 +21,16 @@ import {
   ElementRef,
   OnDestroy,
   OnInit,
-  Renderer2, ViewChild,
+  Renderer2,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { BasicActionWidgetComponent } from '@home/components/widget/lib/action/action-widget.models';
 import {
   statusWidgetDefaultSettings,
   StatusWidgetLayout,
-  StatusWidgetSettings, StatusWidgetStateSettings
+  StatusWidgetSettings,
+  StatusWidgetStateSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';
 import { Observable } from 'rxjs';
 import {
@@ -36,12 +38,12 @@ import {
   ComponentStyle,
   iconStyle,
   overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
-import { UtilsService } from '@core/services/utils.service';
 import { ValueType } from '@shared/models/constants';
 
 const initialStatusWidgetSize = 147;
@@ -65,6 +67,7 @@ export class StatusWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   overlayInset = '12px';
   borderRadius = '';
@@ -101,9 +104,7 @@ export class StatusWidgetComponent extends
   constructor(protected imagePipe: ImagePipe,
               protected sanitizer: DomSanitizer,
               private renderer: Renderer2,
-              private utils: UtilsService,
+              protected cd: ChangeDetectorRef) {
-              protected cd: ChangeDetectorRef,
-              private elementRef: ElementRef) {
     super(cd);
   }
 
@@ -191,8 +192,13 @@ export class StatusWidgetComponent extends
   }
 
   private onResize() {
-    const panelWidth = this.statusWidgetPanel.nativeElement.getBoundingClientRect().width;
+    const computedStyle = getComputedStyle(this.statusWidgetPanel.nativeElement);
-    const panelHeight = this.statusWidgetPanel.nativeElement.getBoundingClientRect().height;
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+
+    const widgetBoundingClientRect = this.statusWidgetPanel.nativeElement.getBoundingClientRect();
+    const panelWidth = widgetBoundingClientRect.width - (pLeft + pRight);
+    const panelHeight = widgetBoundingClientRect.height - (pTop + pBottom);
     const targetSize = Math.min(panelWidth, panelHeight);
     const scale = targetSize / initialStatusWidgetSize;
     const width = initialStatusWidgetSize;
@@ -220,6 +226,9 @@ export class StatusWidgetComponent extends
     this.showLabel = stateSettings.showLabel && this.layout !== StatusWidgetLayout.icon;
     this.showStatus = stateSettings.showStatus && this.layout !== StatusWidgetLayout.icon;
     this.icon = stateSettings.icon;
+    this.padding = stateSettings.backgroundDisabled.overlay.enabled || stateSettings.background.overlay.enabled
+      ? undefined
+      : this.settings.padding;
 
     const primaryColor = disabled ? stateSettings.primaryColorDisabled : stateSettings.primaryColor;
     const secondaryColor = disabled ? stateSettings.secondaryColorDisabled : stateSettings.secondaryColor;

ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts

@@ -65,6 +65,7 @@ export interface StatusWidgetSettings {
   layout: StatusWidgetLayout;
   onState: StatusWidgetStateSettings;
   offState: StatusWidgetStateSettings;
+  padding: string
 }
 
 export const statusWidgetDefaultSettings: StatusWidgetSettings = {
@@ -200,5 +201,6 @@ export const statusWidgetDefaultSettings: StatusWidgetSettings = {
         blur: 3
       }
     }
-  }
+  },
+  padding: ''
 };

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #singleSwitchPanel class="tb-single-switch-panel" [class.auto-scale]="autoScale" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style]="backgroundStyle$ | async">
+<div #singleSwitchPanel class="tb-single-switch-panel" [class.auto-scale]="autoScale" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-single-switch-overlay" [style]="overlayStyle" [style.inset]="overlayInset"></div>
   <div class="tb-single-switch-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>

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

@@ -36,6 +36,7 @@ import {
   ComponentStyle,
   iconStyle,
   overlayStyle,
+  resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
@@ -74,6 +75,7 @@ export class SingleSwitchWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
   overlayInset = '12px';
 
   value = false;
@@ -123,6 +125,7 @@ export class SingleSwitchWidgetComponent 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;
 
@@ -231,11 +234,15 @@ export class SingleSwitchWidgetComponent extends
   }
 
   private onResize() {
-    const height = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height;
+    const widgetBoundingClientRect = this.singleSwitchPanel.nativeElement.getBoundingClientRect();
+    const height = widgetBoundingClientRect.height;
     const switchScale = height / initialSwitchHeight;
     const paddingScale = Math.min(switchScale, 1);
-    const panelWidth = this.singleSwitchPanel.nativeElement.getBoundingClientRect().width - (horizontalLayoutPadding * paddingScale);
+    const computedStyle = getComputedStyle(this.singleSwitchPanel.nativeElement);
-    const panelHeight = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height - (verticalLayoutPadding * paddingScale);
+    const [pLeft, pRight, pTop, pBottom] = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
+      .map(side => resolveCssSize(computedStyle[side])[0]);
+    const panelWidth = widgetBoundingClientRect.width - ((pLeft + pRight) || horizontalLayoutPadding * paddingScale);
+    const panelHeight = widgetBoundingClientRect.height - ((pTop + pBottom) || verticalLayoutPadding * paddingScale);
     this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'transform', `scale(1)`);
     this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'width', 'auto');
     let contentWidth = this.singleSwitchToggleRow.nativeElement.getBoundingClientRect().width;

ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts

@@ -80,6 +80,7 @@ export interface SingleSwitchWidgetSettings {
   offLabelFont: Font;
   offLabelColor: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
@@ -217,5 +218,6 @@ export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: ''
 };

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-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/value-card-widget-settings.component.ts

@@ -110,7 +110,8 @@ export class ValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
       dateFont: [settings.dateFont, []],
       dateColor: [settings.dateColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html

@@ -123,6 +123,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.single-switch.switch</div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts

@@ -102,7 +102,8 @@ export class SingleSwitchWidgetSettingsComponent extends WidgetSettingsComponent
       offLabelFont: [settings.offLabelFont, []],
       offLabelColor: [settings.offLabelColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 

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

@@ -78,5 +78,11 @@
         [layout]="statusWidgetSettingsForm.get('layout').value"
         formControlName="offState">
     </tb-status-widget-state-settings>
+    <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/status-widget-settings.component.ts

@@ -73,7 +73,8 @@ export class StatusWidgetSettingsComponent extends WidgetSettingsComponent {
       disabledState: [settings.disabledState, []],
       layout: [settings.layout, []],
       onState: [settings.onState, []],
-      offState: [settings.offState, []]
+      offState: [settings.offState, []],
+      padding: [settings.padding, []]
     });
   }
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html

@@ -100,5 +100,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/weather/wind-speed-direction-widget-settings.component.ts

@@ -91,7 +91,8 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom
 
       arrowColor: [settings.arrowColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-wind-speed-direction-panel" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-wind-speed-direction-panel" [style.padding]="padding" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
   <div class="tb-wind-speed-direction-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-wind-speed-direction-content">

ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts

@@ -42,7 +42,6 @@ import {
   getSingleTsValueByDataKey,
   overlayStyle
 } from '@shared/models/widget-settings.models';
-import { WidgetComponent } from '@home/components/widget/widget.component';
 import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { Path, Svg, SVG, Text } from '@svgdotjs/svg.js';
@@ -92,6 +91,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   shapeResize$: ResizeObserver;
 
@@ -111,8 +111,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
   private windDirection = 0;
   private centerValueText = 'N/A';
 
-  constructor(private widgetComponent: WidgetComponent,
+  constructor(private imagePipe: ImagePipe,
-              private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
               private renderer: Renderer2,
               private cd: ChangeDetectorRef) {
@@ -142,6 +141,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
 
     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/weather/wind-speed-direction-widget.models.ts

@@ -14,7 +14,6 @@
 /// limitations under the License.
 ///
 
-import { BatteryLevelLayout } from '@home/components/widget/lib/indicator/battery-level-widget.models';
 import {
   BackgroundSettings,
   BackgroundType,
@@ -59,6 +58,7 @@ export interface WindSpeedDirectionWidgetSettings {
   minorTicksColor: string;
   minorTicksFont: Font;
   background: BackgroundSettings;
+  padding: string
 }
 
 export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings = {
@@ -101,5 +101,6 @@ export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: ''
 };