From ae8c44d54ae4c64cc326d04ff667c5cb5f9a1e93 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 24 Feb 2023 19:25:19 +0200
Subject: [PATCH] UI: Angular 15 migration

---
 ui-ngx/src/app/modules/common/modules-map.ts  |   2 -
 .../alarm/alarm-table-header.component.scss   |  26 --
 .../alias/entity-alias-select.component.scss  |   8 -
 ...-widget-to-dashboard-dialog.component.scss |  25 +-
 .../attribute/attribute-table.component.html  |   2 +-
 .../attribute/attribute-table.component.scss  |  26 +-
 .../edit-attribute-value-panel.component.html |   2 +-
 .../add-widget-dialog.component.html          |   2 +-
 .../dashboard-settings-dialog.component.scss  |   5 -
 .../dashboard-toolbar.component.scss          |  30 --
 .../components/dashboard/layout-button.scss   |  13 -
 .../edge-downlink-table-header.component.scss |  24 --
 .../event/event-table-header.component.scss   |  25 --
 .../data-key-config-dialog.component.html     |   2 +-
 .../widget/data-key-config.component.scss     |  13 +-
 .../widget/data-keys.component.html           | 136 +++++----
 .../widget/data-keys.component.scss           | 143 +++++----
 .../components/widget/data-keys.component.ts  |  55 +++-
 .../alarms-table-key-settings.component.html  |   8 +-
 ...larms-table-widget-settings.component.html |  12 +-
 ...entities-table-key-settings.component.html |   8 +-
 ...ities-table-widget-settings.component.html |   8 +-
 .../cards/label-widget-label.component.html   |   2 +-
 ...eries-table-widget-settings.component.html |   6 +-
 ...ghnut-chart-widget-settings.component.html |   2 +-
 .../chart/flot-key-settings.component.html    |  18 +-
 .../flot-pie-key-settings.component.html      |   6 +-
 .../flot-pie-widget-settings.component.html   |   4 +-
 .../chart/flot-widget-settings.component.html |  12 +-
 .../common/widget-font.component.html         |   4 +-
 ...nob-control-widget-settings.component.html |   2 +-
 ...d-indicator-widget-settings.component.html |   2 +-
 ...stent-table-widget-settings.component.html |   6 +-
 .../send-rpc-widget-settings.component.html   |   4 +-
 ...lide-toggle-widget-settings.component.html |   2 +-
 .../switch-rpc-settings.component.html        |   2 +-
 ...e-navigator-widget-settings.component.html |   6 +-
 ...gue-compass-widget-settings.component.html |   4 +-
 ...logue-gauge-widget-settings.component.html |   6 +-
 ...gital-gauge-widget-settings.component.html |   4 +-
 .../gauge/gauge-highlight.component.html      |   2 +-
 .../settings/gpio/gpio-item.component.html    |  11 +-
 .../lib/settings/gpio/gpio-item.component.ts  |  45 ++-
 .../datakey-select-option.component.html      |   5 +-
 .../input/datakey-select-option.component.ts  |  13 +-
 ...n-attribute-widget-settings.component.html |   2 +-
 ...e-attribute-widget-settings.component.html |   2 +-
 ...r-attribute-widget-settings.component.html |   2 +-
 ...n-attribute-widget-settings.component.html |   2 +-
 ...n-attribute-widget-settings.component.html |   8 +-
 ...ple-attributes-key-settings.component.html |   4 +-
 ...-attributes-widget-settings.component.html |   2 +-
 ...g-attribute-widget-settings.component.html |   2 +-
 .../map/circle-settings.component.html        |   4 +-
 .../map/map-editor-settings.component.html    |   4 +-
 .../marker-clustering-settings.component.html |  10 +-
 .../map/markers-settings.component.html       |   6 +-
 .../map/polygon-settings.component.html       |   4 +-
 ...rip-animation-path-settings.component.html |   4 +-
 ...ip-animation-point-settings.component.html |   2 +-
 .../widget/lib/settings/widget-settings.scss  |  43 +--
 .../components/color-input.component.html     |   4 +-
 .../components/color-input.component.scss     |  15 +-
 .../mat-chip-draggable.directive.ts           | 274 ------------------
 .../multiple-image-input.component.scss       |  12 +-
 ui-ngx/src/app/shared/shared.module.ts        |   3 -
 ui-ngx/src/styles.scss                        |  58 +---
 ui-ngx/src/theme.scss                         |  16 -
 68 files changed, 357 insertions(+), 869 deletions(-)
 delete mode 100644 ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts

diff --git a/ui-ngx/src/app/modules/common/modules-map.ts b/ui-ngx/src/app/modules/common/modules-map.ts
index 364fb06365..3f0537dfac 100644
--- a/ui-ngx/src/app/modules/common/modules-map.ts
+++ b/ui-ngx/src/app/modules/common/modules-map.ts
@@ -98,7 +98,6 @@ import * as LogoComponent from '@shared/components/logo.component';
 import * as FooterFabButtonsComponent from '@shared/components/footer-fab-buttons.component';
 import * as FullscreenDirective from '@shared/components/fullscreen.directive';
 import * as CircularProgressDirective from '@shared/components/circular-progress.directive';
-import * as MatChipDraggableDirective from '@shared/components/mat-chip-draggable.directive';
 import * as TbHotkeysDirective from '@shared/components/hotkeys.directive';
 import * as TbAnchorComponent from '@shared/components/tb-anchor.component';
 import * as TbPopoverComponent from '@shared/components/popover.component';
@@ -387,7 +386,6 @@ class ModulesMap implements IModulesMap {
     '@shared/components/footer-fab-buttons.component': FooterFabButtonsComponent,
     '@shared/components/fullscreen.directive': FullscreenDirective,
     '@shared/components/circular-progress.directive': CircularProgressDirective,
-    '@shared/components/mat-chip-draggable.directive': MatChipDraggableDirective,
     '@shared/components/hotkeys.directive': TbHotkeysDirective,
     '@shared/components/tb-anchor.component': TbAnchorComponent,
     '@shared/components/popover.component': TbPopoverComponent,
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss
index b2477cce9e..177ae129eb 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss
@@ -22,29 +22,3 @@
   padding-right: 8px;
   min-width: 160px;
 }
