UI: Implement widget title font and color settings.

ui-ngx/src/app/core/services/dialog.service.ts

@@ -96,13 +96,14 @@ export class DialogService {
     return dialogRef.afterClosed();
   }
 
-  colorPicker(color: string): Observable<string> {
+  colorPicker(color: string, colorClearButton = false): Observable<string> {
     return this.dialog.open<ColorPickerDialogComponent, ColorPickerDialogData, string>(ColorPickerDialogComponent,
       {
         disableClose: true,
         panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
         data: {
-          color
+          color,
+          colorClearButton
         },
         autoFocus: false
     }).afterClosed();

ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html

@@ -50,13 +50,24 @@
   </tb-data-keys-panel>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
-      </mat-form-field>
+          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="titleFont"
+                          clearButton
+                          [previewText]="alarmsTableWidgetConfigForm.get('title').value"
+                          [initialPreviewStyle]="widgetConfig.config.titleStyle">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="titleColor">
+        </tb-color-input>
+      </div>
     </div>
     <div class="tb-form-row space-between">
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
@@ -68,6 +79,7 @@
                                  formControlName="titleIcon">
         </tb-material-icon-select>
         <tb-color-input asBoxInput
+                        colorClearButton
                         formControlName="iconColor">
         </tb-color-input>
       </div>
@@ -84,12 +96,14 @@
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.text-color' | translate }}</div>
       <tb-color-input asBoxInput
+                      colorClearButton
                       formControlName="color">
       </tb-color-input>
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.background-color' | translate }}</div>
       <tb-color-input asBoxInput
+                      colorClearButton
                       formControlName="backgroundColor">
       </tb-color-input>
     </div>

ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.ts

@@ -61,6 +61,8 @@ export class AlarmsTableBasicConfigComponent extends BasicWidgetConfigComponent
       columns: [this.getColumns(configData.config.alarmSource), []],
       showTitle: [configData.config.showTitle, []],
       title: [configData.config.settings?.alarmsTitle, []],
+      titleFont: [configData.config.titleFont, []],
+      titleColor: [configData.config.titleColor, []],
       showTitleIcon: [configData.config.showTitleIcon, []],
       titleIcon: [configData.config.titleIcon, []],
       iconColor: [configData.config.iconColor, []],
@@ -82,6 +84,8 @@ export class AlarmsTableBasicConfigComponent extends BasicWidgetConfigComponent
     this.widgetConfig.config.showTitle = config.showTitle;
     this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
     this.widgetConfig.config.settings.alarmsTitle = config.title;
+    this.widgetConfig.config.titleFont = config.titleFont;
+    this.widgetConfig.config.titleColor = config.titleColor;
     this.widgetConfig.config.showTitleIcon = config.showTitleIcon;
     this.widgetConfig.config.titleIcon = config.titleIcon;
     this.widgetConfig.config.iconColor = config.iconColor;
@@ -100,6 +104,8 @@ export class AlarmsTableBasicConfigComponent extends BasicWidgetConfigComponent
     const showTitleIcon: boolean = this.alarmsTableWidgetConfigForm.get('showTitleIcon').value;
     if (showTitle) {
       this.alarmsTableWidgetConfigForm.get('title').enable();
+      this.alarmsTableWidgetConfigForm.get('titleFont').enable();
+      this.alarmsTableWidgetConfigForm.get('titleColor').enable();
       this.alarmsTableWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false});
       if (showTitleIcon) {
         this.alarmsTableWidgetConfigForm.get('titleIcon').enable();
@@ -110,11 +116,15 @@ export class AlarmsTableBasicConfigComponent extends BasicWidgetConfigComponent
       }
     } else {
       this.alarmsTableWidgetConfigForm.get('title').disable();
+      this.alarmsTableWidgetConfigForm.get('titleFont').disable();
+      this.alarmsTableWidgetConfigForm.get('titleColor').disable();
       this.alarmsTableWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false});
       this.alarmsTableWidgetConfigForm.get('titleIcon').disable();
       this.alarmsTableWidgetConfigForm.get('iconColor').disable();
     }
     this.alarmsTableWidgetConfigForm.get('title').updateValueAndValidity({emitEvent});
+    this.alarmsTableWidgetConfigForm.get('titleFont').updateValueAndValidity({emitEvent});
+    this.alarmsTableWidgetConfigForm.get('titleColor').updateValueAndValidity({emitEvent});
     this.alarmsTableWidgetConfigForm.get('showTitleIcon').updateValueAndValidity({emitEvent: false});
     this.alarmsTableWidgetConfigForm.get('titleIcon').updateValueAndValidity({emitEvent});
     this.alarmsTableWidgetConfigForm.get('iconColor').updateValueAndValidity({emitEvent});

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

@@ -34,7 +34,6 @@ import {
   TimeseriesTableBasicConfigComponent
 } from '@home/components/widget/config/basic/cards/timeseries-table-basic-config.component';
 import { FlotBasicConfigComponent } from '@home/components/widget/config/basic/chart/flot-basic-config.component';
-import { WidgetSettingsModule } from '@home/components/widget/lib/settings/widget-settings.module';
 import {
   AlarmsTableBasicConfigComponent
 } from '@home/components/widget/config/basic/alarm/alarms-table-basic-config.component';
