UI: Add simple card widget settings form

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

@@ -0,0 +1,30 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<section [formGroup]="simpleCardWidgetSettingsForm" fxLayout="column">
+  <mat-form-field fxFlex class="mat-block">
+    <mat-label translate>widgets.simple-card.label-position</mat-label>
+    <mat-select formControlName="labelPosition">
+      <mat-option [value]="'left'">
+        {{ 'widgets.simple-card.label-position-left' | translate }}
+      </mat-option>
+      <mat-option [value]="'top'">
+        {{ 'widgets.simple-card.label-position-top' | translate }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</section>

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

@@ -0,0 +1,52 @@
+///
+/// Copyright © 2016-2022 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 { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+
+@Component({
+  selector: 'tb-simple-card-widget-settings',
+  templateUrl: './simple-card-widget-settings.component.html',
+  styleUrls: []
+})
+export class SimpleCardWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  simpleCardWidgetSettingsForm: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): FormGroup {
+    return this.simpleCardWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {
+      labelPosition: 'left'
+    };
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.simpleCardWidgetSettingsForm = this.fb.group({
+      labelPosition: [settings.labelPosition, []]
+    });
+  }
+}

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

@@ -35,6 +35,9 @@ import {
 import { LabelWidgetFontComponent } from '@home/components/widget/lib/settings/label-widget-font.component';
 import { LabelWidgetLabelComponent } from '@home/components/widget/lib/settings/label-widget-label.component';
 import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settings/label-widget-settings.component';
+import {
+  SimpleCardWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/simple-card-widget-settings.component';
 
 @NgModule({
   declarations: [
@@ -45,7 +48,8 @@ import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settin
     MarkdownWidgetSettingsComponent,
     LabelWidgetFontComponent,
     LabelWidgetLabelComponent,
-    LabelWidgetSettingsComponent
+    LabelWidgetSettingsComponent,
+    SimpleCardWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
@@ -60,7 +64,8 @@ import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settin
     MarkdownWidgetSettingsComponent,
     LabelWidgetFontComponent,
     LabelWidgetLabelComponent,
-    LabelWidgetSettingsComponent
+    LabelWidgetSettingsComponent,
+    SimpleCardWidgetSettingsComponent
   ]
 })
 export class WidgetSettingsModule {
@@ -72,5 +77,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
   'tb-timeseries-table-key-settings': TimeseriesTableKeySettingsComponent,
   'tb-timeseries-table-latest-key-settings': TimeseriesTableLatestKeySettingsComponent,
   'tb-markdown-widget-settings': MarkdownWidgetSettingsComponent,
-  'tb-label-widget-settings': LabelWidgetSettingsComponent
+  'tb-label-widget-settings': LabelWidgetSettingsComponent,
+  'tb-simple-card-widget-settings': SimpleCardWidgetSettingsComponent
 };

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

@@ -3402,6 +3402,11 @@
           "markdown-text-pattern": "Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')",
           "markdown-css": "Markdown/HTML CSS"
         },
+        "simple-card": {
+          "label-position": "Label position",
+          "label-position-left": "Left",
+          "label-position-top": "Top"
+        },
         "table": {
           "common-table-settings": "Common Table Settings",
           "enable-search": "Enable search",