-
-:host ::ng-deep {
-  mat-form-field {
-    font-size: 16px;
-    width: 200px;
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.scss b/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.scss
index a402199640..66df772d2d 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.scss
@@ -16,11 +16,3 @@
 :host {
 
 }
-
-:host ::ng-deep {
-  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-  .mat-form-field-infix {
-    border-top: none;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.scss b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.scss
index 420a919c4e..c31047722f 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.scss
@@ -13,28 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host ::ng-deep {
-  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.
- */
-  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.
- */
-  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.
- */
-  mat-radio-button {
-    display: block;
-    margin-bottom: 16px;
-    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.
- */
-    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.
- */
-    .mat-radio-label {
-      width: 100%;
-      align-items: start;
-      /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.
- */
-      .mat-radio-label-content {
-        width: 100%;
-      }
-    }
-  }
+:host {
 }
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index f43bde0ced..900ea6d56c 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -170,7 +170,7 @@
                     class="tb-value-cell"
                     (click)="editAttribute($event, attribute)">
             <div fxLayout="row" style="align-items: center">
-              <span fxFlex>{{attribute.value | tbJson}}</span>
+              <span style="overflow: hidden;text-overflow: ellipsis;" fxFlex>{{attribute.value | tbJson}}</span>
               <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
                 <mat-icon>edit</mat-icon>
               </span>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
index bad464f689..7d4caace8f 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
@@ -42,6 +42,9 @@
 
       .table-container {
         overflow: auto;
+        .mat-mdc-table {
+          table-layout: fixed;
+        }
       }
 
       .tb-entity-table-info{
@@ -75,29 +78,6 @@
   .mat-sort-header-sorted .mat-sort-header-arrow {
     opacity: 1 !important;
   }
-  mat-form-field.tb-attribute-scope {
-    font-size: 16px;
-    width: 200px;
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
   mat-cell.tb-value-cell {
     cursor: pointer;
     mat-icon {
diff --git a/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
index b3e2130d93..9cefd62825 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form class="mat-elevation-z1"
-      [formGroup]="attributeFormGroup" (ngSubmit)="update()" style="width: 400px; padding: 5px;">
+      [formGroup]="attributeFormGroup" (ngSubmit)="update()" style="padding: 5px;">
   <fieldset [disabled]="isLoading$ | async">
     <tb-value-input
       formControlName="value"
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 e52bc5d9df..22bb497c12 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
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="widgetFormGroup" (ngSubmit)="add()" style="width: 900px;">
+<form [formGroup]="widgetFormGroup" (ngSubmit)="add()" style="width: 1200px;">
   <mat-toolbar color="primary">
     <h2 translate>widget.add</h2>
     <span fxFlex>: {{data.widgetInfo.widgetName}}</span>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.scss
index e0b0bf0aaa..109aa29868 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.scss
@@ -27,11 +27,6 @@
 }
 
 :host ::ng-deep {
-  /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-  .mat-slide-toggle-content {
-    white-space: normal;
-  }
   .mat-expansion-panel {
     &.tb-settings {
       box-shadow: none;
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.scss
index 04dffd647f..9efdc87859 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.scss
@@ -151,14 +151,6 @@ tb-dashboard-toolbar {
                 min-width: 0;
                 height: $half-mobile-toolbar-height;
 
-                @media #{$mat-lt-md} {
-                  /*TODO(mdc-migration): The following rule targets internal classes of menu that may no longer apply for the MDC version.
- */
-                  mat-menu{
-                    margin: 0;
-                  }
-                }
-
                 @media #{$mat-gt-sm} {
                   height: 46px;
                 }
@@ -170,32 +162,10 @@ tb-dashboard-toolbar {
                     height: 46px;
                   }
                 }
-                /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
- */
-                mat-select {
-                  margin: 0;
-                  pointer-events: all;
-                }
 
                 tb-states-component {
                   pointer-events: all;
                 }
-
-                button.mat-mdc-icon-button:not(.tb-mat-32) {
-                  min-width: 40px;
-
-                  @media #{$mat-lt-md} {
-                    min-width: 28px;
-                    padding: 2px;
-                    margin: 0;
-                    /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-                    .mat-button-wrapper {
-                      display: block;
-                      line-height: 24px;
-                    }
-                  }
-                }
               }
             }
           }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
index 8513d5ebbd..b3275a85c6 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
@@ -29,17 +29,4 @@
       border-radius: 5px 0 0 5px;
     }
   }
-
-  &::ng-deep {
-    /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-    .mat-button-wrapper {
-      line-height: 18px;
-      span {
-        font-size: 18px;
-        font-weight: 400;
-        white-space: normal;
-      }
-    }
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/edge/edge-downlink-table-header.component.scss b/ui-ngx/src/app/modules/home/components/edge/edge-downlink-table-header.component.scss
index cbd386efd2..f68261d6ae 100644
--- a/ui-ngx/src/app/modules/home/components/edge/edge-downlink-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/components/edge/edge-downlink-table-header.component.scss
@@ -18,27 +18,3 @@
 :host {
   padding-right: 8px;
 }
-
-:host ::ng-deep {
-  mat-form-field {
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss b/ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss
index 72c0701882..ed6e98c676 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss
@@ -23,28 +23,3 @@
   min-width: 160px;
 }
 
-:host ::ng-deep {
-  mat-form-field {
-    font-size: 16px;
-    width: 200px;
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html
index 06b2bcd53b..01b928e354 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="width: 700px;">
+<form [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
index a8c1a98fc0..f0e7f857a3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
@@ -69,12 +69,8 @@
 
 :host ::ng-deep {
   .tb-datakey-config {
-    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.
- */
-    .mat-mdc-tab-body.mat-tab-body-active {
-      /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.
- */
-      .mat-tab-body-content > div {
+    .mat-mdc-tab-body.mat-mdc-tab-body-active {
+      .mat-mdc-tab-body-content > div {
         height: calc(65vh - 50px);
         overflow: initial;
         @media #{$mat-xs} {
@@ -128,10 +124,5 @@
     .mat-slide {
       margin: 8px 0;
     }
-    /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-    .mat-slide-toggle-content {
-      white-space: normal;
-    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
index e0885ad479..7d20055f6e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
@@ -16,66 +16,88 @@
 
 -->
 <mat-form-field [formGroup]="keysListFormGroup" class="mat-block tb-chip-list">
-  <mat-chip-grid #chipList formControlName="keys" tb-chip-draggable (chipDrop)="onChipDrop($event)">
-    <mat-chip-row class="tb-datakey-chip"
-      *ngFor="let key of keys; let $index = index"
-      [removable]="!disabled && !isEntityCountDatasource"
-      (removed)="remove(key)">
-      <div fxLayout="row" fxLayoutAlign="start center" class="tb-attribute-chip">
-        <div *ngIf="!disabled" class="tb-chip-drag-handle" style="margin-right: 5px;">
-          <mat-icon class="tb-mat-20">drag_handle</mat-icon>
-        </div>
-        <div class="tb-color-preview" (click)="showColorPicker(key)" style="margin-right: 5px;">
-          <div class="tb-color-result" [ngStyle]="{background: key.color}"></div>
-        </div>
-        <div class="tb-chip-labels">
-          <div class="tb-chip-label">
-            <ng-container *ngIf="datasourceType === datasourceTypes.entity">
-              <mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.alarm"
-                        matTooltip="{{'datakey.alarm' | translate }}"
-                        matTooltipPosition="above">notifications</mat-icon>
-              <mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.attribute"
-                        matTooltip="{{'datakey.attributes' | translate }}"
-                        matTooltipPosition="above" svgIcon="mdi:alpha-a-circle-outline"></mat-icon>
-              <mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.entityField"
-                        matTooltip="{{'datakey.entity-field' | translate }}"
-                        matTooltipPosition="above" svgIcon="mdi:alpha-e-circle-outline"></mat-icon>
-              <mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.timeseries"
-                        matTooltip="{{'datakey.timeseries' | translate }}"
-                        matTooltipPosition="above">timeline</mat-icon>
-            </ng-container>
-            {{key.label}}
+  <mat-chip-grid #chipList formControlName="keys">
+    <div class="tb-datakeys-container"
+         [dndDropzone]="[dndId]"
+         [dndHorizontal]="true"
+         dndEffectAllowed="move"
+         dndAllowExternal="false"
+         [dndDisableIf]="disabled"
+         (dndDrop)="onChipDrop($event)">
+      <mat-chip-row #placeholderChipRow
+                    dndPlaceholderRef
+                    class="tb-datakey-chip tb-datakey-chip-dnd-placeholder">
+      </mat-chip-row>
+      <mat-chip-row #chipRow *ngFor="let key of keys; let $index = index"
+                    class="tb-datakey-chip"
+                    (dndStart)="chipDragStart($index, chipRow, placeholderChipRow)"
+                    (dndEnd)="chipDragEnd()"
+                    [dndDraggable]="key"
+                    [dndDisableIf]="disabled"
+                    dndType="{{ dndId }}"
+                    dndEffectAllowed="move"
+                    dndDraggingSourceClass="tb-chip-dragging"
+                    [removable]="!disabled && !isEntityCountDatasource"
+                    (removed)="remove(key)">
+        <div dndDragImageRef fxLayout="row" fxLayoutAlign="start center" class="tb-attribute-chip"
+             [ngClass]="{'tb-dragging-chip-image': $index === dragIndex}">
+          <div class="tb-absolute-fill tb-dragging-chip-image-fill"></div>
+          <div dndHandle *ngIf="!disabled" class="tb-chip-drag-handle" style="margin-right: 5px;">
+            <mat-icon class="tb-mat-20">drag_handle</mat-icon>
           </div>
-          <div class="tb-chip-separator">: </div>
-          <div class="tb-chip-label">
-            <strong>
-              <ng-container *ngTemplateOutlet="keyName; context:{key: key}"></ng-container>
-            </strong>
+          <div class="tb-color-preview" (click)="showColorPicker(key)" style="margin-right: 5px;">
+            <div class="tb-color-result" [ngStyle]="{background: key.color}"></div>
           </div>
+          <div class="tb-chip-labels">
+            <div class="tb-chip-label">
+              <ng-container *ngIf="datasourceType === datasourceTypes.entity">
+                <mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.alarm"
+                          matTooltip="{{'datakey.alarm' | translate }}"
+                          matTooltipPosition="above">notifications</mat-icon>
+                <mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.attribute"
+                          matTooltip="{{'datakey.attributes' | translate }}"
+                          matTooltipPosition="above" svgIcon="mdi:alpha-a-circle-outline"></mat-icon>
+                <mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.entityField"
+                          matTooltip="{{'datakey.entity-field' | translate }}"
+                          matTooltipPosition="above" svgIcon="mdi:alpha-e-circle-outline"></mat-icon>
+                <mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.timeseries"
+                          matTooltip="{{'datakey.timeseries' | translate }}"
+                          matTooltipPosition="above">timeline</mat-icon>
+              </ng-container>
+              {{key.label}}
+            </div>
+            <div class="tb-chip-separator">: </div>
+            <div class="tb-chip-label">
+              <strong>
+                <ng-container *ngTemplateOutlet="keyName; context:{key: key}"></ng-container>
+              </strong>
+            </div>
+          </div>
+          <button *ngIf="!disabled"
+                  type="button"
+                  (click)="editDataKey(key, $index)" mat-icon-button class="tb-mat-32">
+            <mat-icon class="tb-mat-20">edit</mat-icon>
+          </button>
+          <mat-icon matChipRemove *ngIf="!disabled && !isEntityCountDatasource">close</mat-icon>
         </div>
-        <button *ngIf="!disabled"
-                type="button"
-                (click)="editDataKey(key, $index)" mat-icon-button class="tb-mat-32">
-          <mat-icon class="tb-mat-20">edit</mat-icon>
-        </button>
-        <mat-icon matChipRemove *ngIf="!disabled && !isEntityCountDatasource">close</mat-icon>
-      </div>
-    </mat-chip-row>
-    <input matInput type="text" placeholder="{{ !disabled ? (keys.length ? secondaryPlaceholder : placeholder) : '' }}"
-           style="max-width: 200px;"
-           #keyInput
-           formControlName="key"
-           matAutocompleteOrigin
-           [readonly]="isEntityCountDatasource"
-           #origin="matAutocompleteOrigin"
-           [matAutocompleteConnectedTo]="origin"
-           (focusin)="onFocus()"
-           (drop)="$event.preventDefault();"
-           [matAutocomplete]="keyAutocomplete"
-           [matAutocompleteDisabled]="isEntityCountDatasource"
-           [matChipInputFor]="chipList"
-           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-           (matChipInputTokenEnd)="add($event)">
+      </mat-chip-row>
+      <input matInput type="text" placeholder="{{ !disabled ? (keys.length ? secondaryPlaceholder : placeholder) : '' }}"
+             [ngClass]="{'tb-dragging': dragIndex > -1}"
+             style="max-width: 200px;"
+             #keyInput
+             formControlName="key"
+             matAutocompleteOrigin
+             [readonly]="isEntityCountDatasource"
+             #origin="matAutocompleteOrigin"
+             [matAutocompleteConnectedTo]="origin"
+             (focusin)="onFocus()"
+             (drop)="$event.preventDefault();"
+             [matAutocomplete]="keyAutocomplete"
+             [matAutocompleteDisabled]="isEntityCountDatasource"
+             [matChipInputFor]="chipList"
+             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+             (matChipInputTokenEnd)="add($event)">
+    </div>
   </mat-chip-grid>
   <mat-autocomplete #keyAutocomplete="matAutocomplete"
                     class="tb-autocomplete"
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss
index c1dd2392f8..a0b909af1a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss
@@ -13,87 +13,108 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.mat-mdc-chip.mat-mdc-standard-chip.tb-datakey-chip {
-  overflow: hidden;
-  line-height: 20px;
 
-  .tb-attribute-chip {
-    max-width: 100%;
-    color: rgb(66, 66, 66);
-    font-weight: normal;
-    font-size: 16px;
+.tb-datakeys-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
 
-    .tb-chip-drag-handle {
-      cursor: move;
+  input.tb-dragging {
+    display: none;
+  }
 
-      mat-icon {
-        pointer-events: none;
-        margin-right: 4px;
-        margin-left: 4px;
-        vertical-align: bottom;
-      }
-    }
+  .mat-mdc-chip.mat-mdc-standard-chip.tb-datakey-chip {
+    overflow: hidden;
+    line-height: 20px;
+    height: 32px;
 
-    .tb-chip-labels {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      min-width: 0;
-      .tb-chip-label {
+    .mat-mdc-chip-action {
+      overflow: hidden;
+      .mat-mdc-chip-action-label {
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+      }
+    }
+    .tb-attribute-chip {
+      max-width: 100%;
+      color: rgb(66, 66, 66);
+      font-weight: normal;
+      font-size: 16px;
+      .tb-chip-drag-handle {
+        cursor: move;
         mat-icon {
+          pointer-events: none;
           margin-right: 4px;
           margin-left: 4px;
-          vertical-align: middle;
+          vertical-align: bottom;
         }
       }
-
-      .tb-chip-separator {
-        white-space: pre;
+      .tb-chip-labels {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-width: 0;
+        .tb-chip-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          .mat-icon.tb-datakey-icon {
+            margin-right: 4px;
+            margin-left: 4px;
+          }
+          .tb-agg-func {
+            font-style: italic;
+            color: #0c959c;
+          }
+        }
+        .tb-chip-separator {
+          white-space: pre;
+        }
+      }
+      .mat-mdc-chip-remove.mat-icon {
+        width: 24px;
+        min-width: 24px;
+        height: 24px;
+        font-size: 24px;
+        margin-right: 4px;
+        color: inherit;
+        opacity: inherit;
+        padding-left: 0;
       }
     }
 
-    .mat-mdc-chip-remove.mat-icon {
-      width: 24px;
-      height: 24px;
-      font-size: 24px;
-      margin-right: 4px;
-      color: inherit;
-      opacity: inherit;
-      padding-left: 0;
+    &.tb-datakey-chip-dnd-placeholder {
+      min-width: 120px;
+      border: 2px dashed rgba(0, 0, 0, 0.2);
+    }
+    &.tb-chip-dragging {
+      display: none;
+    }
+    .tb-dragging-chip-image-fill {
+      background-color: rgba(0,0,0,0.3);
+      border-radius: var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);
+      display: none;
+      pointer-events: none;
+    }
+    .tb-dragging-chip-image {
+      background-color: var(--mdc-chip-elevated-container-color, transparent);
+      border-radius: var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);
+      overflow: hidden;
+      height: 32px;
+      line-height: 20px;
+      .tb-dragging-chip-image-fill {
+        display: block;
+      }
     }
   }
 }
 
-.tb-datakey-icon {
+.mat-icon.tb-datakey-icon {
   vertical-align: middle;
+  & > svg {
+    vertical-align: initial;
+  }
   &.new-key {
     margin-left: 8px;
     margin-right: 8px;
   }
 }
-
-::ng-deep {
-  .mat-icon.tb-datakey-icon > svg {
-    vertical-align: initial;
-  }
-}
-
-:host ::ng-deep {
-  .tb-chip-label {
-    .tb-agg-func {
-      font-style: italic;
-      color: #0c959c;
-    }
-  }
-  .tb-datakey-chip {
-    .mat-mdc-chip-action {
-      overflow: hidden;
-      .mat-mdc-chip-action-label {
-        overflow: hidden;
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
index 03980d94d3..124200825d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
@@ -17,15 +17,18 @@
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   forwardRef,
   Input,
   OnChanges,
   OnInit,
+  Renderer2,
   SimpleChanges,
   SkipSelf,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -43,7 +46,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { MatAutocomplete } from '@angular/material/autocomplete';
-import { MatChipGrid, MatChipInputEvent } from '@angular/material/chips';
+import { MatChipGrid, MatChipInputEvent, MatChipRow } from '@angular/material/chips';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { DataKey, DatasourceType, JsonSettingsSchema, Widget, widgetType } from '@shared/models/widget.models';
@@ -59,10 +62,11 @@ import {
   DataKeyConfigDialogComponent,
   DataKeyConfigDialogData
 } from '@home/components/widget/data-key-config-dialog.component';
-import { deepClone } from '@core/utils';
-import { MatChipDropEvent } from '@app/shared/components/mat-chip-draggable.directive';
+import { deepClone, guid, isUndefined } from '@core/utils';
 import { Dashboard } from '@shared/models/dashboard.models';
 import { AggregationType } from '@shared/models/time/time.models';
+import { DndDropEvent } from 'ngx-drag-drop/lib/dnd-dropzone.directive';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'tb-data-keys',
@@ -78,7 +82,8 @@ import { AggregationType } from '@shared/models/time/time.models';
       provide: ErrorStateMatcher,
       useExisting: DataKeysComponent
     }
-  ]
+  ],
+  encapsulation: ViewEncapsulation.None
 })
 export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, ErrorStateMatcher {
 
@@ -160,6 +165,11 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
   requiredText: string;
 
   searchText = '';
+
+  dndId = guid();
+
+  dragIndex: number;
+
   private latestSearchTextResult: Array<DataKey> = null;
   private fetchObservable$: Observable<Array<DataKey>> = null;
 
@@ -174,6 +184,8 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
               private dialogs: DialogService,
               private dialog: MatDialog,
               private fb: UntypedFormBuilder,
+              private cd: ChangeDetectorRef,
+              private renderer: Renderer2,
               public truncate: TruncatePipe) {
   }
 
@@ -318,7 +330,16 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
     return originalErrorState || customErrorState;
   }
 
-  ngAfterViewInit(): void {}
+  ngAfterViewInit(): void {
+    this.chipList._chips.forEach((chip) => {
+      chip._mousedown = () => {};
+    });
+    this.chipList._chips.changes.subscribe(() => {
+      this.chipList._chips.forEach((chip) => {
+        chip._mousedown = () => {};
+      });
+    });
+  }
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
@@ -393,12 +414,24 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
     }
   }
 
-  onChipDrop(event: MatChipDropEvent) {
-    const from = event.from;
-    const to = event.to;
-    this.keys.splice(to, 0, this.keys.splice(from, 1)[0]);
+  chipDragStart(index: number, chipRow: MatChipRow, placeholderChipRow: MatChipRow) {
+    this.renderer.setStyle(placeholderChipRow._elementRef.nativeElement, 'width', chipRow._elementRef.nativeElement.offsetWidth + 'px');
+    this.dragIndex = index;
+  }
+
+  chipDragEnd() {
+    this.dragIndex = -1;
+  }
+
+  onChipDrop(event: DndDropEvent) {
+    let index = event.index;
+    if (isUndefined(index)) {
+      index = this.keys.length;
+    }
+    moveItemInArray(this.keys, this.dragIndex, index);
     this.keysListFormGroup.get('keys').setValue(this.keys);
-    this.modelValue.splice(to, 0, this.modelValue.splice(from, 1)[0]);
+    moveItemInArray(this.modelValue, this.dragIndex, index);
+    this.dragIndex = -1;
     this.propagateChange(this.modelValue);
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
index b099f760fb..a2ccedb34c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
@@ -28,13 +28,13 @@
     <legend class="group-title" translate>widgets.table.cell-style</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellStyleFunction').value">
       <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
+        <mat-panel-title fxFlex="60">
           <mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -53,13 +53,13 @@
     <legend class="group-title" translate>widgets.table.cell-content</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellContentFunction').value">
       <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
+        <mat-panel-title fxFlex="60">
           <mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
index 8bf3e5a176..f2ce2642bd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@@ -24,24 +24,24 @@
     </mat-form-field>
     <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
       <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableSelection" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableSelection">
           {{ 'widgets.table.enable-alarms-selection' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="enableSearch" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableSearch">
           {{ 'widgets.table.enable-alarms-search' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="enableSelectColumnDisplay" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableSelectColumnDisplay">
           {{ 'widgets.table.enable-select-column-display' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="enableFilter" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableFilter">
           {{ 'widgets.table.enable-alarm-filter' | translate }}
         </mat-checkbox>
       </section>
       <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableStickyHeader" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableStickyHeader">
           {{ 'widgets.table.enable-sticky-header' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="enableStickyAction" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableStickyAction">
           {{ 'widgets.table.enable-sticky-action' | translate }}
         </mat-checkbox>
       </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
index 834786dee5..d57f56cb59 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
@@ -28,13 +28,13 @@
     <legend class="group-title" translate>widgets.table.cell-style</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellStyleFunction').value">
       <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
+        <mat-panel-title fxFlex="60">
           <mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -53,13 +53,13 @@
     <legend class="group-title" translate>widgets.table.cell-content</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellContentFunction').value">
       <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
+        <mat-panel-title fxFlex="60">
           <mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
index 35c53eca6f..3091ac7bc6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
@@ -24,18 +24,18 @@
     </mat-form-field>
     <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
       <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableSearch" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableSearch">
           {{ 'widgets.table.enable-search' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="enableSelectColumnDisplay" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableSelectColumnDisplay">
           {{ 'widgets.table.enable-select-column-display' | translate }}
         </mat-checkbox>
       </section>
       <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableStickyHeader" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableStickyHeader">
           {{ 'widgets.table.enable-sticky-header' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="enableStickyAction" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableStickyAction">
           {{ 'widgets.table.enable-sticky-action' | translate }}
         </mat-checkbox>
       </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
index 13ccfc039d..ff6b2f6bdc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
@@ -47,7 +47,7 @@
         </mat-form-field>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.label-widget.label-position</legend>
-          <section class="row-fill" fxLayout="row" fxLayoutGap="8px">
+          <section fxLayout="row" fxLayoutGap="8px">
             <mat-form-field fxFlex>
               <mat-label translate>widgets.label-widget.x-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="x">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
index 02587633b0..075cb5583c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@@ -20,15 +20,15 @@
     <legend class="group-title" translate>widgets.table.common-table-settings</legend>
     <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
       <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableSearch" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableSearch">
           {{ 'widgets.table.enable-search' | translate }}
         </mat-checkbox>
       </section>
       <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableStickyHeader" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableStickyHeader">
           {{ 'widgets.table.enable-sticky-header' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="enableStickyAction" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableStickyAction">
           {{ 'widgets.table.enable-sticky-action' | translate }}
         </mat-checkbox>
       </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
index e0d89a3bf8..c1f5a26cf1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
@@ -24,7 +24,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.border-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayoutGap="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.chart.border-width</mat-label>
         <input matInput type="number" min="0" formControlName="borderWidth">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
index 54dc2f6f15..6c484fd579 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
@@ -18,16 +18,16 @@
 <section class="tb-widget-settings" [formGroup]="flotKeySettingsFormGroup" fxLayout="column">
   <fieldset class="fields-group" fxLayout="column">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
-    <mat-checkbox formControlName="hideDataByDefault" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="hideDataByDefault">
       {{ 'widgets.chart.data-is-hidden-by-default' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="disableDataHiding" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="disableDataHiding">
       {{ 'widgets.chart.disable-data-hiding' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="removeFromLegend" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="removeFromLegend">
       {{ 'widgets.chart.remove-from-legend' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="excludeFromStacking" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="excludeFromStacking">
       {{ 'widgets.chart.exclude-from-stacking' | translate }}
     </mat-checkbox>
   </fieldset>
@@ -46,12 +46,12 @@
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section class="row-fill" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <section fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>widgets.chart.line-width</mat-label>
             <input matInput type="number" min="0" formControlName="lineWidth">
           </mat-form-field>
-          <mat-checkbox fxFlex formControlName="fillLines" style="margin-bottom: 16px;">
+          <mat-checkbox fxFlex formControlName="fillLines">
             {{ 'widgets.chart.fill-line' | translate }}
           </mat-checkbox>
         </section>
@@ -74,7 +74,7 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <section fxLayout="column">
-          <section class="row-fill" fxFlex fxLayout="row" fxLayoutGap="8px">
+          <section fxFlex fxLayout="row" fxLayoutGap="8px">
             <mat-form-field fxFlex class="mat-block">
               <mat-label translate>widgets.chart.points-line-width</mat-label>
               <input matInput type="number" min="0" formControlName="showPointsLineWidth">
@@ -211,13 +211,13 @@
     <legend class="group-title" translate>widgets.chart.comparison-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value">
       <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
+        <mat-panel-title fxFlex="60">
           <mat-slide-toggle formControlName="showValuesForComparison" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.chart.show-values-for-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
index 6b2779ac58..0951ad6b8a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
@@ -18,13 +18,13 @@
 <section class="tb-widget-settings" [formGroup]="flotPieKeySettingsForm" fxLayout="column">
   <fieldset class="fields-group" fxLayout="column">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
-    <mat-checkbox formControlName="hideDataByDefault" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="hideDataByDefault">
       {{ 'widgets.chart.data-is-hidden-by-default' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="disableDataHiding" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="disableDataHiding">
       {{ 'widgets.chart.disable-data-hiding' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="removeFromLegend" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="removeFromLegend">
       {{ 'widgets.chart.remove-from-legend' | translate }}
     </mat-checkbox>
   </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
index a24eb0c8d6..e860995acf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="flotPieWidgetSettingsForm" fxLayout="column">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-pie-settings</legend>
-    <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.chart.radius</mat-label>
         <input matInput type="number" min="0" formControlName="radius">
@@ -41,7 +41,7 @@
   </fieldset>
   <fieldset class="fields-group" formGroupName="stroke">
     <legend class="group-title" translate>widgets.chart.stroke-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayoutGap="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.chart.width-pixels</mat-label>
         <input matInput type="number" min="0" formControlName="width">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
index 40ced1b8b0..4c83594e44 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="flotSettingsFormGroup" fxLayout="column">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
-    <mat-checkbox formControlName="stack" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="stack">
       {{ 'widgets.chart.enable-stacking-mode' | translate }}
     </mat-checkbox>
     <section *ngIf="chartType === 'graph'" fxLayout="column" fxLayout.gt-xs="row"
@@ -27,7 +27,7 @@
         <mat-label translate>widgets.chart.line-shadow-size</mat-label>
         <input matInput type="number" min="0" formControlName="shadowSize">
       </mat-form-field>
-      <mat-checkbox fxFlex formControlName="smoothLines" style="margin-bottom: 16px;">
+      <mat-checkbox fxFlex formControlName="smoothLines">
         {{ 'widgets.chart.display-smooth-lines' | translate }}
       </mat-checkbox>
     </section>
@@ -106,10 +106,10 @@
   </fieldset>
   <fieldset class="fields-group" formGroupName="grid">
     <legend class="group-title" translate>widgets.chart.grid-settings</legend>
-    <mat-checkbox formControlName="verticalLines" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="verticalLines">
       {{ 'widgets.chart.show-vertical-lines' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="horizontalLines" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="horizontalLines">
       {{ 'widgets.chart.show-horizontal-lines' | translate }}
     </mat-checkbox>
     <mat-form-field fxFlex class="mat-block">
@@ -291,13 +291,13 @@
     <legend class="group-title" translate>widgets.chart.custom-legend-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('customLegendEnabled').value">
       <mat-expansion-panel-header fxLayout="row" style="height: 100%; min-height: 48px;">
-        <mat-panel-title>
+        <mat-panel-title fxFlex="60">
           <mat-slide-toggle formControlName="customLegendEnabled" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center" style="height: 100%;">
             {{ 'widgets.chart.enable-custom-legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description style="white-space: nowrap;" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" style="white-space: nowrap;" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
index 8fb6306848..6ec910fa08 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="widgetFontFormGroup" fxLayout="column">
-  <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+  <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>widgets.widget-font.font-family</mat-label>
       <input matInput formControlName="family">
@@ -26,7 +26,7 @@
       <input matInput type="number" min="1" step="1" formControlName="size">
     </mat-form-field>
   </section>
-  <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+  <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>widgets.widget-font.font-style</mat-label>
       <mat-select formControlName="style">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
index d2933be54b..ef06cde259 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
@@ -29,7 +29,7 @@
       <mat-label translate>widgets.rpc.initial-value</mat-label>
       <input matInput type="number" formControlName="initialValue">
     </mat-form-field>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayoutGap="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.rpc.min-value</mat-label>
         <input required matInput type="number" formControlName="minValue">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
index 9944d3173a..393acdb538 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
@@ -30,7 +30,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.value-settings</legend>
-    <mat-checkbox formControlName="initialValue" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="initialValue">
       {{ 'widgets.rpc.initial-value' | translate }}
     </mat-checkbox>
     <fieldset class="fields-group">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
index 4dfe574ad2..5db8315329 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
@@ -20,15 +20,15 @@
     <legend class="group-title" translate>widgets.persistent-table.general-settings</legend>
     <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
       <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableFilter" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableFilter">
           {{ 'widgets.persistent-table.enable-filter' | translate }}
         </mat-checkbox>
       </section>
       <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableStickyHeader" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableStickyHeader">
           {{ 'widgets.persistent-table.enable-sticky-header' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="enableStickyAction" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="enableStickyAction">
           {{ 'widgets.persistent-table.enable-sticky-action' | translate }}
         </mat-checkbox>
       </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
index 1e1ee3cd03..aa67e3d834 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
@@ -29,7 +29,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-checkbox formControlName="oneWayElseTwoWay" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="oneWayElseTwoWay">
       {{ 'widgets.rpc.is-one-way-command' | translate }}
     </mat-checkbox>
     <mat-form-field fxFlex class="mat-block">
@@ -46,7 +46,7 @@
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
-    <mat-checkbox formControlName="showError" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="showError">
       {{ 'widgets.rpc.show-rpc-error' | translate }}
     </mat-checkbox>
     <fieldset class="fields-group fields-group-slider">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
index 927bcf65c7..41f53398ae 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
@@ -22,7 +22,7 @@
       <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayoutGap="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.rpc.label-position</mat-label>
         <mat-select formControlName="labelPosition">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
index 0e9911508b..225ec4399e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="switchRpcSettingsFormGroup" fxLayout="column">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.value-settings</legend>
-    <mat-checkbox formControlName="initialValue" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="initialValue">
       {{ 'widgets.rpc.initial-value' | translate }}
     </mat-checkbox>
     <fieldset class="fields-group">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
index 2a666ef1f5..2acd3ad1f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
@@ -32,13 +32,13 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <section fxLayout="column" fxFlex>
-          <mat-checkbox formControlName="onePanel" style="margin-bottom: 16px;">
+          <mat-checkbox formControlName="onePanel">
             {{ 'widgets.date-range-navigator.picker-one-panel' | translate }}
           </mat-checkbox>
-          <mat-checkbox formControlName="autoConfirm" style="margin-bottom: 16px;">
+          <mat-checkbox formControlName="autoConfirm">
             {{ 'widgets.date-range-navigator.picker-auto-confirm' | translate }}
           </mat-checkbox>
-          <mat-checkbox formControlName="showTemplate" style="margin-bottom: 16px;">
+          <mat-checkbox formControlName="showTemplate">
             {{ 'widgets.date-range-navigator.picker-show-template' | translate }}
           </mat-checkbox>
           <mat-form-field fxFlex class="mat-block">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
index 0d028b2b61..0de8aabd0a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
@@ -42,7 +42,7 @@
                     icon="format_color_fill"
                     label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
         <input matInput type="number" min="0" formControlName="minorTicks">
@@ -71,7 +71,7 @@
     <mat-slide-toggle formControlName="showBorder" class="slide-block">
       {{ 'widgets.gauge.show-plate-border' | translate }}
     </mat-slide-toggle>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <tb-color-input fxFlex
                       formControlName="colorBorder"
                       icon="format_color_fill"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
index d69eeb2c96..ff42fd9004 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
@@ -31,7 +31,7 @@
   </tb-color-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gauge.ticks-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.min-value</mat-label>
         <input matInput type="number" formControlName="minValue">
@@ -294,7 +294,7 @@
 <ng-template #radialGauge let-settingsForm="settingsForm">
   <fieldset class="fields-group" [formGroup]="settingsForm">
     <legend class="group-title" translate>widgets.gauge.radial-gauge-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.start-ticks-angle</mat-label>
         <input matInput type="number" min="0" max="360" formControlName="startAngle">
@@ -314,7 +314,7 @@
 <ng-template #linearGauge let-settingsForm="settingsForm">
   <fieldset class="fields-group" [formGroup]="settingsForm">
     <legend class="group-title" translate>widgets.gauge.linear-gauge-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.bar-stroke-width</mat-label>
         <input matInput type="number" min="0" formControlName="barStrokeWidth">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
index c4515e29f1..b4b2e744a1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="digitalGaugeWidgetSettingsForm" fxLayout="column">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gauge.common-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.min-value</mat-label>
         <input matInput type="number" formControlName="minValue">
@@ -70,7 +70,7 @@
         <mat-label translate>widgets.gauge.stripes-thickness</mat-label>
         <input matInput type="number" min="0" formControlName="dashThickness">
       </mat-form-field>
-      <mat-checkbox fxFlex formControlName="roundedLineCap" style="margin-bottom: 16px;">
+      <mat-checkbox fxFlex formControlName="roundedLineCap">
         {{ 'widgets.gauge.rounded-line-cap' | translate }}
       </mat-checkbox>
     </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
index a85b33d886..d03f7dc8a1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
@@ -40,7 +40,7 @@
     <div fxLayout="column" fxLayoutGap="0.5em">
       <mat-divider></mat-divider>
       <section class="tb-widget-settings" fxLayout="column">
-        <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
           <mat-form-field fxFlex>
             <mat-label translate>widgets.gauge.highlight-from</mat-label>
             <input matInput type="number" formControlName="from">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
index 1dfaf317a2..472b52555c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
@@ -20,7 +20,12 @@
     <div fxFlex fxLayout="row" fxLayoutAlign="start center">
       <mat-panel-title>
         <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-          <div [innerHTML]="gpioItemHtml()"></div>
+          <div>
+            <span>{{ gpioItemFormGroup.value.label || 'Undefined' }} (</span><small>pin:</small>
+            <span>{{ numberText(gpioItemFormGroup.value.pin, 0) }}) - [</span><small>row:</small>
+            <span>{{ numberText(gpioItemFormGroup.value.row, -1) }}) - [</span><small>col:</small>
+            <span>{{ numberText(gpioItemFormGroup.value.col, -1) }}]</span>
+          </div>
           <div *ngIf="hasColor" class="tb-color-preview" style="margin-left: 6px;">
             <div class="tb-color-result" [ngStyle]="{background: gpioItemFormGroup.get('color').value}"></div>
           </div>
@@ -40,7 +45,7 @@
     <div fxLayout="column" fxLayoutGap="0.5em">
       <mat-divider></mat-divider>
       <section class="tb-widget-settings" fxLayout="column">
-        <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>widgets.gpio.pin</mat-label>
             <input required matInput type="number" min="1" step="1" formControlName="pin">
@@ -50,7 +55,7 @@
             <input required matInput formControlName="label">
           </mat-form-field>
         </section>
-        <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>widgets.gpio.row</mat-label>
             <input required matInput type="number" min="0" step="1" formControlName="row">
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 5f29645346..d6e6d675ad 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
@@ -20,7 +20,7 @@ import {
   ControlValueAccessor,
   UntypedFormBuilder,
   UntypedFormGroup,
-  NG_VALUE_ACCESSOR, ValidationErrors, ValidatorFn,
+  NG_VALUE_ACCESSOR, ValidatorFn,
   Validators
 } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
@@ -28,7 +28,6 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { isNumber } from '@core/utils';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 export interface GpioItem {
   pin: number;
@@ -38,23 +37,21 @@ export interface GpioItem {
   color?: string;
 }
 
-export function gpioItemValidator(hasColor: boolean): ValidatorFn {
-  return (control: AbstractControl) => {
-    const gpioItem: GpioItem = control.value;
-    if (!gpioItem
-      || !isNumber(gpioItem.pin) || gpioItem.pin < 1
-      || !isNumber(gpioItem.row) || gpioItem.row < 0
-      || !isNumber(gpioItem.col) || gpioItem.col < 0 || gpioItem.col > 1
-      || !gpioItem.label
-      || (hasColor && !gpioItem.color)
-    ) {
-      return {
-        gpioItem: true
-      };
-    }
-    return null;
-  };
-}
+export const gpioItemValidator = (hasColor: boolean): ValidatorFn => (control: AbstractControl) => {
+  const gpioItem: GpioItem = control.value;
+  if (!gpioItem
+    || !isNumber(gpioItem.pin) || gpioItem.pin < 1
+    || !isNumber(gpioItem.row) || gpioItem.row < 0
+    || !isNumber(gpioItem.col) || gpioItem.col < 0 || gpioItem.col > 1
+    || !gpioItem.label
+    || (hasColor && !gpioItem.color)
+  ) {
+    return {
+      gpioItem: true
+    };
+  }
+  return null;
+};
 
 @Component({
   selector: 'tb-gpio-item',
@@ -90,7 +87,6 @@ export class GpioItemComponent extends PageComponent implements OnInit, ControlV
 
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
-              private domSanitizer: DomSanitizer,
               private fb: UntypedFormBuilder) {
     super(store);
   }
@@ -133,13 +129,8 @@ export class GpioItemComponent extends PageComponent implements OnInit, ControlV
     );
   }
 
-  gpioItemHtml(): SafeHtml {
-    const value: GpioItem = this.gpioItemFormGroup.value;
-    const pin = isNumber(value.pin) && value.pin > 0 ? value.pin : 'Undefined';
-    const row = isNumber(value.row) && value.row > -1 ? value.row : 'Undefined';
-    const col = isNumber(value.col) && value.col > -1 ? value.col : 'Undefined';
-    const label = value.label || 'Undefined';
-    return this.domSanitizer.bypassSecurityTrustHtml(`${label} (<small>pin:</small>${pin}) - [<small>row:</small>${row}:<small>col:</small>${col}]`);
+  numberText(value: any, minValue: number): string {
+    return isNumber(value) && value > minValue ? value : 'Undefined';
   }
 
   private updateModel() {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
index 041d76646b..3ef9a55e78 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
@@ -20,7 +20,10 @@
     <div fxFlex fxLayout="row" fxLayoutAlign="start center">
       <mat-panel-title>
         <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-          <div [innerHTML]="selectOptionHtml()"></div>
+          <div>
+            <span>{{ selectOptionFormGroup.value.value || 'Undefined' }} </span>
+            <span *ngIf="selectOptionFormGroup.value.label">(<small>{{ selectOptionFormGroup.value.label }}</small>)</span>
+          </div>
         </div>
       </mat-panel-title>
       <span fxFlex></span>
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 ae9c4eb474..a546537bf7 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
@@ -27,14 +27,13 @@ import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 export interface DataKeySelectOption {
   value: string;
   label?: string;
 }
 
-export function dataKeySelectOptionValidator(control: AbstractControl) {
+export const dataKeySelectOptionValidator = (control: AbstractControl) => {
     const selectOption: DataKeySelectOption = control.value;
     if (!selectOption || !selectOption.value) {
       return {
@@ -42,7 +41,7 @@ export function dataKeySelectOptionValidator(control: AbstractControl) {
       };
     }
     return null;
-}
+};
 
 @Component({
   selector: 'tb-datakey-select-option',
@@ -75,7 +74,6 @@ export class DataKeySelectOptionComponent extends PageComponent implements OnIni
 
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
-              private domSanitizer: DomSanitizer,
               private fb: UntypedFormBuilder) {
     super(store);
   }
@@ -113,13 +111,6 @@ export class DataKeySelectOptionComponent extends PageComponent implements OnIni
     );
   }
 
-  selectOptionHtml(): SafeHtml {
-    const selectOption: DataKeySelectOption = this.selectOptionFormGroup.value;
-    const value = selectOption?.value || 'Undefined';
-    const label = selectOption?.label || '';
-    return this.domSanitizer.bypassSecurityTrustHtml(`${value} ${label ? '(<small>' + label + '</small>)' : ''}`);
-  }
-
   private updateModel() {
     const value: DataKeySelectOption = this.selectOptionFormGroup.value;
     this.modelValue = value;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
index d46008c8a2..f23924c9be 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
@@ -28,7 +28,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.checkbox-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.true-label</mat-label>
         <input matInput formControlName="trueValue">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
index 59de0ec2aa..19b695c4b1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
@@ -21,7 +21,7 @@
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.double-field-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="any" formControlName="minValue">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
index 220b4cc6b9..1ec19405bb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
@@ -21,7 +21,7 @@
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.integer-field-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="1" formControlName="minValue">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
index 5834916d67..a80ab4e6e9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
@@ -37,7 +37,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.attribute-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.widget-mode</mat-label>
         <mat-select formControlName="widgetMode">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
index 285b2d13e3..0344b51d32 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
@@ -25,7 +25,7 @@
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.latitude-key-name</mat-label>
         <input matInput formControlName="latKeyName">
@@ -47,7 +47,7 @@
     <mat-slide-toggle formControlName="showLabel" class="slide-block">
       {{ 'widgets.input-widgets.show-label' | translate }}
     </mat-slide-toggle>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.latitude-label</mat-label>
         <input matInput formControlName="latLabel">
@@ -69,10 +69,10 @@
       </mat-select>
     </mat-form-field>
     <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex formControlName="isLatRequired">
+      <mat-slide-toggle class="slide-block" fxFlex formControlName="isLatRequired">
         {{ 'widgets.input-widgets.latitude-field-required' | translate }}
       </mat-slide-toggle>
-      <mat-slide-toggle fxFlex formControlName="isLngRequired">
+      <mat-slide-toggle class="slide-block" fxFlex formControlName="isLngRequired">
         {{ 'widgets.input-widgets.longitude-field-required' | translate }}
       </mat-slide-toggle>
     </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 4a96047ef5..186583d5c1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -140,7 +140,7 @@
                        (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
                         updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double')" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.numeric-field-settings</legend>
-    <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.step-interval</mat-label>
         <input matInput type="number" min="0" formControlName="step">
@@ -163,7 +163,7 @@
     </mat-form-field>
     <section [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
                        updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double'"
-             class="row-fill" fxLayout="row" fxLayoutGap="8px">
+             fxLayout="row" fxLayoutGap="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.min-value-error-message</mat-label>
         <input matInput formControlName="minValueErrorMessage">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
index 70be62baf4..f6239b3e61 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
@@ -45,7 +45,7 @@
           <mat-checkbox formControlName="updateAllValues" style="margin-bottom: 8px;">
             {{ 'widgets.input-widgets.update-all-values' | translate }}
           </mat-checkbox>
-          <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
             <mat-form-field fxFlex class="mat-block">
               <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
               <input matInput formControlName="saveButtonLabel">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
index 3de12f12d6..2b0f1b4599 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
@@ -21,7 +21,7 @@
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.text-field-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.min-length</mat-label>
         <input matInput type="number" step="1" min="0" formControlName="minLength">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
index 06162001a2..d7ddd5da42 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
@@ -37,7 +37,7 @@
                                          label="widgets.maps.circle-key-name"
                                          formControlName="circleKeyName">
         </tb-datasources-key-autocomplete>
-        <mat-checkbox formControlName="editableCircle" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="editableCircle">
           {{ 'widgets.maps.enable-circle-edit' | translate }}
         </mat-checkbox>
         <fieldset class="fields-group fields-group-slider">
@@ -155,7 +155,7 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.circle-stroke</legend>
-          <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
             <tb-color-input
               fxFlex
               formControlName="circleStrokeColor"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
index e76f93a606..8c0eb5e6b2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
@@ -18,10 +18,10 @@
 <section class="tb-widget-settings" [formGroup]="mapEditorSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.editor-settings</legend>
-    <mat-slide-toggle formControlName="snappable" class="flex-gap-xs mat-slider-multiline">
+    <mat-slide-toggle formControlName="snappable" class="flex-gap-xs">
       {{ 'widgets.maps.enable-snapping' | translate }}
     </mat-slide-toggle>
-    <mat-slide-toggle formControlName="initDragMode" class="flex-gap-xs mat-slider-multiline">
+    <mat-slide-toggle formControlName="initDragMode" class="flex-gap-xs">
       {{ 'widgets.maps.init-draggable-mode' | translate }}
     </mat-slide-toggle>
     <mat-expansion-panel class="tb-settings" [expanded]="!mapEditorSettingsFormGroup.get('hideAllControlButton').value">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
index 724b052df7..49dfc84c5a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
@@ -45,22 +45,22 @@
           </mat-form-field>
         </section>
         <section class="flex-gap-xs" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.xs="16px">
-          <mat-slide-toggle fxFlex formControlName="animate" class="slide-block mat-slider-multiline">
+          <mat-slide-toggle fxFlex formControlName="animate" class="slide-block">
             {{ 'widgets.maps.cluster-zoom-animation' | translate }}
           </mat-slide-toggle>
-          <mat-slide-toggle fxFlex formControlName="showCoverageOnHover" class="slide-block mat-slider-multiline">
+          <mat-slide-toggle fxFlex formControlName="showCoverageOnHover" class="slide-block">
             {{ 'widgets.maps.show-markers-bounds-on-cluster-mouse-over' | translate }}
           </mat-slide-toggle>
         </section>
-        <mat-slide-toggle formControlName="spiderfyOnMaxZoom" class="slide-block mat-slider-multiline">
+        <mat-slide-toggle formControlName="spiderfyOnMaxZoom" class="slide-block">
           {{ 'widgets.maps.spiderfy-max-zoom-level' | translate }}
         </mat-slide-toggle>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.load-optimization</legend>
-          <mat-slide-toggle formControlName="chunkedLoading" class="flex-gap-xs mat-slider-multiline large">
+          <mat-slide-toggle formControlName="chunkedLoading" class="flex-gap-xs large">
             {{ 'widgets.maps.cluster-chunked-loading' | translate }}
           </mat-slide-toggle>
-          <mat-slide-toggle formControlName="removeOutsideVisibleBounds" class="slide-block mat-slider-multiline">
+          <mat-slide-toggle formControlName="removeOutsideVisibleBounds" class="slide-block">
             {{ 'widgets.maps.cluster-markers-lazy-load' | translate }}
           </mat-slide-toggle>
         </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
index 8e78674791..c1445a867d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="markersSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.markers-settings</legend>
-    <section class="row-fill" fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayoutGap="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.maps.marker-offset-x</mat-label>
         <input matInput type="number" formControlName="markerOffsetX">
@@ -36,7 +36,7 @@
                 functionTitle="{{ 'widgets.maps.position-function' | translate }}"
                 helpId="widget/lib/map/position_fn">
     </tb-js-func>
-    <mat-checkbox formControlName="draggableMarker" style="margin-bottom: 16px;">
+    <mat-checkbox formControlName="draggableMarker">
       {{ 'widgets.maps.draggable-marker' | translate }}
     </mat-checkbox>
     <fieldset class="fields-group fields-group-slider">
@@ -113,7 +113,7 @@
                       functionTitle="{{ 'widgets.maps.tooltip-function' | translate }}"
                       helpId="widget/lib/map/tooltip_fn">
           </tb-js-func>
-          <section class="row-fill"  fxLayout="row" fxLayoutGap="8px">
+          <section  fxLayout="row" fxLayoutGap="8px">
             <mat-form-field fxFlex class="mat-block">
               <mat-label translate>widgets.maps.tooltip-offset-x</mat-label>
               <input matInput type="number" formControlName="tooltipOffsetX">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
index 954966fa3e..17bada19fb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
@@ -37,7 +37,7 @@
                                          label="widgets.maps.polygon-key-name"
                                          formControlName="polygonKeyName">
         </tb-datasources-key-autocomplete>
-        <mat-checkbox formControlName="editablePolygon" style="margin-bottom: 16px;">
+        <mat-checkbox formControlName="editablePolygon">
           {{ 'widgets.maps.enable-polygon-edit' | translate }}
         </mat-checkbox>
         <fieldset class="fields-group fields-group-slider">
@@ -155,7 +155,7 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.polygon-stroke</legend>
-          <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
             <tb-color-input
               fxFlex
               formControlName="polygonStrokeColor"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
index 9e774cc644..ce36b4a5c7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationPathSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.path-settings</legend>
-    <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
       <tb-color-input
         fxFlex
         formControlName="color"
@@ -95,7 +95,7 @@
               label="{{ 'widgets.maps.decorator-custom-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
           </section>
-          <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
             <mat-form-field fxFlex class="mat-block">
               <mat-label translate>widgets.maps.decorator-offset</mat-label>
               <input matInput formControlName="decoratorOffset">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
index 91566c11f4..df812f6a18 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
@@ -31,7 +31,7 @@
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
           <tb-color-input
             fxFlex
             formControlName="pointColor"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss
index 2563704e27..5452b03f3b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss
@@ -30,7 +30,7 @@
 
       legend + * {
         display: block;
-        margin-top: 16px;
+        margin-top: 8px;
       }
 
       &.fields-group-slider {
@@ -77,20 +77,6 @@
 
 :host ::ng-deep {
   .tb-widget-settings {
-    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
- */
-    .mat-checkbox-label {
-      white-space: normal;
-    }
-
-    .row-fill {
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-infix {
-        width: 100%;
-      }
-    }
-
     .mat-expansion-panel {
       &.tb-settings {
         box-shadow: none;
@@ -120,16 +106,6 @@
             padding: 0;
           }
         }
-        /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
- */
-        .mat-checkbox-layout {
-          margin: 5px 0;
-        }
-        /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
- */
-        .mat-checkbox-inner-container {
-          margin-right: 12px;
-        }
       }
 
       .mat-expansion-panel-content {
@@ -148,22 +124,5 @@
         margin-bottom: 8px;
       }
     }
-    /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-    .mat-slide-toggle-content {
-      white-space: normal;
-    }
-    /*TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version.
- */
-    /*TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version.
- */
-    .mat-slider-multiline {
-      /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-      .mat-slide-toggle-content {
-        line-height: 18px;
-      }
-    }
-
   }
 }
diff --git a/ui-ngx/src/app/shared/components/color-input.component.html b/ui-ngx/src/app/shared/components/color-input.component.html
index daa2f6dd49..542ec540da 100644
--- a/ui-ngx/src/app/shared/components/color-input.component.html
+++ b/ui-ngx/src/app/shared/components/color-input.component.html
@@ -16,11 +16,11 @@
 
 -->
 <mat-form-field [formGroup]="colorFormGroup">
-  <mat-label>
+  <mat-label *ngIf="icon || label">
     <mat-icon *ngIf="icon">{{icon}}</mat-icon>
     <span *ngIf="label">{{label}}</span>
   </mat-label>
-  <div matPrefix class="tb-color-preview" (click)="!disabled && showColorPicker()" style="margin-right: 5px;">
+  <div matPrefix class="tb-color-preview" (click)="!disabled && showColorPicker()">
     <div class="tb-color-result" [ngStyle]="{background: colorFormGroup.get('color').value}"></div>
   </div>
   <input matInput formControlName="color" (keydown)="$event.preventDefault();" (click)="openOnInput && showColorPicker()" [required]="required">
diff --git a/ui-ngx/src/app/shared/components/color-input.component.scss b/ui-ngx/src/app/shared/components/color-input.component.scss
index 5e3c15ca52..0d5d861272 100644
--- a/ui-ngx/src/app/shared/components/color-input.component.scss
+++ b/ui-ngx/src/app/shared/components/color-input.component.scss
@@ -16,13 +16,14 @@
 :host {
   .mat-mdc-form-field {
     width: 100%;
+    mat-label {
+      .mat-icon {
+        margin-right: 4px;
+      }
+    }
   }
-}
-
-:host ::ng-deep {
-  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-  .mat-form-field-infix{
-    width: 150px;
+  .tb-color-preview {
+    margin-left: 8px;
+    margin-right: 5px;
   }
 }
diff --git a/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts b/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts
deleted file mode 100644
index 1a07ec5e59..0000000000
--- a/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-///
-/// 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 { AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
-import { MatChipGrid, MatChipRow } from '@angular/material/chips';
-import Timeout = NodeJS.Timeout;
-
-export interface MatChipDropEvent {
-  from: number;
-  to: number;
-}
-
-@Directive({
-  selector: 'mat-chip-grid[tb-chip-draggable]',
-})
-export class MatChipDraggableDirective implements AfterViewInit {
-
-  @Output()
-  chipDrop = new EventEmitter<MatChipDropEvent>();
-
-  private draggableChips: Array<DraggableChip> = [];
-
-  constructor(private chipsList: MatChipGrid,
-              private elementRef: ElementRef<HTMLElement>) {
-  }
-
-  @HostListener('document:mouseup')
-  onDocumentMouseUp() {
-    this.draggableChips.forEach((draggableChip) => {
-      draggableChip.preventDrag = false;
-    });
-  }
-
-  ngAfterViewInit(): void {
-    this.configureDraggableChipList();
-    this.chipsList._chips.changes.subscribe(() => {
-      this.configureDraggableChipList();
-    });
-  }
-
-  private configureDraggableChipList() {
-    const toRemove: Array<DraggableChip> = [];
-    this.chipsList._chips.forEach((chip) => {
-        const found = this.draggableChips.find((draggableChip) => draggableChip.chip === chip);
-        if (!found) {
-          this.draggableChips.push(new DraggableChip(chip,
-            this.chipsList,
-            this.elementRef.nativeElement,
-            this.chipDrop));
-        }
-      }
-    );
-    this.draggableChips.forEach((draggableChip) => {
-      const found = this.chipsList._chips.find((chip) => chip === draggableChip.chip);
-      if (!found) {
-        toRemove.push(draggableChip);
-      }
-    });
-    toRemove.forEach((draggableChip) => {
-      const index = this.draggableChips.indexOf(draggableChip);
-      this.draggableChips.splice(index, 1);
-    });
-  }
-}
-
-const draggingClassName = 'dragging';
-const droppingClassName = 'dropping';
-const droppingBeforeClassName = 'dropping-before';
-const droppingAfterClassName = 'dropping-after';
-
-let globalDraggingChipList: MatChipGrid = null;
-
-class DraggableChip {
-
-  private chipElement: HTMLElement;
-  private readonly handle: HTMLElement;
-
-  private dragging = false;
-  private counter = 0;
-
-  private dropPosition: 'after' | 'before';
-
-  private dropTimeout: Timeout;
-
-  public preventDrag = false;
-
-  private dropHandler = this.onDrop.bind(this);
-  private dragOverHandler = this.onDragOver.bind(this);
-
-  constructor(public chip: MatChipRow,
-              private chipsList: MatChipGrid,
-              private chipListElement: HTMLElement,
-              private chipDrop: EventEmitter<MatChipDropEvent>) {
-    chip._mousedown = () => {};
-    this.chipElement = chip._elementRef.nativeElement;
-    this.chipElement.setAttribute('draggable', 'true');
-    this.handle = this.chipElement.getElementsByClassName('tb-chip-drag-handle')[0] as HTMLElement;
-    this.chipElement.addEventListener('mousedown', this.onMouseDown.bind(this));
-    this.chipElement.addEventListener('dragstart', this.onDragStart.bind(this));
-    this.chipElement.addEventListener('dragend', this.onDragEnd.bind(this));
-    this.chipElement.addEventListener('dragenter', this.onDragEnter.bind(this));
-    this.chipElement.addEventListener('dragleave', this.onDragLeave.bind(this));
-  }
-
-  private onMouseDown(event: MouseEvent) {
-    if (event.target !== this.handle) {
-      this.preventDrag = true;
-    }
-  }
-
-  private onDragStart(event: Event | any) {
-    if (this.preventDrag) {
-      event.preventDefault();
-    } else {
-      event.stopPropagation();
-      this.dragging = true;
-      globalDraggingChipList = this.chipsList;
-      this.chipListElement.classList.add(draggingClassName);
-      this.chipElement.classList.add(draggingClassName);
-      event = (event as any).originalEvent || event;
-      const dataTransfer = event.dataTransfer;
-      dataTransfer.effectAllowed = 'copyMove';
-      dataTransfer.dropEffect = 'move';
-      dataTransfer.setData('text', this.index() + '');
-      const offset = this.calculateDragImageOffset(event, this.chipElement) || {x: 0, y: 0};
-      (event.dataTransfer as any).setDragImage( this.chipElement, offset.x, offset.y );
-    }
-  }
-
-  private onDragEnter(event: Event | any) {
-    this.counter++;
-    if (this.dragging) {
-      return;
-    }
-    this.chipElement.removeEventListener('dragover', this.dragOverHandler);
-    this.chipElement.removeEventListener('drop', this.dropHandler);
-
-    this.chipElement.addEventListener('dragover', this.dragOverHandler);
-    this.chipElement.addEventListener('drop', this.dropHandler);
-  }
-
-  private onDragLeave(event: Event | any) {
-    this.counter--;
-    if (this.counter <= 0) {
-      this.counter = 0;
-      this.chipElement.classList.remove(droppingClassName);
-      this.chipElement.classList.remove(droppingAfterClassName);
-      this.chipElement.classList.remove(droppingBeforeClassName);
-    }
-  }
-
-  private onDragEnd(event: Event | any) {
-    event.stopPropagation();
-    this.dragging = false;
-    globalDraggingChipList = null;
-    this.chipListElement.classList.remove(draggingClassName);
-    this.chipElement.classList.remove(draggingClassName);
-  }
-
-  private onDragOver(event: Event | any) {
-    if (this.dragging) {
-      return;
-    }
-    event.preventDefault();
-    if (globalDraggingChipList !== this.chipsList) {
-      return;
-    }
-    const bounds = this.chipElement.getBoundingClientRect();
-    event = (event as any).originalEvent || event;
-    const props = {
-      width: bounds.right - bounds.left,
-      height: bounds.bottom - bounds.top,
-      x: event.clientX - bounds.left,
-      y: event.clientY - bounds.top,
-    };
-
-    const horizontalOffset = props.x;
-    const horizontalMidPoint = props.width / 2;
-
-    const verticalOffset = props.y;
-    const verticalMidPoint = props.height / 2;
-
-    this.chipElement.classList.add(droppingClassName);
-
-    this.chipElement.classList.remove(droppingAfterClassName);
-    this.chipElement.classList.remove(droppingBeforeClassName);
-
-    if (horizontalOffset >= horizontalMidPoint || verticalOffset >= verticalMidPoint) {
-      this.dropPosition = 'after';
-      this.chipElement.classList.add(droppingAfterClassName);
-    } else {
-      this.dropPosition = 'before';
-      this.chipElement.classList.add(droppingBeforeClassName);
-    }
-
-  }
-
-  private onDrop(event: Event | any) {
-    this.counter = 0;
-    event.preventDefault();
-    if (globalDraggingChipList !== this.chipsList) {
-      return;
-    }
-    event = (event as any).originalEvent || event;
-    const droppedItemIndex = parseInt(event.dataTransfer.getData('text'), 10);
-    const currentIndex = this.index();
-    let newIndex;
-    if (this.dropPosition === 'before') {
-      if (droppedItemIndex < currentIndex) {
-        newIndex = currentIndex - 1;
-      } else {
-        newIndex = currentIndex;
-      }
-    } else {
-      if (droppedItemIndex < currentIndex) {
-        newIndex = currentIndex;
-      } else {
-        newIndex = currentIndex + 1;
-      }
-    }
-    if (this.dropTimeout) {
-      clearTimeout(this.dropTimeout);
-    }
-    if (droppedItemIndex !== newIndex) {
-      this.dropTimeout = setTimeout(() => {
-        this.dropPosition = null;
-
-        this.chipElement.classList.remove(droppingClassName);
-        this.chipElement.classList.remove(droppingAfterClassName);
-        this.chipElement.classList.remove(droppingBeforeClassName);
-
-        this.chipElement.removeEventListener('drop', this.dropHandler);
-
-        const dropEvent: MatChipDropEvent = {
-          from: droppedItemIndex,
-          to: newIndex
-        };
-        this.chipDrop.emit(dropEvent);
-      }, 1000 / 16);
-    }
-  }
-
-  private index(): number {
-    return this.chipsList._chips.toArray().indexOf(this.chip);
-  }
-
-  private calculateDragImageOffset(event: DragEvent, dragImage: Element): { x: number; y: number } {
-
-    const dragImageComputedStyle = window.getComputedStyle( dragImage );
-    const paddingTop = parseFloat( dragImageComputedStyle.paddingTop ) || 0;
-    const paddingLeft = parseFloat( dragImageComputedStyle.paddingLeft ) || 0;
-    const borderTop = parseFloat( dragImageComputedStyle.borderTopWidth ) || 0;
-    const borderLeft = parseFloat( dragImageComputedStyle.borderLeftWidth ) || 0;
-
-    return {
-      x: event.offsetX + paddingLeft + borderLeft,
-      y: event.offsetY + paddingTop + borderTop
-    };
-  }
-
-}
diff --git a/ui-ngx/src/app/shared/components/multiple-image-input.component.scss b/ui-ngx/src/app/shared/components/multiple-image-input.component.scss
index 938d2005fa..c8c72a11ce 100644
--- a/ui-ngx/src/app/shared/components/multiple-image-input.component.scss
+++ b/ui-ngx/src/app/shared/components/multiple-image-input.component.scss
@@ -157,15 +157,11 @@ $previewSize: 64px !default;
   button.browse-file {
     padding: 0;
     font-size: 16px;
-    /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-    span.mat-button-wrapper {
+    span.mdc-button__label {
       display: block;
-      label {
-        display: block;
-        cursor: pointer;
-        padding: 0 16px;
-      }
+      cursor: pointer;
+      padding: 0 16px;
     }
   }
 }
+
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index fc8d674d34..037dd576b6 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -114,7 +114,6 @@ import { EntitySubTypeListComponent } from '@shared/components/entity/entity-sub
 import { TruncatePipe } from '@shared/pipe/truncate.pipe';
 import { TbJsonPipe } from '@shared/pipe/tbJson.pipe';
 import { ColorPickerDialogComponent } from '@shared/components/dialog/color-picker-dialog.component';
-import { MatChipDraggableDirective } from '@shared/components/mat-chip-draggable.directive';
 import { ColorInputComponent } from '@shared/components/color-input.component';
 import { JsFuncComponent } from '@shared/components/js-func.component';
 import { JsonFormComponent } from '@shared/components/json-form/json-form.component';
@@ -209,7 +208,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     ToastDirective,
     FullscreenDirective,
     CircularProgressDirective,
-    MatChipDraggableDirective,
     TbHotkeysDirective,
     TbAnchorComponent,
     TbPopoverComponent,
@@ -369,7 +367,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     ToastDirective,
     FullscreenDirective,
     CircularProgressDirective,
-    MatChipDraggableDirective,
     TbHotkeysDirective,
     TbAnchorComponent,
     TbStringTemplateOutletDirective,
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 0ecd6d452c..44b05a3705 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -918,9 +918,8 @@ mat-label {
 
   button.mat-mdc-menu-item {
     overflow: hidden;
-    fill: #737373;
     .mdc-list-item__primary-text {
-      width: 100%;
+      flex: 1;
       .tb-alt-text {
         float: right;
       }
@@ -1415,61 +1414,6 @@ mat-label {
     background-color: $primary;
   }
 
-  .mat-mdc-chip.mat-mdc-standard-chip {
-    &.dragging {
-      .mat-mdc-chip-ripple {
-        display: none !important;
-      }
-    }
-  }
-
-  .mat-mdc-chip-set, .mat-mdc-chip-grid {
-    &.dragging {
-      .mat-mdc-chip {
-        &.mat-mdc-standard-chip {
-          &.dropping {
-            //border: dashed 2px;
-            //opacity: .5;
-
-            //.md-chip-content {
-            //  margin: -2px;
-            //}
-          }
-
-          &.dropping-before {
-            &::after {
-              position: absolute;
-              top: 0;
-              right: 50%;
-              bottom: 0;
-              left: 0;
-              content: "";
-              background-color: #fff;
-              border: dashed 2px;
-              border-radius: 16px;
-              opacity: .7;
-            }
-          }
-
-          &.dropping-after {
-            &::after {
-              position: absolute;
-              top: 0;
-              right: 0;
-              bottom: 0;
-              left: 50%;
-              content: "";
-              background-color: #fff;
-              border: dashed 2px;
-              border-radius: 16px;
-              opacity: .7;
-            }
-          }
-        }
-      }
-    }
-  }
-
   .tb-color-preview {
     cursor: pointer;
     box-sizing: border-box;
diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss
index 49b199f3f5..1a38804de5 100644
--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@@ -17,14 +17,6 @@
 @import '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
 @import './scss/constants';
 
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
 @include mat.all-component-typographies();
 @include mat.core();
 
@@ -248,14 +240,6 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
   div.tb-dashboard-page.mobile-app {
     @include mat-fab-toolbar-inverse-theme($tb-theme);
   }
-
-  .same-color.mat-form-field-invalid {
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-suffix {
-      color: mat.get-color-from-palette($warn, text);
-    }
-  }
 }
 
 .tb-default {