@@ -57,7 +56,6 @@ import {
   imports: [
     CommonModule,
     SharedModule,
-    WidgetSettingsModule,
     WidgetConfigComponentsModule
   ],
   exports: [

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

@@ -39,13 +39,24 @@
   </tb-data-keys-panel>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
-      </mat-form-field>
+          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="titleFont"
+                          clearButton
+                          [previewText]="entitiesTableWidgetConfigForm.get('title').value"
+                          [initialPreviewStyle]="widgetConfig.config.titleStyle">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="titleColor">
+        </tb-color-input>
+      </div>
     </div>
     <div class="tb-form-row space-between">
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
@@ -57,6 +68,7 @@
                                  formControlName="titleIcon">
         </tb-material-icon-select>
         <tb-color-input asBoxInput
+                        colorClearButton
                         formControlName="iconColor">
         </tb-color-input>
       </div>
@@ -72,12 +84,14 @@
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.text-color' | translate }}</div>
       <tb-color-input asBoxInput
+                      colorClearButton
                       formControlName="color">
       </tb-color-input>
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.background-color' | translate }}</div>
       <tb-color-input asBoxInput
+                      colorClearButton
                       formControlName="backgroundColor">
       </tb-color-input>
     </div>

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/entities-table-basic-config.component.ts

@@ -80,6 +80,8 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
       columns: [this.getColumns(configData.config.datasources), []],
       showTitle: [configData.config.showTitle, []],
       title: [configData.config.settings?.entitiesTitle, []],
+      titleFont: [configData.config.titleFont, []],
+      titleColor: [configData.config.titleColor, []],
       showTitleIcon: [configData.config.showTitleIcon, []],
       titleIcon: [configData.config.titleIcon, []],
       iconColor: [configData.config.iconColor, []],
@@ -100,6 +102,8 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
     this.widgetConfig.config.showTitle = config.showTitle;
     this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
     this.widgetConfig.config.settings.entitiesTitle = config.title;
+    this.widgetConfig.config.titleFont = config.titleFont;
+    this.widgetConfig.config.titleColor = config.titleColor;
     this.widgetConfig.config.showTitleIcon = config.showTitleIcon;
     this.widgetConfig.config.titleIcon = config.titleIcon;
     this.widgetConfig.config.iconColor = config.iconColor;
@@ -118,6 +122,8 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
     const showTitleIcon: boolean = this.entitiesTableWidgetConfigForm.get('showTitleIcon').value;
     if (showTitle) {
       this.entitiesTableWidgetConfigForm.get('title').enable();
+      this.entitiesTableWidgetConfigForm.get('titleFont').enable();
+      this.entitiesTableWidgetConfigForm.get('titleColor').enable();
       this.entitiesTableWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false});
       if (showTitleIcon) {
         this.entitiesTableWidgetConfigForm.get('titleIcon').enable();
@@ -128,11 +134,15 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
       }
     } else {
       this.entitiesTableWidgetConfigForm.get('title').disable();
+      this.entitiesTableWidgetConfigForm.get('titleFont').disable();
+      this.entitiesTableWidgetConfigForm.get('titleColor').disable();
       this.entitiesTableWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false});
       this.entitiesTableWidgetConfigForm.get('titleIcon').disable();
       this.entitiesTableWidgetConfigForm.get('iconColor').disable();
     }
     this.entitiesTableWidgetConfigForm.get('title').updateValueAndValidity({emitEvent});
+    this.entitiesTableWidgetConfigForm.get('titleFont').updateValueAndValidity({emitEvent});
+    this.entitiesTableWidgetConfigForm.get('titleColor').updateValueAndValidity({emitEvent});
     this.entitiesTableWidgetConfigForm.get('showTitleIcon').updateValueAndValidity({emitEvent: false});
     this.entitiesTableWidgetConfigForm.get('titleIcon').updateValueAndValidity({emitEvent});
     this.entitiesTableWidgetConfigForm.get('iconColor').updateValueAndValidity({emitEvent});

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

@@ -29,7 +29,7 @@ import { WidgetConfigComponent } from '@home/components/widget/widget-config.com
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { getTimewindowConfig } from '@home/components/widget/config/timewindow-config-panel.component';
 import { isUndefined } from '@core/utils';
-import { getLabel, setLabel } from '@home/components/widget/config/widget-settings.models';
+import { getLabel, setLabel } from '@shared/models/widget-settings.models';
 
 @Component({
   selector: 'tb-simple-card-basic-config',

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

@@ -39,13 +39,24 @@
   </tb-data-keys-panel>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
-      </mat-form-field>
+          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="titleFont"
+                          clearButton
+                          [previewText]="timeseriesTableWidgetConfigForm.get('title').value"
+                          [initialPreviewStyle]="widgetConfig.config.titleStyle">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="titleColor">
+        </tb-color-input>
+      </div>
     </div>
     <div class="tb-form-row space-between">
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
@@ -57,6 +68,7 @@
                                  formControlName="titleIcon">
         </tb-material-icon-select>
         <tb-color-input asBoxInput
+                        colorClearButton
                         formControlName="iconColor">
         </tb-color-input>
       </div>
@@ -72,12 +84,14 @@
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.text-color' | translate }}</div>
       <tb-color-input asBoxInput
+                      colorClearButton
                       formControlName="color">
       </tb-color-input>
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.background-color' | translate }}</div>
       <tb-color-input asBoxInput
+                      colorClearButton
                       formControlName="backgroundColor">
       </tb-color-input>
     </div>

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.ts

@@ -66,6 +66,8 @@ export class TimeseriesTableBasicConfigComponent extends BasicWidgetConfigCompon
       columns: [this.getColumns(configData.config.datasources), []],
       showTitle: [configData.config.showTitle, []],
       title: [configData.config.title, []],
+      titleFont: [configData.config.titleFont, []],
+      titleColor: [configData.config.titleColor, []],
       showTitleIcon: [configData.config.showTitleIcon, []],
       titleIcon: [configData.config.titleIcon, []],
       iconColor: [configData.config.iconColor, []],
@@ -85,6 +87,8 @@ export class TimeseriesTableBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.actions = config.actions;
     this.widgetConfig.config.showTitle = config.showTitle;
     this.widgetConfig.config.title = config.title;
+    this.widgetConfig.config.titleFont = config.titleFont;
+    this.widgetConfig.config.titleColor = config.titleColor;
     this.widgetConfig.config.showTitleIcon = config.showTitleIcon;
     this.widgetConfig.config.titleIcon = config.titleIcon;
     this.widgetConfig.config.iconColor = config.iconColor;
@@ -104,6 +108,8 @@ export class TimeseriesTableBasicConfigComponent extends BasicWidgetConfigCompon
     const showTitleIcon: boolean = this.timeseriesTableWidgetConfigForm.get('showTitleIcon').value;
     if (showTitle) {
       this.timeseriesTableWidgetConfigForm.get('title').enable();
+      this.timeseriesTableWidgetConfigForm.get('titleFont').enable();
+      this.timeseriesTableWidgetConfigForm.get('titleColor').enable();
       this.timeseriesTableWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false});
       if (showTitleIcon) {
         this.timeseriesTableWidgetConfigForm.get('titleIcon').enable();
@@ -114,11 +120,15 @@ export class TimeseriesTableBasicConfigComponent extends BasicWidgetConfigCompon
       }
     } else {
       this.timeseriesTableWidgetConfigForm.get('title').disable();
+      this.timeseriesTableWidgetConfigForm.get('titleFont').disable();
+      this.timeseriesTableWidgetConfigForm.get('titleColor').disable();
       this.timeseriesTableWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false});
       this.timeseriesTableWidgetConfigForm.get('titleIcon').disable();
       this.timeseriesTableWidgetConfigForm.get('iconColor').disable();
     }
     this.timeseriesTableWidgetConfigForm.get('title').updateValueAndValidity({emitEvent});
