From 425b52b91be242b9e3be87acedfc0e497057873e Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 3 Jul 2023 17:09:35 +0300
Subject: [PATCH] UI: Improve flot line chart widget latest data key config.
 Improve toggle select component.

---
 .../add-widget-dialog.component.html          | 16 +---
 .../dashboard-page.component.html             | 16 +---
 .../data-key-config-dialog.component.html     |  6 +-
 .../widget/config/datasources.component.html  | 17 ++--
 .../timewindow-config-panel.component.html    | 11 +--
 .../getting-started-widget.component.html     | 19 +---
 .../recent-dashboards-widget.component.html   | 13 +--
 .../usage-info-widget.component.html          | 13 +--
 .../cards/label-widget-label.component.ts     |  2 +-
 .../flot-latest-key-settings.component.html   | 43 ++++-----
 .../gauge/fixed-color-level.component.ts      |  2 +-
 .../gauge/gauge-highlight.component.ts        |  2 +-
 .../settings/gauge/tick-value.component.ts    |  2 +-
 .../lib/settings/gpio/gpio-item.component.ts  |  2 +-
 .../input/datakey-select-option.component.ts  |  2 +-
 .../widget/widget-config.component.html       |  6 +-
 .../home-links/tenant_admin_home_page.raw     |  4 +-
 .../components/toggle-header.component.ts     | 88 +++++++++++++++----
 .../components/toggle-select.component.html   |  1 +
 .../components/toggle-select.component.ts     | 74 ++--------------
 ui-ngx/src/app/shared/shared.module.ts        |  8 +-
 21 files changed, 146 insertions(+), 201 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
index 05e7daee86..ad08c0c89e 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
@@ -20,18 +20,10 @@
     <h2 translate>widget.add</h2>
     <span fxFlex>: {{data.widgetInfo.widgetName}}</span>
     <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
-      <tb-toggle-header *ngIf="hasBasicMode" (valueChange)="widgetConfigMode = $event" ignoreMdLgSize="true"
-                        appearance="fill-invert" [options]="[
-                                {
-                                   name: translate.instant('widget.basic-mode'),
-                                   value: 'basic'
-                                },
-                                {
-                                   name: translate.instant('widget.advanced-mode'),
-                                   value: 'advanced'
-                                }
-                              ]" [value]="widgetConfigMode" name="widgetConfigModeHeader" useSelectOnMdLg="false">
-      </tb-toggle-header>
+      <tb-toggle-select *ngIf="hasBasicMode" appearance="fill-invert" [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
+        <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
+        <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
+      </tb-toggle-select>
       <div [tb-help]="helpLinkIdForWidgetType()"></div>
     </div>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index 346b321e8d..6432a3f234 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -360,18 +360,10 @@
                           [isReadOnly]="true"
                           (closeDetails)="onEditWidgetClosed()">
           <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
-            <tb-toggle-header *ngIf="tbEditWidget.hasBasicMode" (valueChange)="tbEditWidget.widgetConfigMode = $event" ignoreMdLgSize="true"
-                              appearance="fill-invert" [options]="[
-                                {
-                                   name: translate.instant('widget.basic-mode'),
-                                   value: 'basic'
-                                },
-                                {
-                                   name: translate.instant('widget.advanced-mode'),
-                                   value: 'advanced'
-                                }
-                              ]" [value]="tbEditWidget.widgetConfigMode" name="widgetConfigModeHeader" useSelectOnMdLg="false">
-            </tb-toggle-header>
+            <tb-toggle-select *ngIf="tbEditWidget.hasBasicMode" appearance="fill-invert" [(ngModel)]="tbEditWidget.widgetConfigMode">
+              <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
+              <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
+            </tb-toggle-select>
             <div [tb-help]="helpLinkIdForWidgetType()"></div>
           </div>
           <tb-edit-widget #tbEditWidget
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
index 8541610016..6d9de8e118 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
@@ -19,10 +19,10 @@
   <mat-toolbar color="primary">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
     <span fxFlex></span>
-    <tb-toggle-header *ngIf="hasAdvanced" (valueChange)="dataKeyConfigMode = $event" ignoreMdLgSize="true"
+    <tb-toggle-select *ngIf="hasAdvanced"
                       appearance="fill-invert" [options]="dataKeyConfigHeaderOptions"
