UI: Add settings for 'Label & value card' widget.

ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts

@@ -136,6 +136,9 @@ import { MobileAppQrCodeBasicConfigComponent } from '@home/components/widget/con
 import {
   LabelCardBasicConfigComponent
 } from '@home/components/widget/config/basic/cards/label-card-basic-config.component';
+import {
+  LabelValueCardBasicConfigComponent
+} from '@home/components/widget/config/basic/cards/label-value-card-basic-config.component';
 
 @NgModule({
   declarations: [
@@ -181,7 +184,8 @@ import {
     RadarChartBasicConfigComponent,
     DigitalSimpleGaugeBasicConfigComponent,
     MobileAppQrCodeBasicConfigComponent,
-    LabelCardBasicConfigComponent
+    LabelCardBasicConfigComponent,
+    LabelValueCardBasicConfigComponent
   ],
   imports: [
     CommonModule,
@@ -229,7 +233,8 @@ import {
     RadarChartBasicConfigComponent,
     DigitalSimpleGaugeBasicConfigComponent,
     MobileAppQrCodeBasicConfigComponent,
-    LabelCardBasicConfigComponent
+    LabelCardBasicConfigComponent,
+    LabelValueCardBasicConfigComponent
   ]
 })
 export class BasicWidgetConfigModule {
@@ -271,5 +276,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type<IBasicWidgetCo
   'tb-radar-chart-basic-config': RadarChartBasicConfigComponent,
   'tb-digital-simple-gauge-basic-config': DigitalSimpleGaugeBasicConfigComponent,
   'tb-mobile-app-qr-code-basic-config': MobileAppQrCodeBasicConfigComponent,
-  'tb-label-card-basic-config': LabelCardBasicConfigComponent
+  'tb-label-card-basic-config': LabelCardBasicConfigComponent,
+  'tb-label-value-card-basic-config': LabelValueCardBasicConfigComponent
 };

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

@@ -0,0 +1,114 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<ng-container [formGroup]="labelValueCardWidgetConfigForm">
+  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
+                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+                              formControlName="timewindowConfig">
+  </tb-timewindow-config-panel>
+  <tb-datasources
+    [configMode]="basicMode"
+    hideDatasourceLabel
+    hideDataKeyLabel
+    hideDataKeyColor
+    hideDataKeyUnits
+    hideDataKeyDecimals
+    formControlName="datasources">
+  </tb-datasources>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widget-config.appearance</div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="autoScale">
+        {{ 'widgets.label-card.auto-scale' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
+        {{ 'widgets.label-card.label' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="labelFont"
+                          [previewText]="labelValueCardWidgetConfigForm.get('label').value">
+        </tb-font-settings>
+        <tb-color-settings formControlName="labelColor" settingsKey="{{'widgets.label-card.label' | translate }}">
+        </tb-color-settings>
+      </div>
+    </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
+        {{ 'widgets.label-card.icon' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-material-icon-select asBoxInput
+                                 iconClearButton
+                                 [color]="labelValueCardWidgetConfigForm.get('iconColor').value?.color"
+                                 formControlName="icon">
+        </tb-material-icon-select>
+        <tb-color-settings formControlName="iconColor" settingsKey="{{'widgets.label-card.icon' | translate }}">
+        </tb-color-settings>
+      </div>
+    </div>
+    <div class="tb-form-row">
+      <div class="fixed-title-width" translate>widgets.label-value-card.value</div>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+        </mat-form-field>
+        <tb-font-settings formControlName="valueFont"
+                          [previewText]="valuePreviewFn">
+        </tb-font-settings>
+        <tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.label-value-card.value' | translate }}">
+        </tb-color-settings>
+      </div>
+    </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 column-lt-md">
+      <div translate>widget-config.show-card-buttons</div>
+      <mat-chip-listbox multiple formControlName="cardButtons">
+        <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
+      </mat-chip-listbox>
+    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-border-radius' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <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">
+  </tb-widget-actions-panel>
+</ng-container>

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

@@ -0,0 +1,191 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
+import { WidgetConfigComponentData } from '@home/models/widget-component.models';
+import {
+  DataKey,
+  datasourcesHasAggregation,
+  datasourcesHasOnlyComparisonAggregation,
+  WidgetConfig,
+} from '@shared/models/widget.models';
+import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
+import { formatValue, isUndefined } from '@core/utils';
+import {
+  labelValueCardWidgetDefaultSettings,
+  LabelValueCardWidgetSettings
+} from '@home/components/widget/lib/cards/label-value-card-widget.models';
+import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import {
+  getTimewindowConfig,
+  setTimewindowConfig
+} from '@home/components/widget/config/timewindow-config-panel.component';
+
+@Component({
+  selector: 'tb-label-value-card-basic-config',
+  templateUrl: './label-value-card-basic-config.component.html',
+  styleUrls: ['../basic-config.scss']
+})
+export class LabelValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
+
+  public get displayTimewindowConfig(): boolean {
+    const datasources = this.labelValueCardWidgetConfigForm.get('datasources').value;
+    return datasourcesHasAggregation(datasources);
+  }
+
+  public onlyHistoryTimewindow(): boolean {
+    const datasources = this.labelValueCardWidgetConfigForm.get('datasources').value;
+    return datasourcesHasOnlyComparisonAggregation(datasources);
+  }
+
+  labelValueCardWidgetConfigForm: UntypedFormGroup;
+
+  valuePreviewFn = this._valuePreviewFn.bind(this);
+
+  constructor(protected store: Store<AppState>,
+              protected widgetConfigComponent: WidgetConfigComponent,
+              private fb: UntypedFormBuilder) {
+    super(store, widgetConfigComponent);
+  }
+
+  protected configForm(): UntypedFormGroup {
+    return this.labelValueCardWidgetConfigForm;
+  }
+
+  protected defaultDataKeys(configData: WidgetConfigComponentData): DataKey[] {
+    return [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries }];
+  }
+
+  protected onConfigSet(configData: WidgetConfigComponentData) {
+    const settings: LabelValueCardWidgetSettings = {...labelValueCardWidgetDefaultSettings, ...(configData.config.settings || {})};
+    this.labelValueCardWidgetConfigForm = this.fb.group({
+      timewindowConfig: [getTimewindowConfig(configData.config), []],
+      datasources: [configData.config.datasources, []],
+      autoScale: [settings.autoScale, []],
+
+      showLabel: [settings.showLabel, []],
+      label: [settings.label, []],
+      labelFont: [settings.labelFont, []],
+      labelColor: [settings.labelColor, []],
+
+      showIcon: [settings.showIcon, []],
+      iconSize: [settings.iconSize, [Validators.min(0)]],
+      iconSizeUnit: [settings.iconSizeUnit, []],
+      icon: [settings.icon, []],
+      iconColor: [settings.iconColor, []],
+
+      units: [configData.config.units, []],
+      decimals: [configData.config.decimals, []],
+      valueFont: [settings.valueFont, []],
+      valueColor: [settings.valueColor, []],
+
+      background: [settings.background, []],
+
+      cardButtons: [this.getCardButtons(configData.config), []],
+      borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
+
+      actions: [configData.config.actions || {}, []]
+    });
+  }
+
+  protected prepareOutputConfig(config: any): WidgetConfigComponentData {
+    setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig);
+    this.widgetConfig.config.datasources = config.datasources;
+
+    this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
+
+    this.widgetConfig.config.settings.autoScale = config.autoScale;
+
+    this.widgetConfig.config.settings.showLabel = config.showLabel;
+    this.widgetConfig.config.settings.label = config.label;
+    this.widgetConfig.config.settings.labelFont = config.labelFont;
+    this.widgetConfig.config.settings.labelColor = config.labelColor;
+
+    this.widgetConfig.config.settings.showIcon = config.showIcon;
+    this.widgetConfig.config.settings.iconSize = config.iconSize;
+    this.widgetConfig.config.settings.iconSizeUnit = config.iconSizeUnit;
+    this.widgetConfig.config.settings.icon = config.icon;
+    this.widgetConfig.config.settings.iconColor = config.iconColor;
+
+    this.widgetConfig.config.units = config.units;
+    this.widgetConfig.config.decimals = config.decimals;
+    this.widgetConfig.config.settings.valueFont = config.valueFont;
+    this.widgetConfig.config.settings.valueColor = config.valueColor;
+
+    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;
+  }
+
+  protected validatorTriggers(): string[] {
+    return ['showLabel', 'showIcon'];
+  }
+
+  protected updateValidators(emitEvent: boolean, trigger?: string) {
+    const showLabel: boolean = this.labelValueCardWidgetConfigForm.get('showLabel').value;
+    const showIcon: boolean = this.labelValueCardWidgetConfigForm.get('showIcon').value;
+
+    if (showLabel) {
+      this.labelValueCardWidgetConfigForm.get('label').enable();
+      this.labelValueCardWidgetConfigForm.get('labelFont').enable();
+      this.labelValueCardWidgetConfigForm.get('labelColor').enable();
+    } else {
+      this.labelValueCardWidgetConfigForm.get('label').disable();
+      this.labelValueCardWidgetConfigForm.get('labelFont').disable();
+      this.labelValueCardWidgetConfigForm.get('labelColor').disable();
+    }
+
+    if (showIcon) {
+      this.labelValueCardWidgetConfigForm.get('iconSize').enable();
+      this.labelValueCardWidgetConfigForm.get('iconSizeUnit').enable();
+      this.labelValueCardWidgetConfigForm.get('icon').enable();
+      this.labelValueCardWidgetConfigForm.get('iconColor').enable();
+    } else {
+      this.labelValueCardWidgetConfigForm.get('iconSize').disable();
+      this.labelValueCardWidgetConfigForm.get('iconSizeUnit').disable();
+      this.labelValueCardWidgetConfigForm.get('icon').disable();
+      this.labelValueCardWidgetConfigForm.get('iconColor').disable();
+    }
+  }
+
+  private getCardButtons(config: WidgetConfig): string[] {
+    const buttons: string[] = [];
+    if (isUndefined(config.enableFullscreen) || config.enableFullscreen) {
+      buttons.push('fullscreen');
+    }
+    return buttons;
+  }
+
+  private setCardButtons(buttons: string[], config: WidgetConfig) {
+    config.enableFullscreen = buttons.includes('fullscreen');
+  }
+
+  private _valuePreviewFn(): string {
+    const units: string = this.labelValueCardWidgetConfigForm.get('units').value;
+    const decimals: number = this.labelValueCardWidgetConfigForm.get('decimals').value;
+    return formatValue(22, decimals, units, true);
+  }
+}

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

@@ -165,10 +165,8 @@ export class LabelValueCardWidgetComponent implements OnInit, AfterViewInit, OnD
 
   public onDataUpdated() {
     const tsValue = getSingleTsValue(this.ctx.data);
-    let ts;
     let value;
     if (tsValue && isDefinedAndNotNull(tsValue[1]) && tsValue[0] !== 0) {
-      ts = tsValue[0];
       value = tsValue[1];
       this.valueText = formatValue(value, this.decimals, this.units, false);
     } else {

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

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Injector } from '@angular/core';
+import { Component } from '@angular/core';
 import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
@@ -31,7 +31,6 @@ export class LabelCardWidgetSettingsComponent extends WidgetSettingsComponent {
   labelCardWidgetSettingsForm: UntypedFormGroup;
 
   constructor(protected store: Store<AppState>,
-              private $injector: Injector,
               private fb: UntypedFormBuilder) {
     super(store);
   }

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

@@ -0,0 +1,81 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<ng-container [formGroup]="labelValueCardWidgetSettingsForm">
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.label-value-card.label-value-card-style</div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="autoScale">
+        {{ 'widgets.label-card.auto-scale' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="showLabel">
+        {{ 'widgets.label-card.label' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="labelFont"
+                          [previewText]="labelValueCardWidgetSettingsForm.get('label').value">
+        </tb-font-settings>
+        <tb-color-settings formControlName="labelColor" settingsKey="{{'widgets.label-card.label' | translate }}">
+        </tb-color-settings>
+      </div>
+    </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
+        {{ 'widgets.label-card.icon' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-material-icon-select asBoxInput
+                                 iconClearButton
+                                 [color]="labelValueCardWidgetSettingsForm.get('iconColor').value?.color"
+                                 formControlName="icon">
+        </tb-material-icon-select>
+        <tb-color-settings formControlName="iconColor" settingsKey="{{'widgets.label-card.icon' | translate }}">
+        </tb-color-settings>
+      </div>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.label-value-card.value</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-font-settings formControlName="valueFont"
+                          [previewText]="valuePreviewFn">
+        </tb-font-settings>
+        <tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.label-value-card.value' | translate }}">
+        </tb-color-settings>
+      </div>
+    </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/cards/label-value-card-widget-settings.component.ts

@@ -0,0 +1,108 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component } from '@angular/core';
+import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { labelValueCardWidgetDefaultSettings } from '@home/components/widget/lib/cards/label-value-card-widget.models';
+import { formatValue } from '@core/utils';
+
+@Component({
+  selector: 'tb-label-value-card-widget-settings',
+  templateUrl: './label-value-card-widget-settings.component.html',
+  styleUrls: []
+})
+export class LabelValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  labelValueCardWidgetSettingsForm: UntypedFormGroup;
+
+  valuePreviewFn = this._valuePreviewFn.bind(this);
+
+  constructor(protected store: Store<AppState>,
+              private fb: UntypedFormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): UntypedFormGroup {
+    return this.labelValueCardWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {...labelValueCardWidgetDefaultSettings};
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.labelValueCardWidgetSettingsForm = this.fb.group({
+      autoScale: [settings.autoScale, []],
+
+      showLabel: [settings.showLabel, []],
+      label: [settings.label, []],
+      labelFont: [settings.labelFont, []],
+      labelColor: [settings.labelColor, []],
+
+      showIcon: [settings.showIcon, []],
+      iconSize: [settings.iconSize, [Validators.min(0)]],
+      iconSizeUnit: [settings.iconSizeUnit, []],
+      icon: [settings.icon, []],
+      iconColor: [settings.iconColor, []],
+
+      valueFont: [settings.valueFont, []],
+      valueColor: [settings.valueColor, []],
+
+      background: [settings.background, []],
+      padding: [settings.padding, []]
+    });
+  }
+
+  protected validatorTriggers(): string[] {
+    return ['showLabel', 'showIcon'];
+  }
+
+  protected updateValidators(emitEvent: boolean) {
+    const showLabel: boolean = this.labelValueCardWidgetSettingsForm.get('showLabel').value;
+    const showIcon: boolean = this.labelValueCardWidgetSettingsForm.get('showIcon').value;
+
+    if (showLabel) {
+      this.labelValueCardWidgetSettingsForm.get('label').enable();
+      this.labelValueCardWidgetSettingsForm.get('labelFont').enable();
+      this.labelValueCardWidgetSettingsForm.get('labelColor').enable();
+    } else {
+      this.labelValueCardWidgetSettingsForm.get('label').disable();
+      this.labelValueCardWidgetSettingsForm.get('labelFont').disable();
+      this.labelValueCardWidgetSettingsForm.get('labelColor').disable();
+    }
+
+    if (showIcon) {
+      this.labelValueCardWidgetSettingsForm.get('iconSize').enable();
+      this.labelValueCardWidgetSettingsForm.get('iconSizeUnit').enable();
+      this.labelValueCardWidgetSettingsForm.get('icon').enable();
+      this.labelValueCardWidgetSettingsForm.get('iconColor').enable();
+    } else {
+      this.labelValueCardWidgetSettingsForm.get('iconSize').disable();
+      this.labelValueCardWidgetSettingsForm.get('iconSizeUnit').disable();
+      this.labelValueCardWidgetSettingsForm.get('icon').disable();
+      this.labelValueCardWidgetSettingsForm.get('iconColor').disable();
+    }
+  }
+
+  private _valuePreviewFn(): string {
+    const units: string = this.widgetConfig.config.units;
+    const decimals: number = this.widgetConfig.config.decimals;
+    return formatValue(22, decimals, units, true);
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts

@@ -359,6 +359,9 @@ import {
 import {
   LabelCardWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/cards/label-card-widget-settings.component';
+import {
+  LabelValueCardWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/cards/label-value-card-widget-settings.component';
 
 @NgModule({
   declarations: [
@@ -486,7 +489,8 @@ import {
     BarChartWidgetSettingsComponent,
     PolarAreaChartWidgetSettingsComponent,
     RadarChartWidgetSettingsComponent,
-    LabelCardWidgetSettingsComponent
+    LabelCardWidgetSettingsComponent,
+    LabelValueCardWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
@@ -619,7 +623,8 @@ import {
     BarChartWidgetSettingsComponent,
     PolarAreaChartWidgetSettingsComponent,
     RadarChartWidgetSettingsComponent,
-    LabelCardWidgetSettingsComponent
+    LabelCardWidgetSettingsComponent,
+    LabelValueCardWidgetSettingsComponent
   ]
 })
 export class WidgetSettingsModule {
@@ -719,5 +724,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
   'tb-bar-chart-widget-settings': BarChartWidgetSettingsComponent,
   'tb-polar-area-chart-widget-settings': PolarAreaChartWidgetSettingsComponent,
   'tb-radar-chart-widget-settings': RadarChartWidgetSettingsComponent,
-  'tb-label-card-widget-settings': LabelCardWidgetSettingsComponent
+  'tb-label-card-widget-settings': LabelCardWidgetSettingsComponent,
+  'tb-label-value-card-widget-settings': LabelValueCardWidgetSettingsComponent
 };

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -6901,6 +6901,10 @@
             "icon": "Icon",
             "label-card-style": "Label card style"
         },
+        "label-value-card": {
+            "value": "Value",
+            "label-value-card-style": "Label & value card style"
+        },
         "liquid-level-card": {
             "layout-simple": "Simple",
             "layout-percentage": "Percentage",