+    this.timeseriesTableWidgetConfigForm.get('titleFont').updateValueAndValidity({emitEvent});
+    this.timeseriesTableWidgetConfigForm.get('titleColor').updateValueAndValidity({emitEvent});
     this.timeseriesTableWidgetConfigForm.get('showTitleIcon').updateValueAndValidity({emitEvent: false});
     this.timeseriesTableWidgetConfigForm.get('titleIcon').updateValueAndValidity({emitEvent});
     this.timeseriesTableWidgetConfigForm.get('iconColor').updateValueAndValidity({emitEvent});

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

@@ -34,7 +34,7 @@ import {
   DateFormatSettings,
   getLabel,
   setLabel
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 import {
   valueCardDefaultSettings,
   ValueCardLayout,

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

@@ -39,13 +39,24 @@
   </tb-data-keys-panel>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
-      </mat-form-field>
+          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="titleFont"
+                          clearButton
+                          [previewText]="flotWidgetConfigForm.get('title').value"
+                          [initialPreviewStyle]="widgetConfig.config.titleStyle">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="titleColor">
+        </tb-color-input>
+      </div>
     </div>
     <div class="tb-form-row space-between">
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
@@ -57,6 +68,7 @@
                                  formControlName="titleIcon">
         </tb-material-icon-select>
         <tb-color-input asBoxInput
+                        colorClearButton
                         formControlName="iconColor">
         </tb-color-input>
       </div>
@@ -70,12 +82,14 @@
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.text-color' | translate }}</div>
       <tb-color-input asBoxInput
+                      colorClearButton
                       formControlName="color">
       </tb-color-input>
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.background-color' | translate }}</div>
       <tb-color-input asBoxInput
+                      colorClearButton
                       formControlName="backgroundColor">
       </tb-color-input>
     </div>

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

@@ -66,6 +66,8 @@ export class FlotBasicConfigComponent extends BasicWidgetConfigComponent {
       series: [this.getSeries(configData.config.datasources), []],
       showTitle: [configData.config.showTitle, []],
       title: [configData.config.title, []],
+      titleFont: [configData.config.titleFont, []],
+      titleColor: [configData.config.titleColor, []],
       showTitleIcon: [configData.config.showTitleIcon, []],
       titleIcon: [configData.config.titleIcon, []],
       iconColor: [configData.config.iconColor, []],
@@ -89,6 +91,8 @@ export class FlotBasicConfigComponent extends BasicWidgetConfigComponent {
     this.widgetConfig.config.actions = config.actions;
     this.widgetConfig.config.showTitle = config.showTitle;
     this.widgetConfig.config.title = config.title;
+    this.widgetConfig.config.titleFont = config.titleFont;
+    this.widgetConfig.config.titleColor = config.titleColor;
     this.widgetConfig.config.showTitleIcon = config.showTitleIcon;
     this.widgetConfig.config.titleIcon = config.titleIcon;
     this.widgetConfig.config.iconColor = config.iconColor;
@@ -114,6 +118,8 @@ export class FlotBasicConfigComponent extends BasicWidgetConfigComponent {
     const showLegend: boolean = this.flotWidgetConfigForm.get('showLegend').value;
     if (showTitle) {
       this.flotWidgetConfigForm.get('title').enable();
+      this.flotWidgetConfigForm.get('titleFont').enable();
+      this.flotWidgetConfigForm.get('titleColor').enable();
       this.flotWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false});
       if (showTitleIcon) {
         this.flotWidgetConfigForm.get('titleIcon').enable();
@@ -124,6 +130,8 @@ export class FlotBasicConfigComponent extends BasicWidgetConfigComponent {
       }
     } else {
       this.flotWidgetConfigForm.get('title').disable();
+      this.flotWidgetConfigForm.get('titleFont').disable();
+      this.flotWidgetConfigForm.get('titleColor').disable();
       this.flotWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false});
       this.flotWidgetConfigForm.get('titleIcon').disable();
       this.flotWidgetConfigForm.get('iconColor').disable();
@@ -134,6 +142,8 @@ export class FlotBasicConfigComponent extends BasicWidgetConfigComponent {
       this.flotWidgetConfigForm.get('legendConfig').disable();
     }
     this.flotWidgetConfigForm.get('title').updateValueAndValidity({emitEvent});
+    this.flotWidgetConfigForm.get('titleFont').updateValueAndValidity({emitEvent});
+    this.flotWidgetConfigForm.get('titleColor').updateValueAndValidity({emitEvent});
     this.flotWidgetConfigForm.get('showTitleIcon').updateValueAndValidity({emitEvent: false});
     this.flotWidgetConfigForm.get('titleIcon').updateValueAndValidity({emitEvent});
     this.flotWidgetConfigForm.get('iconColor').updateValueAndValidity({emitEvent});

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

@@ -29,6 +29,7 @@ import { FilterSelectComponent } from '@home/components/filter/filter-select.com
 import { WidgetSettingsModule } from '@home/components/widget/lib/settings/widget-settings.module';
 import { WidgetSettingsComponent } from '@home/components/widget/config/widget-settings.component';
 import { TimewindowConfigPanelComponent } from '@home/components/widget/config/timewindow-config-panel.component';
+import { WidgetSettingsCommonModule } from '@home/components/widget/lib/settings/common/widget-settings-common.module';
 
 @NgModule({
   declarations:
@@ -48,7 +49,8 @@ import { TimewindowConfigPanelComponent } from '@home/components/widget/config/t
   imports: [
     CommonModule,
     SharedModule,
-    WidgetSettingsModule
+    WidgetSettingsModule,
+    WidgetSettingsCommonModule
   ],
   exports: [
     AlarmAssigneeSelectComponent,
@@ -61,7 +63,8 @@ import { TimewindowConfigPanelComponent } from '@home/components/widget/config/t
     EntityAliasSelectComponent,
     FilterSelectComponent,
     TimewindowConfigPanelComponent,
-    WidgetSettingsComponent
+    WidgetSettingsComponent,
+    WidgetSettingsCommonModule
   ]
 })
 export class WidgetConfigComponentsModule { }

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

@@ -28,7 +28,7 @@ import {
   iconStyle,
   overlayStyle,
   textStyle
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } from './value-card-widget.models';
 import { WidgetComponent } from '@home/components/widget/widget.component';
 

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

@@ -21,7 +21,7 @@ import {
   constantColor,
   cssUnit, DateFormatSettings,
   Font, lastUpdateAgoDateFormat
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 
 export enum ValueCardLayout {
   square = 'square',

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

@@ -30,7 +30,7 @@ import {
   DateFormatProcessor,
   DateFormatSettings,
   getLabel
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 
 @Component({
   selector: 'tb-value-card-widget-settings',

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.ts

@@ -22,7 +22,7 @@ import {
   BackgroundSettings,
   BackgroundType,
   backgroundTypeTranslations, ComponentStyle
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts

@@ -22,7 +22,7 @@ import {
   BackgroundType,
   ComponentStyle,
   overlayStyle
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 import { MatButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts

@@ -21,7 +21,7 @@ import {
   ColorSettings,
   ColorType,
   colorTypeTranslations
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import {
   AbstractControl,

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ColorSettings, ColorType, ComponentStyle } from '@home/components/widget/config/widget-settings.models';
+import { ColorSettings, ColorType, ComponentStyle } from '@shared/models/widget-settings.models';
 import { MatButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-unit-select.component.html

@@ -16,7 +16,9 @@
 
 -->
 <mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 100%;">
-  <mat-select [formControl]="cssUnitFormControl">
+  <mat-select [formControl]="cssUnitFormControl" placeholder="{{ 'widget-config.set' | translate }}">
+    <mat-option *ngIf="allowEmpty" [value]="null">
+    </mat-option>
     <mat-option *ngFor="let cssUnit of cssUnitsList" [value]="cssUnit">{{ cssUnit }}</mat-option>
   </mat-select>
 </mat-form-field>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-unit-select.component.ts

@@ -16,7 +16,8 @@
 
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms';
-import { cssUnit, cssUnits } from '@home/components/widget/config/widget-settings.models';
+import { cssUnit, cssUnits } from '@shared/models/widget-settings.models';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-css-unit-select',
@@ -35,6 +36,10 @@ export class CssUnitSelectComponent implements OnInit, ControlValueAccessor {
   @Input()
   disabled: boolean;
 
+  @Input()
+  @coerceBoolean()
+  allowEmpty = false;
+
   cssUnitsList = cssUnits;
 
   cssUnitFormControl: UntypedFormControl;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts

@@ -20,7 +20,7 @@ import {
   compareDateFormats,
   dateFormats,
   DateFormatSettings
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { MatButton } from '@angular/material/button';

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
-import { DateFormatSettings } from '@home/components/widget/config/widget-settings.models';
+import { DateFormatSettings } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormControl, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html

@@ -51,7 +51,9 @@
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-weight</div>
     <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
-      <mat-select formControlName="weight">
+      <mat-select formControlName="weight" placeholder="{{ 'widget-config.set' | translate }}">
+        <mat-option [value]="null">
+        </mat-option>
         <mat-option *ngFor="let weight of fontWeightsList" [value]="weight">
           {{ fontWeightTranslationsMap.has(weight) ? (fontWeightTranslationsMap.get(weight) | translate) : weight }}
         </mat-option>
@@ -61,7 +63,9 @@
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-style</div>
     <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
-      <mat-select formControlName="style">
+      <mat-select formControlName="style" placeholder="{{ 'widget-config.set' | translate }}">
+        <mat-option [value]="null">
+        </mat-option>
         <mat-option *ngFor="let style of fontStylesList" [value]="style">
           {{ fontStyleTranslationsMap.get(style) | translate }}
         </mat-option>
@@ -74,6 +78,14 @@
     <div class="preview-text" fxFlex [style]="previewStyle">{{ previewText }}</div>
   </div>
   <div class="tb-font-settings-panel-buttons">
+    <button *ngIf="clearButton"
+            mat-button
+            type="button"
+            (click)="clearFont()"
+            [disabled]="clearDisabled()">
+      {{ 'action.clear' | translate }}
+    </button>
+    <span *ngIf="clearButton" fxFlex></span>
     <button mat-button
             color="primary"
             type="button"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.ts

@@ -32,15 +32,16 @@ import {
   fontStyles,
   fontStyleTranslations,
   fontWeights,
-  fontWeightTranslations,
+  fontWeightTranslations, isFontPartiallySet,
   textStyle
-} from '@home/components/widget/config/widget-settings.models';
+} from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Observable } from 'rxjs';
 import { map, startWith, tap } from 'rxjs/operators';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-font-settings-panel',
@@ -57,6 +58,13 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit
   @Input()
   previewText = 'AaBbCcDd';
 
+  @Input()
+  initialPreviewStyle: ComponentStyle;
+
+  @Input()
+  @coerceBoolean()
+  clearButton = false;
+
   @Input()
   popover: TbPopoverComponent<FontSettingsPanelComponent>;
 
@@ -89,19 +97,17 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit
   ngOnInit(): void {
     this.fontFormGroup = this.fb.group(
       {
-        size: [this.font?.size, [Validators.required, Validators.min(0)]],
+        size: [this.font?.size, [Validators.min(0)]],
-        sizeUnit: [this.font?.sizeUnit, [Validators.required]],
+        sizeUnit: [(this.font?.sizeUnit || 'px'), []],
-        family: [this.font?.family, [Validators.required]],
+        family: [this.font?.family, []],
-        weight: [this.font?.weight, [Validators.required]],
+        weight: [this.font?.weight, []],
-        style: [this.font?.style, [Validators.required]]
+        style: [this.font?.style, []]
       }
     );
-    if (this.font) {
+    this.updatePreviewStyle(this.font);
-      this.previewStyle = textStyle(this.font, '1');
+    this.fontFormGroup.valueChanges.subscribe((font: Font) => {
-    }
-    this.fontFormGroup.valueChanges.subscribe((value: Font) => {
       if (this.fontFormGroup.valid) {
-        this.previewStyle = textStyle(value, '1');
+        this.updatePreviewStyle(font);
         setTimeout(() => {this.popover?.updatePosition();}, 0);
       }
     });
@@ -130,4 +136,17 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit
     this.fontApplied.emit(font);
   }
 
+  clearDisabled(): boolean {
+    return !isFontPartiallySet(this.fontFormGroup.value);
+  }
+
+  clearFont() {
+    this.fontFormGroup.reset({sizeUnit: 'px'});
+    this.fontFormGroup.markAsDirty();
+  }
+
+  private updatePreviewStyle(font: Font) {
+    this.previewStyle = {...(this.initialPreviewStyle || {}), ...textStyle(font, '1')};
+  }
+
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts

@@ -16,11 +16,12 @@
 
 import { Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Font } from '@home/components/widget/config/widget-settings.models';
+import { ComponentStyle, Font } from '@shared/models/widget-settings.models';
 import { MatButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { FontSettingsPanelComponent } from '@home/components/widget/lib/settings/common/font-settings-panel.component';
 import { isDefinedAndNotNull } from '@core/utils';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-font-settings',
@@ -42,6 +43,13 @@ export class FontSettingsComponent implements OnInit, ControlValueAccessor {
   @Input()
   previewText: string | (() => string);
 
+  @Input()
+  initialPreviewStyle: ComponentStyle;
+
+  @Input()
+  @coerceBoolean()
+  clearButton = false;
+
   private modelValue: Font;
 
   private propagateChange = null;
@@ -77,7 +85,9 @@ export class FontSettingsComponent implements OnInit, ControlValueAccessor {
       this.popoverService.hidePopover(trigger);
     } else {
       const ctx: any = {
-        font: this.modelValue
+        font: this.modelValue,
+        initialPreviewStyle: this.initialPreviewStyle,
+        clearButton: this.clearButton
       };
       if (isDefinedAndNotNull(this.previewText)) {
         const previewText = typeof this.previewText === 'string' ? this.previewText : this.previewText();

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

@@ -0,0 +1,84 @@
+///
+/// Copyright © 2016-2023 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module';
+import { WidgetFontComponent } from '@home/components/widget/lib/settings/common/widget-font.component';
+import { ValueSourceComponent } from '@home/components/widget/lib/settings/common/value-source.component';
+import { LegendConfigComponent } from '@home/components/widget/lib/settings/common/legend-config.component';
+import {
+  ImageCardsSelectComponent,
+  ImageCardsSelectOptionDirective
+} from '@home/components/widget/lib/settings/common/image-cards-select.component';
+import { FontSettingsComponent } from '@home/components/widget/lib/settings/common/font-settings.component';
+import { FontSettingsPanelComponent } from '@home/components/widget/lib/settings/common/font-settings-panel.component';
+import { ColorSettingsComponent } from '@home/components/widget/lib/settings/common/color-settings.component';
+import {
+  ColorSettingsPanelComponent
+} from '@home/components/widget/lib/settings/common/color-settings-panel.component';
+import { CssUnitSelectComponent } from '@home/components/widget/lib/settings/common/css-unit-select.component';
+import { DateFormatSelectComponent } from '@home/components/widget/lib/settings/common/date-format-select.component';
+import {
+  DateFormatSettingsPanelComponent
+} from '@home/components/widget/lib/settings/common/date-format-settings-panel.component';
+import { BackgroundSettingsComponent } from '@home/components/widget/lib/settings/common/background-settings.component';
+import {
+  BackgroundSettingsPanelComponent
+} from '@home/components/widget/lib/settings/common/background-settings-panel.component';
+
+@NgModule({
+  declarations: [
+    ImageCardsSelectOptionDirective,
+    ImageCardsSelectComponent,
+    FontSettingsComponent,
+    FontSettingsPanelComponent,
+    ColorSettingsComponent,
+    ColorSettingsPanelComponent,
+    CssUnitSelectComponent,
+    DateFormatSelectComponent,
+    DateFormatSettingsPanelComponent,
+    BackgroundSettingsComponent,
+    BackgroundSettingsPanelComponent,
+    ValueSourceComponent,
+    LegendConfigComponent,
+    WidgetFontComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    SharedHomeComponentsModule
+  ],
+  exports: [
+    ImageCardsSelectOptionDirective,
+    ImageCardsSelectComponent,
+    FontSettingsComponent,
+    FontSettingsPanelComponent,
+    ColorSettingsComponent,
+    ColorSettingsPanelComponent,
+    CssUnitSelectComponent,
+    DateFormatSelectComponent,
+    DateFormatSettingsPanelComponent,
+    BackgroundSettingsComponent,
+    BackgroundSettingsPanelComponent,
+    ValueSourceComponent,
+    LegendConfigComponent,
+    WidgetFontComponent
+  ]
+})
+export class WidgetSettingsCommonModule {
+}

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

@@ -32,7 +32,6 @@ import {
 import {
   MarkdownWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/cards/markdown-widget-settings.component';
-import { WidgetFontComponent } from '@home/components/widget/lib/settings/common/widget-font.component';
 import { LabelWidgetLabelComponent } from '@home/components/widget/lib/settings/cards/label-widget-label.component';
 import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settings/cards/label-widget-settings.component';
 import {
@@ -72,7 +71,6 @@ import {
 import {
   DigitalGaugeWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component';
-import { ValueSourceComponent } from '@home/components/widget/lib/settings/common/value-source.component';
 import { FixedColorLevelComponent } from '@home/components/widget/lib/settings/gauge/fixed-color-level.component';
 import { TickValueComponent } from '@home/components/widget/lib/settings/gauge/tick-value.component';
 import { FlotWidgetSettingsComponent } from '@home/components/widget/lib/settings/chart/flot-widget-settings.component';
@@ -265,29 +263,10 @@ import {
 import {
   QuickLinksWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/home-page/quick-links-widget-settings.component';
-import { LegendConfigComponent } from '@home/components/widget/lib/settings/common/legend-config.component';
-import {
-  ImageCardsSelectOptionDirective,
-  ImageCardsSelectComponent
-} from '@home/components/widget/lib/settings/common/image-cards-select.component';
-import { FontSettingsComponent } from '@home/components/widget/lib/settings/common/font-settings.component';
-import { FontSettingsPanelComponent } from '@home/components/widget/lib/settings/common/font-settings-panel.component';
-import { ColorSettingsComponent } from '@home/components/widget/lib/settings/common/color-settings.component';
-import {
-  ColorSettingsPanelComponent
-} from '@home/components/widget/lib/settings/common/color-settings-panel.component';
-import { CssUnitSelectComponent } from '@home/components/widget/lib/settings/common/css-unit-select.component';
-import { DateFormatSelectComponent } from '@home/components/widget/lib/settings/common/date-format-select.component';
-import {
-  DateFormatSettingsPanelComponent
-} from '@home/components/widget/lib/settings/common/date-format-settings-panel.component';
-import { BackgroundSettingsComponent } from '@home/components/widget/lib/settings/common/background-settings.component';
-import {
-  BackgroundSettingsPanelComponent
-} from '@home/components/widget/lib/settings/common/background-settings-panel.component';
 import {
   ValueCardWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/cards/value-card-widget-settings.component';
+import { WidgetSettingsCommonModule } from '@home/components/widget/lib/settings/common/widget-settings-common.module';
 
 @NgModule({
   declarations: [
@@ -296,7 +275,6 @@ import {
     TimeseriesTableKeySettingsComponent,
     TimeseriesTableLatestKeySettingsComponent,
     MarkdownWidgetSettingsComponent,
-    WidgetFontComponent,
     LabelWidgetLabelComponent,
     LabelWidgetSettingsComponent,
     SimpleCardWidgetSettingsComponent,
@@ -312,8 +290,6 @@ import {
     AnalogueLinearGaugeWidgetSettingsComponent,
     AnalogueCompassWidgetSettingsComponent,
     DigitalGaugeWidgetSettingsComponent,
-    ValueSourceComponent,
-    LegendConfigComponent,
     FixedColorLevelComponent,
     TickValueComponent,
     FlotWidgetSettingsComponent,
@@ -390,23 +366,13 @@ import {
     TripAnimationWidgetSettingsComponent,
     DocLinksWidgetSettingsComponent,
     QuickLinksWidgetSettingsComponent,
-    ImageCardsSelectOptionDirective,
-    ImageCardsSelectComponent,
-    FontSettingsComponent,
-    FontSettingsPanelComponent,
-    ColorSettingsComponent,
-    ColorSettingsPanelComponent,
-    CssUnitSelectComponent,
-    DateFormatSelectComponent,
-    DateFormatSettingsPanelComponent,
-    BackgroundSettingsComponent,
-    BackgroundSettingsPanelComponent,
     ValueCardWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
     SharedModule,
-    SharedHomeComponentsModule
+    SharedHomeComponentsModule,
+    WidgetSettingsCommonModule
   ],
   exports: [
     QrCodeWidgetSettingsComponent,
@@ -414,7 +380,6 @@ import {
     TimeseriesTableKeySettingsComponent,
     TimeseriesTableLatestKeySettingsComponent,
     MarkdownWidgetSettingsComponent,
-    WidgetFontComponent,
     LabelWidgetLabelComponent,
     LabelWidgetSettingsComponent,
     SimpleCardWidgetSettingsComponent,
@@ -430,8 +395,6 @@ import {
     AnalogueLinearGaugeWidgetSettingsComponent,
     AnalogueCompassWidgetSettingsComponent,
     DigitalGaugeWidgetSettingsComponent,
-    ValueSourceComponent,
-    LegendConfigComponent,
     FixedColorLevelComponent,
     TickValueComponent,
     FlotWidgetSettingsComponent,
@@ -508,17 +471,6 @@ import {
     TripAnimationWidgetSettingsComponent,
     DocLinksWidgetSettingsComponent,
     QuickLinksWidgetSettingsComponent,
-    ImageCardsSelectOptionDirective,
-    ImageCardsSelectComponent,
-    FontSettingsComponent,
-    FontSettingsPanelComponent,
-    ColorSettingsComponent,
-    ColorSettingsPanelComponent,
-    CssUnitSelectComponent,
-    DateFormatSelectComponent,
-    DateFormatSettingsPanelComponent,
-    BackgroundSettingsComponent,
-    BackgroundSettingsPanelComponent,
     ValueCardWidgetSettingsComponent
   ]
 })

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

@@ -40,9 +40,20 @@
         </mat-slide-toggle>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widget-config.title</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
-          </mat-form-field>
+              <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+            <tb-font-settings formControlName="titleFont"
+                              clearButton
+                              [previewText]="widgetSettings.get('title').value"
+                              [initialPreviewStyle]="widgetSettings.get('titleStyle').value">
+            </tb-font-settings>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="titleColor">
+            </tb-color-input>
+          </div>
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widget-config.title-tooltip</div>
@@ -63,6 +74,7 @@
               formControlName="titleIcon">
             </tb-material-icon-select>
             <tb-color-input asBoxInput
+                            colorClearButton
                             formControlName="iconColor">
             </tb-color-input>
           </div>
@@ -88,12 +100,14 @@
         <div class="tb-form-row space-between">
           <div>{{ 'widget-config.text-color' | translate }}</div>
           <tb-color-input asBoxInput
+                          colorClearButton
                           formControlName="color">
           </tb-color-input>
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'widget-config.background-color' | translate }}</div>
           <tb-color-input asBoxInput
+                          colorClearButton
                           formControlName="backgroundColor">
           </tb-color-input>
         </div>

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

@@ -212,6 +212,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
     this.advancedSettings = this.fb.group({});
     this.widgetSettings = this.fb.group({
       title: [null, []],
+      titleFont: [null, []],
+      titleColor: [null, []],
       showTitleIcon: [null, []],
       titleIcon: [null, []],
       iconColor: [null, []],
@@ -473,6 +475,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
       const displayWidgetTitle = isDefined(config.showTitle) ? config.showTitle : false;
       this.widgetSettings.patchValue({
           title: config.title,
+          titleFont: config.titleFont,
+          titleColor: config.titleColor,
           showTitleIcon: isDefined(config.showTitleIcon) && displayWidgetTitle ? config.showTitleIcon : false,
           titleIcon: isDefined(config.titleIcon) ? config.titleIcon : '',
           iconColor: isDefined(config.iconColor) ? config.iconColor : 'rgba(0, 0, 0, 0.87)',
@@ -580,11 +584,15 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
     const showTitleIcon: boolean = this.widgetSettings.get('showTitleIcon').value;
     if (showTitle) {
       this.widgetSettings.get('title').enable({emitEvent: false});
+      this.widgetSettings.get('titleFont').enable({emitEvent: false});
+      this.widgetSettings.get('titleColor').enable({emitEvent: false});
       this.widgetSettings.get('titleTooltip').enable({emitEvent: false});
       this.widgetSettings.get('titleStyle').enable({emitEvent: false});
       this.widgetSettings.get('showTitleIcon').enable({emitEvent: false});
     } else {
       this.widgetSettings.get('title').disable({emitEvent: false});
+      this.widgetSettings.get('titleFont').disable({emitEvent: false});
+      this.widgetSettings.get('titleColor').disable({emitEvent: false});
       this.widgetSettings.get('titleTooltip').disable({emitEvent: false});
       this.widgetSettings.get('titleStyle').disable({emitEvent: false});
       this.widgetSettings.get('showTitleIcon').disable({emitEvent: false});

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -33,6 +33,7 @@ import { IAliasController, IStateController } from '@app/core/api/widget-api.mod
 import { enumerable } from '@shared/decorators/enumerable';
 import { UtilsService } from '@core/services/utils.service';
 import { TbPopoverComponent } from '@shared/components/popover.component';
+import { ComponentStyle, textStyle } from '@shared/models/widget-settings.models';
 
 export interface WidgetsData {
   widgets: Array<Widget>;
@@ -334,11 +335,11 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   customTranslatedTitle: string;
   titleTooltip: string;
   showTitle: boolean;
-  titleStyle: {[klass: string]: any};
+  titleStyle: ComponentStyle;
 
   titleIcon: string;
   showTitleIcon: boolean;
-  titleIconStyle: {[klass: string]: any};
+  titleIconStyle: ComponentStyle;
 
   dropShadow: boolean;
   enableFullscreen: boolean;
@@ -351,7 +352,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
 
   onlyHistoryTimewindow: boolean;
 
-  style: {[klass: string]: any};
+  style: ComponentStyle;
 
   showWidgetTitlePanel: boolean;
   showWidgetActions: boolean;
@@ -437,8 +438,10 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
       && this.widgetContext.widgetTitleTooltip.length ? this.widgetContext.widgetTitleTooltip : this.widget.config.titleTooltip;
     this.titleTooltip = this.dashboard.utils.customTranslation(this.titleTooltip, this.titleTooltip);
     this.showTitle = isDefined(this.widget.config.showTitle) ? this.widget.config.showTitle : true;
-    this.titleStyle = this.widget.config.titleStyle ? this.widget.config.titleStyle : {};
+    this.titleStyle = {...(this.widget.config.titleStyle || {}), ...textStyle(this.widget.config.titleFont, '24px', '0.01em')};
-
+    if (this.widget.config.titleColor) {
+      this.titleStyle.color = this.widget.config.titleColor;
+    }
     this.titleIcon = isDefined(this.widget.config.titleIcon) ? this.widget.config.titleIcon : '';
     this.showTitleIcon = isDefined(this.widget.config.showTitleIcon) ? this.widget.config.showTitleIcon : false;
     this.titleIconStyle = {};

ui-ngx/src/app/shared/components/color-input.component.ts

@@ -60,29 +60,13 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
   @Input()
   requiredText: string;
 
-  private colorClearButtonValue: boolean;
-  get colorClearButton(): boolean {
-    return this.colorClearButtonValue;
-  }
   @Input()
-  set colorClearButton(value: boolean) {
+  @coerceBoolean()
-    const newVal = coerceBooleanProperty(value);
+  colorClearButton = false;
-    if (this.colorClearButtonValue !== newVal) {
-      this.colorClearButtonValue = newVal;
-    }
-  }
 
-  private openOnInputValue: boolean;
-  get openOnInput(): boolean {
-    return this.openOnInputValue;
-  }
   @Input()
-  set openOnInput(value: boolean) {
+  @coerceBoolean()
-    const newVal = coerceBooleanProperty(value);
+  openOnInput = false;
-    if (this.openOnInputValue !== newVal) {
-      this.openOnInputValue = newVal;
-    }
-  }
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -167,7 +151,8 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
 
   showColorPicker($event: MouseEvent) {
     $event.stopPropagation();
-    this.dialogs.colorPicker(this.colorFormGroup.get('color').value).subscribe(
+    this.dialogs.colorPicker(this.colorFormGroup.get('color').value,
+      this.colorClearButton).subscribe(
       (color) => {
         if (color) {
           this.colorFormGroup.patchValue(
@@ -190,7 +175,8 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
       const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, ColorPickerPanelComponent, 'left', true, null,
         {
-          color: this.colorFormGroup.get('color').value
+          color: this.colorFormGroup.get('color').value,
+          colorClearButton: this.colorClearButton
         },
         {},
         {}, {}, true);

ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html

@@ -19,6 +19,14 @@
   <div class="tb-color-picker-title" translate>color.color</div>
   <tb-color-picker [formControl]="colorPickerControl"></tb-color-picker>
   <div class="tb-color-picker-panel-buttons">
+    <button *ngIf="colorClearButton"
+            mat-button
+            color="primary"
+            type="button"
+            (click)="clearColor()"
+            [disabled]="!colorPickerControl.value">
+      {{ 'action.clear' | translate }}
+    </button>
     <button mat-raised-button
             color="primary"
             type="button"

ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.ts

@@ -20,6 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormControl } from '@angular/forms';
 import { TbPopoverComponent } from '@shared/components/popover.component';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-color-picker-panel',
@@ -33,6 +34,10 @@ export class ColorPickerPanelComponent extends PageComponent implements OnInit {
   @Input()
   color: string;
 
+  @Input()
+  @coerceBoolean()
+  colorClearButton = false;
+
   @Input()
   popover: TbPopoverComponent<ColorPickerPanelComponent>;
 
@@ -52,4 +57,8 @@ export class ColorPickerPanelComponent extends PageComponent implements OnInit {
   selectColor() {
     this.colorSelected.emit(this.colorPickerControl.value);
   }
+
+  clearColor() {
+    this.colorSelected.emit(null);
+  }
 }

ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html

@@ -23,6 +23,7 @@
     <mat-icon>close</mat-icon>
   </button>
   <tb-color-picker-panel [color]="color"
+                         [colorClearButton]="colorClearButton"
                          (colorSelected)="selectColor($event)">
   </tb-color-picker-panel>
 </div>

ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts

@@ -23,6 +23,7 @@ import { DialogComponent } from '@shared/components/dialog.component';
 
 export interface ColorPickerDialogData {
   color: string;
+  colorClearButton: boolean;
 }
 
 @Component({
@@ -33,6 +34,7 @@ export interface ColorPickerDialogData {
 export class ColorPickerDialogComponent extends DialogComponent<ColorPickerDialogComponent, string> {
 
   color: string;
+  colorClearButton: boolean;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -40,6 +42,7 @@ export class ColorPickerDialogComponent extends DialogComponent<ColorPickerDialo
               public dialogRef: MatDialogRef<ColorPickerDialogComponent, string>) {
     super(store, router, dialogRef);
     this.color = data.color;
+    this.colorClearButton = data.colorClearButton;
   }
 
   selectColor(color: string) {

ui-ngx/src/app/shared/models/public-api.ts

@@ -54,6 +54,7 @@ export * from './settings.models';
 export * from './tenant.model';
 export * from './user.model';
 export * from './user-settings.models';
+export * from './widget-settings.models';
 export * from './widget.models';
 export * from './widgets-bundle.model';
 export * from './window-message.model';

ui-ngx/src/app/modules/home/components/widget/config/widget-settings.models.ts → ui-ngx/src/app/shared/models/widget-settings.models.ts

@@ -308,11 +308,30 @@ export const iconStyle = (size: number, sizeUnit: cssUnit): ComponentStyle => {
   };
 };
 
-export const textStyle = (font: Font, lineHeight = '1.5', letterSpacing = '0.25px'): ComponentStyle => ({
+export const textStyle = (font?: Font, lineHeight = '1.5', letterSpacing = '0.25px'): ComponentStyle => {
-  font: font.style + ' normal ' + font.weight + ' ' + (font.size+font.sizeUnit) + '/' + lineHeight + ' ' + font.family +
+  const style: ComponentStyle = {
-    (font.family !== 'Roboto' ? ', Roboto' : ''),
+    lineHeight,
-  letterSpacing
+    letterSpacing
-});
+  };
+  if (font?.style) {
+    style.fontStyle = font.style;
+  }
+  if (font?.weight) {
+    style.fontWeight = font.weight;
+  }
+  if (font?.size) {
+    style.fontSize = (font.size + (font.sizeUnit || 'px'));
+  }
+  if (font?.family) {
+    style.fontFamily = font.family +
+      (font.family !== 'Roboto' ? ', Roboto' : '');
+  }
+  return style;
+};
+
+export const isFontSet = (font: Font): boolean => (!!font && !!font.style && !!font.weight && !!font.size && !!font.family);
+
+export const isFontPartiallySet = (font: Font): boolean => (!!font && (!!font.style || !!font.weight || !!font.size || !!font.family));
 
 export const backgroundStyle = (background: BackgroundSettings): ComponentStyle => {
   if (background.type === BackgroundType.color) {

ui-ngx/src/app/shared/models/widget.models.ts

@@ -40,6 +40,7 @@ import { Dashboard } from '@shared/models/dashboard.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { isEmptyStr } from '@core/utils';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
+import { ComponentStyle, Font } from '@shared/models/widget-settings.models';
 
 export enum widgetType {
   timeseries = 'timeseries',
@@ -619,6 +620,8 @@ export enum WidgetConfigMode {
 export interface WidgetConfig {
   configMode?: WidgetConfigMode;
   title?: string;
+  titleFont?: Font;
+  titleColor?: string;
   titleIcon?: string;
   showTitle?: boolean;
   showTitleIcon?: boolean;
@@ -639,9 +642,9 @@ export interface WidgetConfig {
   padding?: string;
   margin?: string;
   borderRadius?: string;
-  widgetStyle?: {[klass: string]: any};
+  widgetStyle?: ComponentStyle;
   widgetCss?: string;
-  titleStyle?: {[klass: string]: any};
+  titleStyle?: ComponentStyle;
   units?: string;
   decimals?: number;
   noDataDisplayMessage?: string;

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

@@ -74,7 +74,8 @@
         "reset": "Reset",
         "show-more": "Show more",
         "dont-show-again": "Do not show again",
-        "see-documentation": "See documentation"
+        "see-documentation": "See documentation",
+        "clear": "Clear"
     },
     "aggregation": {
         "aggregation": "Aggregation",

ui-ngx/src/form.scss

@@ -21,7 +21,7 @@
     flex-direction: column;
     align-items: stretch;
     gap: 12px;
-    padding: 12px 12px 12px 16px;
+    padding: 12px 7px 12px 16px;
     .mat-mdc-form-field, tb-unit-input {
       width: auto;
       &.medium-width {