-                      [value]="dataKeyConfigMode" name="dataKeyConfigModeHeader" useSelectOnMdLg="false">
-    </tb-toggle-header>
+                      [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
+    </tb-toggle-select>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
index a5a8a89004..0d9cd00000 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
@@ -22,18 +22,11 @@
       <div fxFlex fxLayout="row" fxLayoutAlign="center center" *ngIf="timeseriesKeyError">
         <mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
       </div>
-      <tb-toggle-header *ngIf="basicMode" (valueChange)="datasourcesModeChange($event)" ignoreMdLgSize="true"
-                            [options]="[
-                                {
-                                   name: translate.instant('device.device'),
-                                   value: datasourceType.device
-                                },
-                                {
-                                   name: translate.instant('entity.entity-alias'),
-                                   value: datasourceType.entity
-                                }
-                              ]" [value]="datasourcesMode" name="widgetConfigModeHeader" useSelectOnMdLg="false">
-      </tb-toggle-header>
+      <tb-toggle-select *ngIf="basicMode" [ngModel]="datasourcesMode" (ngModelChange)="datasourcesModeChange($event)"
+                        [ngModelOptions]="{ standalone: true }">
+        <tb-toggle-option [value]="datasourceType.device">{{ 'device.device' | translate }}</tb-toggle-option>
+        <tb-toggle-option [value]="datasourceType.entity">{{ 'entity.entity-alias' | translate }}</tb-toggle-option>
+      </tb-toggle-select>
     </div>
     <div *ngIf="maxDatasources > 1"
          class="tb-widget-config-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: maxDatasources} }}</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
index 985db7d942..5367f03b1f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
@@ -18,13 +18,10 @@
 <div [formGroup]="timewindowConfig" class="tb-widget-config-panel">
   <div fxLayout="row" fxLayoutAlign="space-between center">
     <div class="tb-widget-config-panel-title" translate>timewindow.timewindow</div>
-    <tb-toggle-header (valueChange)="timewindowConfig.get('useDashboardTimewindow').patchValue($event)" ignoreMdLgSize="true"
-                      [options]="[
-                                         { name: translate.instant('widget-config.use-dashboard-timewindow'), value: true},
-                                         { name: translate.instant('widget-config.use-widget-timewindow'), value: false}
-                                       ]"
-                      [value]="timewindowConfig.get('useDashboardTimewindow').value" name="useDashboardTimewindow" useSelectOnMdLg="false">
-    </tb-toggle-header>
+    <tb-toggle-select formControlName="useDashboardTimewindow">
+      <tb-toggle-option [value]="true">{{ 'widget-config.use-dashboard-timewindow' | translate }}</tb-toggle-option>
+      <tb-toggle-option [value]="false">{{ 'widget-config.use-widget-timewindow' | translate }}</tb-toggle-option>
+    </tb-toggle-select>
   </div>
   <div class="tb-widget-config-row">
     <tb-timewindow asButton="true"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
index 17ede099dc..9a575b001a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
@@ -111,21 +111,10 @@
           </ng-template>
           <div [innerHTML]="'widgets.getting-started.tenant-admin.step2.content-before' | translate | safe: 'html'"></div>
           <div class="tb-bordered-content">
-            <tb-toggle-header #publishCommandSteps value="ubuntu" name="publishCommandSteps" useSelectOnMdLg="false"
-                              [options]="[
-                                {
-                                  name: 'Ubuntu',
-                                  value: 'ubuntu'
-                                },
-                                {
-                                  name: 'MacOS',
-                                  value: 'macos'
-                                },
-                                {
-                                  name: 'Windows',
-                                  value: 'windows'
-                                }
-                              ]">
+            <tb-toggle-header #publishCommandSteps value="ubuntu" name="publishCommandSteps" useSelectOnMdLg="false">
+              <tb-toggle-option value="ubuntu">Ubuntu</tb-toggle-option>
+              <tb-toggle-option value="macos">MacOS</tb-toggle-option>
+              <tb-toggle-option value="windows">Windows</tb-toggle-option>
             </tb-toggle-header>
             <ng-container [ngSwitch]="publishCommandSteps.value">
               <ng-template [ngSwitchCase]="'ubuntu'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
