UI: Introduce borderRadius widget card setting. Improve widget style json field.

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

@@ -114,6 +114,12 @@
             <input matInput formControlName="margin" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
+        <div class="tb-widget-config-row space-between">
+          <div>{{ 'widget-config.border-radius' | translate }}</div>
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+        </div>
         <mat-slide-toggle class="mat-slide slide-block" formControlName="dropShadow">
           {{ 'widget-config.drop-shadow' | translate }}
         </mat-slide-toggle>
@@ -126,7 +132,6 @@
           <ng-template matExpansionPanelContent>
             <tb-json-object-edit
               [editorStyle]="{minHeight: '100px'}"
-              required
               label="{{ 'widget-config.widget-style' | translate }}"
               formControlName="widgetStyle"
             ></tb-json-object-edit>

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

@@ -224,6 +224,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
       color: [null, []],
       padding: [null, []],
       margin: [null, []],
+      borderRadius: [null, []],
       widgetStyle: [null, []],
       widgetCss: [null, []],
       titleStyle: [null, []],
@@ -484,6 +485,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
           color: config.color,
           padding: config.padding,
           margin: config.margin,
+          borderRadius: config.borderRadius,
           widgetStyle: isDefined(config.widgetStyle) ? config.widgetStyle : {},
           widgetCss: isDefined(config.widgetCss) ? config.widgetCss : '',
           titleStyle: isDefined(config.titleStyle) ? config.titleStyle : {

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

@@ -328,6 +328,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   backgroundColor: string;
   padding: string;
   margin: string;
+  borderRadius: string;
 
   title: string;
   customTranslatedTitle: string;
@@ -427,6 +428,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     this.backgroundColor = this.widget.config.backgroundColor || '#fff';
     this.padding = this.widget.config.padding || '8px';
     this.margin = this.widget.config.margin || '0px';
+    this.borderRadius = this.widget.config.borderRadius;
 
     this.title = isDefined(this.widgetContext.widgetTitle)
       && this.widgetContext.widgetTitle.length ? this.widgetContext.widgetTitle : this.widget.config.title;
@@ -478,7 +480,8 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
       color: this.color,
       backgroundColor: this.backgroundColor,
       padding: this.padding,
-      margin: this.margin};
+      margin: this.margin,
+      borderRadius: this.borderRadius};
     if (this.widget.config.widgetStyle) {
       this.style = {...this.style, ...this.widget.config.widgetStyle};
     }

ui-ngx/src/app/shared/components/json-object-edit.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  forwardRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
 import { ControlValueAccessor, UntypedFormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
 import { Ace } from 'ace-builds';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -104,7 +113,8 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
 
   constructor(public elementRef: ElementRef,
               protected store: Store<AppState>,
-              private raf: RafService) {
+              private raf: RafService,
+              private cd: ChangeDetectorRef) {
   }
 
   ngOnInit(): void {
@@ -283,6 +293,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
       }
       this.modelValue = data;
       this.propagateChange(data);
+      this.cd.markForCheck();
     }
   }
 

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

@@ -637,6 +637,7 @@ export interface WidgetConfig {
   backgroundColor?: string;
   padding?: string;
   margin?: string;
+  borderRadius?: string;
   widgetStyle?: {[klass: string]: any};
   widgetCss?: string;
   titleStyle?: {[klass: string]: any};

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

@@ -4190,6 +4190,7 @@
         "enable-fullscreen": "Enable fullscreen",
         "background-color": "Background color",
         "text-color": "Text color",
+        "border-radius": "Border radius",
         "padding": "Padding",
         "margin": "Margin",
         "widget-style": "Widget style",