index ba7614934d..b2a085b917 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
@@ -20,16 +20,9 @@
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/dashboards">{{ 'widgets.recent-dashboards.title' | translate }}</a>
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-md="space-between center" fxLayoutGap="8px">
-        <tb-toggle-header #dashboardsToggle [value]="toggleValue" name="usageToggle" (valueChange)="toggleValueChange($event)" [options]="[
-          {
-            name: ctx.translate.instant('widgets.recent-dashboards.last'),
-            value: 'last'
-          },
-          {
-            name: ctx.translate.instant('widgets.recent-dashboards.starred'),
-            value: 'starred'
-          }
-        ]">
+        <tb-toggle-header #dashboardsToggle [value]="toggleValue" name="usageToggle" (valueChange)="toggleValueChange($event)">
+          <tb-toggle-option value="last">{{ 'widgets.recent-dashboards.last' | translate }}</tb-toggle-option>
+          <tb-toggle-option value="starred">{{ 'widgets.recent-dashboards.starred' | translate }}</tb-toggle-option>
         </tb-toggle-header>
         <a *ngIf="authUser.authority === authority.TENANT_ADMIN" fxHide.md
            mat-flat-button color="primary" routerLink="/dashboards" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
index a0beeacdb2..61e7c448b4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
@@ -19,16 +19,9 @@
   <ng-container *ngIf="hasUsageInfoAccess; else noDataAvailable">
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/usage">{{ 'widgets.usage-info.title' | translate }}</a>
-      <tb-toggle-header #usageToggle [value]="toggleValue" name="usageToggle" [options]="[
-        {
-          name: ctx.translate.instant('widgets.usage-info.entities'),
-          value: 'entities'
-        },
-        {
-          name: ctx.translate.instant('widgets.usage-info.api-calls'),
-          value: 'apiCalls'
-        }
-      ]">
+      <tb-toggle-header #usageToggle [value]="toggleValue" name="usageToggle">
+        <tb-toggle-option value="entities">{{ 'widgets.usage-info.entities' | translate }}</tb-toggle-option>
+        <tb-toggle-option value="apiCalls">{{ 'widgets.usage-info.api-calls' | translate }}</tb-toggle-option>
       </tb-toggle-header>
     </div>
     <ng-container [ngSwitch]="usageToggle.value">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts
index d91baebb53..af32954e62 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts
@@ -33,7 +33,7 @@ export interface LabelWidgetLabel {
 @Component({
   selector: 'tb-label-widget-label',
   templateUrl: './label-widget-label.component.html',
-  styleUrls: ['./label-widget-label.component.scss', './../widget-settings.scss'],
+  styleUrls: ['./label-widget-label.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
index 61f1587306..bd5d69a594 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
@@ -15,34 +15,37 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="flotLatestKeySettingsForm" fxLayout="column">
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.chart.threshold-settings</legend>
-    <mat-expansion-panel class="tb-settings" [expanded]="flotLatestKeySettingsForm.get('useAsThreshold').value">
+<ng-container [formGroup]="flotLatestKeySettingsForm">
+  <div class="tb-widget-config-panel tb-slide-toggle">
+    <div class="tb-widget-config-panel-title" translate>widgets.chart.threshold-settings</div>
+    <mat-expansion-panel class="tb-settings" [expanded]="flotLatestKeySettingsForm.get('useAsThreshold').value"
+                         [disabled]="!flotLatestKeySettingsForm.get('useAsThreshold').value">
       <mat-expansion-panel-header fxLayout="row wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="useAsThreshold" (click)="$event.stopPropagation()"
+          <mat-slide-toggle class="mat-slide" formControlName="useAsThreshold" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.chart.use-as-threshold' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
-          widget-config.advanced-settings
-        </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>widgets.chart.threshold-line-width</mat-label>
-            <input type="number" min="0" matInput formControlName="thresholdLineWidth">
+        <div class="tb-widget-config-row space-between">
+          <div translate>widgets.chart.threshold-line-width</div>
+          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+            <input matInput formControlName="thresholdLineWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
+            <span matSuffix>px</span>
           </mat-form-field>
-          <tb-color-input fxFlex
-                          formControlName="thresholdColor"
-                          icon="format_color_fill"
-                          label="{{ 'widgets.chart.threshold-color' | translate }}" openOnInput colorClearButton>
-          </tb-color-input>
-        </section>
+        </div>
+        <div class="tb-widget-config-row space-between same-padding">
+          <div>{{ 'widgets.chart.threshold-color' | translate }}</div>
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+            <mat-divider vertical></mat-divider>
+            <tb-color-input asBoxInput
+                            formControlName="thresholdColor">
+            </tb-color-input>
+          </div>
+        </div>
       </ng-template>
     </mat-expansion-panel>
-  </fieldset>
-</section>
+  </div>
+</ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.ts
index 9baad9677c..8bd92dca8a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.ts
@@ -50,7 +50,7 @@ export function fixedColorLevelValidator(control: AbstractControl): ValidationEr
 @Component({
   selector: 'tb-fixed-color-level',
   templateUrl: './fixed-color-level.component.html',
-  styleUrls: ['./fixed-color-level.component.scss', './../widget-settings.scss'],
+  styleUrls: ['./fixed-color-level.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts
index 33f44f0111..e5c1ec9fbc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts
@@ -31,7 +31,7 @@ export interface GaugeHighlight {
 @Component({
   selector: 'tb-gauge-highlight',
   templateUrl: './gauge-highlight.component.html',
-  styleUrls: ['./gauge-highlight.component.scss', './../widget-settings.scss'],
+  styleUrls: ['./gauge-highlight.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.ts
index ef334d6ee2..51665a3afa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.ts
@@ -27,7 +27,7 @@ import { IAliasController } from '@core/api/widget-api.models';
 @Component({
   selector: 'tb-tick-value',
   templateUrl: './tick-value.component.html',
-  styleUrls: ['./tick-value.component.scss', './../widget-settings.scss'],
+  styleUrls: ['./tick-value.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.ts
index d6e6d675ad..636fd9f0fe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.ts
@@ -56,7 +56,7 @@ export const gpioItemValidator = (hasColor: boolean): ValidatorFn => (control: A
 @Component({
   selector: 'tb-gpio-item',
   templateUrl: './gpio-item.component.html',
-  styleUrls: ['./gpio-item.component.scss', './../widget-settings.scss'],
+  styleUrls: ['./gpio-item.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.ts
index a546537bf7..1d304aef64 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.ts
@@ -46,7 +46,7 @@ export const dataKeySelectOptionValidator = (control: AbstractControl) => {
 @Component({
   selector: 'tb-datakey-select-option',
   templateUrl: './datakey-select-option.component.html',
-  styleUrls: ['./datakey-select-option.component.scss', './../widget-settings.scss'],
+  styleUrls: ['./datakey-select-option.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 144d29b8b0..5cddfd4639 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -17,9 +17,9 @@
 -->
 <div class="tb-widget-config tb-absolute-fill">
   <div class="tb-widget-config-header" *ngIf="!hideHeader">
-    <tb-toggle-header *ngIf="!hideToggleHeader && widgetConfigMode === widgetConfigModes.advanced" (valueChange)="selectedOption = $event" ignoreMdLgSize="true"
-                      appearance="fill" [options]="headerOptions" [value]="selectedOption" name="widgetConfigHeader" useSelectOnMdLg="false">
-    </tb-toggle-header>
+    <tb-toggle-select *ngIf="!hideToggleHeader && widgetConfigMode === widgetConfigModes.advanced"
+                      appearance="fill" [options]="headerOptions" [(ngModel)]="selectedOption">
+    </tb-toggle-select>
     <ng-content select=".tb-widget-config-header-prefix"></ng-content>
     <ng-content select=".tb-widget-config-header-suffix"></ng-content>
   </div>
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/tenant_admin_home_page.raw b/ui-ngx/src/app/modules/home/pages/home-links/tenant_admin_home_page.raw
index 9205fddf71..6f9215b4f9 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/tenant_admin_home_page.raw
+++ b/ui-ngx/src/app/modules/home/pages/home-links/tenant_admin_home_page.raw
@@ -48,7 +48,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between start\" fxLayout.lt-md=\"column\" fxLayoutGap.lt-md=\"12px\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.activity.title' | translate }}</div>\n        <tb-toggle-header #activityStates value=\"devices\" name=\"activityStates\"\n            [options]=\"[\n                {\n                    name: ctx.translate.instant('device.devices'),\n                    value: 'devices'\n                },\n                {\n                    name: ctx.translate.instant('widgets.transport-messages.title'),\n                    value: 'transportMessages'\n                }\n            ]\">\n        </tb-toggle-header>\n    </div>\n    <ng-container [ngSwitch]=\"activityStates.value\">\n        <ng-template [ngSwitchCase]=\"'devices'\">\n            <tb-dashboard-state fxFlex stateId=\"devices_activity\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n        <ng-template [ngSwitchCase]=\"'transportMessages'\">\n            <tb-dashboard-state fxFlex stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n    </ng-container>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between start\" fxLayout.lt-md=\"column\" fxLayoutGap.lt-md=\"12px\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.activity.title' | translate }}</div>\n        <tb-toggle-header #activityStates value=\"devices\" name=\"activityStates\">\n     <tb-toggle-option value=\"devices\">{{ 'device.devices' | translate }}</tb-toggle-option>\n        <tb-toggle-option value=\"transportMessages\">{{ 'widgets.transport-messages.title' | translate }}</tb-toggle-option>\n        </tb-toggle-header>\n    </div>\n    <ng-container [ngSwitch]=\"activityStates.value\">\n        <ng-template [ngSwitchCase]=\"'devices'\">\n            <tb-dashboard-state fxFlex stateId=\"devices_activity\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n        <ng-template [ngSwitchCase]=\"'transportMessages'\">\n            <tb-dashboard-state fxFlex stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n    </ng-container>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n"
           },
@@ -1101,4 +1101,4 @@
   },
   "externalId": null,
   "name": "Tenant Administrator Home Page"
-}
\ No newline at end of file
+}
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts
index a7f37f53a4..15c82f6470 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.ts
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.ts
@@ -16,29 +16,26 @@
 
 import {
   AfterContentInit,
-  AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ContentChildren, EventEmitter,
+  ContentChildren,
+  Directive,
+  ElementRef,
+  EventEmitter,
   Input,
-  OnInit, Output,
-  QueryList,
-  ViewChild
+  OnDestroy,
+  OnInit,
+  Output,
+  QueryList
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { AdminService } from '@core/http/admin.service';
-import { UpdateMessage } from '@shared/models/settings.models';
-import { getCurrentAuthUser } from '@core/auth/auth.selectors';
-import { Authority } from '@shared/models/authority.enum';
-import { of, Subscription } from 'rxjs';
-import { MatStepper } from '@angular/material/stepper';
-import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';
+import { Subject, Subscription } from 'rxjs';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { coerceBoolean } from '@shared/decorators/coercion';
-import { BreadCrumb } from '@shared/components/breadcrumb';
+import { startWith, takeUntil } from 'rxjs/operators';
 
 export interface ToggleHeaderOption {
   name: string;
@@ -47,12 +44,72 @@ export interface ToggleHeaderOption {
 
 export type ToggleHeaderAppearance = 'fill' | 'fill-invert' | 'stroked';
 
+@Directive(
+  {
+    // eslint-disable-next-line @angular-eslint/directive-selector
+    selector: 'tb-toggle-option',
+  }
+)
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export class ToggleOption {
+
+  @Input() value: any;
+
+  get viewValue(): string {
+    return (this._element?.nativeElement.textContent || '').trim();
+  }
+
+  constructor(
+    private _element: ElementRef<HTMLElement>
+  ) {}
+}
+
+@Directive()
+export abstract class _ToggleBase extends PageComponent implements AfterContentInit, OnDestroy {
+
+  @ContentChildren(ToggleOption) toggleOptions: QueryList<ToggleOption>;
+
+  @Input()
+  options: ToggleHeaderOption[] = [];
+
+  private _destroyed = new Subject<void>();
+
+  protected constructor(protected store: Store<AppState>) {
+    super(store);
+  }
+
+  ngAfterContentInit(): void {
+    this.toggleOptions.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
+      this.syncToggleHeaderOptions();
+    });
+  }
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
+
+  private syncToggleHeaderOptions() {
+    if (this.toggleOptions?.length) {
+      this.options.length = 0;
+      this.toggleOptions.forEach(option => {
+        this.options.push(
+          { name: option.viewValue,
+            value: option.value
+          }
+        );
+      });
+    }
+  }
+
+}
+
 @Component({
   selector: 'tb-toggle-header',
   templateUrl: './toggle-header.component.html',
   styleUrls: ['./toggle-header.component.scss']
 })
-export class ToggleHeaderComponent extends PageComponent implements OnInit {
+export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterContentInit, OnDestroy {
 
   @Input()
   value: any;
@@ -60,9 +117,6 @@ export class ToggleHeaderComponent extends PageComponent implements OnInit {
   @Output()
   valueChange = new EventEmitter<any>();
 
-  @Input()
-  options: ToggleHeaderOption[];
-
   @Input()
   name: string;
 
diff --git a/ui-ngx/src/app/shared/components/toggle-select.component.html b/ui-ngx/src/app/shared/components/toggle-select.component.html
index 54c845b35b..20ef606288 100644
--- a/ui-ngx/src/app/shared/components/toggle-select.component.html
+++ b/ui-ngx/src/app/shared/components/toggle-select.component.html
@@ -18,6 +18,7 @@
 <tb-toggle-header
   ignoreMdLgSize="true"
   useSelectOnMdLg="false"
+  [appearance]="appearance"
   [options]="options"
   [value]="modelValue"
   (valueChange)="updateModel($event)">
diff --git a/ui-ngx/src/app/shared/components/toggle-select.component.ts b/ui-ngx/src/app/shared/components/toggle-select.component.ts
index 3e9d74f3fa..7fd94485f8 100644
--- a/ui-ngx/src/app/shared/components/toggle-select.component.ts
+++ b/ui-ngx/src/app/shared/components/toggle-select.component.ts
@@ -14,45 +14,11 @@
 /// limitations under the License.
 ///
 
-import {
-  AfterContentInit,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  Directive,
-  ElementRef,
-  forwardRef,
-  Input,
-  OnDestroy,
-  QueryList
-} from '@angular/core';
-import { PageComponent } from '@shared/components/page.component';
+import { Component, forwardRef, Input } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { startWith, takeUntil } from 'rxjs/operators';
-import { ToggleHeaderOption } from '@shared/components/toggle-header.component';
-
-@Directive(
-  {
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: 'tb-toggle-option',
-  }
-)
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class ToggleSelectOption {
-
-  @Input() value: any;
-
-  get viewValue(): string {
-    return (this._element?.nativeElement.textContent || '').trim();
-  }
-
-  constructor(
-    private _element: ElementRef<HTMLElement>
-  ) {}
-}
+import { _ToggleBase, ToggleHeaderAppearance } from '@shared/components/toggle-header.component';
 
 @Component({
   selector: 'tb-toggle-select',
@@ -66,37 +32,22 @@ export class ToggleSelectOption {
     }
   ]
 })
-export class ToggleSelectComponent extends PageComponent implements AfterContentInit, OnDestroy, ControlValueAccessor {
-
-  @ContentChildren(ToggleSelectOption) toggleSelectOptions: QueryList<ToggleSelectOption>;
+export class ToggleSelectComponent extends _ToggleBase implements ControlValueAccessor {
 
   @Input()
   disabled: boolean;
 
-  options: ToggleHeaderOption[] = [];
-
-  private _destroyed = new Subject<void>();
+  @Input()
+  appearance: ToggleHeaderAppearance = 'stroked';
 
   modelValue: any;
 
   private propagateChange = null;
 
-  constructor(protected store: Store<AppState>,
-              private cd: ChangeDetectorRef) {
+  constructor(protected store: Store<AppState>) {
     super(store);
   }
 
-  ngAfterContentInit(): void {
-    this.toggleSelectOptions.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
-      this.syncToggleHeaderOptions();
-    });
-  }
-
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }
@@ -112,19 +63,6 @@ export class ToggleSelectComponent extends PageComponent implements AfterContent
     this.modelValue = value;
   }
 
-  private syncToggleHeaderOptions() {
-    this.options.length = 0;
-    if (this.toggleSelectOptions) {
-      this.toggleSelectOptions.forEach(selectOption => {
-        this.options.push(
-          { name: selectOption.viewValue,
-            value: selectOption.value
-          }
-        );
-      });
-    }
-  }
-
   updateModel(value: any) {
     this.modelValue = value;
     this.propagateChange(this.modelValue);
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 6fc9850717..cf8b271171 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -191,9 +191,9 @@ import {
 import { ColorPickerComponent } from '@shared/components/color-picker/color-picker.component';
 import { ResourceAutocompleteComponent } from '@shared/components/resource/resource-autocomplete.component';
 import { ShortNumberPipe } from '@shared/pipe/short-number.pipe';
-import { ToggleHeaderComponent } from '@shared/components/toggle-header.component';
+import { ToggleHeaderComponent, ToggleOption } from '@shared/components/toggle-header.component';
 import { RuleChainSelectComponent } from '@shared/components/rule-chain/rule-chain-select.component';
-import { ToggleSelectComponent, ToggleSelectOption } from '@shared/components/toggle-select.component';
+import { ToggleSelectComponent } from '@shared/components/toggle-select.component';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -365,7 +365,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     ColorPickerComponent,
     ResourceAutocompleteComponent,
     ToggleHeaderComponent,
-    ToggleSelectOption,
+    ToggleOption,
     ToggleSelectComponent,
     RuleChainSelectComponent
   ],
@@ -595,7 +595,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     ColorPickerComponent,
     ResourceAutocompleteComponent,
     ToggleHeaderComponent,
-    ToggleSelectOption,
+    ToggleOption,
     ToggleSelectComponent,
     RuleChainSelectComponent
   ]