Merge remote-tracking branch 'origin/feature/angular15' into feature/alarm-assign

3 years ago · ce77d5d1bc
426 changed files with 4370 additions and 4758 deletions
--- a/application/src/main/data/json/system/widget_bundles/control_widgets.json
+++ b/application/src/main/data/json/system/widget_bundles/control_widgets.json
@ -130,8 +130,8 @@
        "sizeX": 4,
        "sizeY": 2,
        "resources": [],
-        "templateHtml": "<div class=\"tb-rpc-button\" fxLayout=\"column\">\n    <div fxFlex=\"20\" class=\"title-container\" fxLayout=\"row\"\n        fxLayoutAlign=\"center center\" [fxShow]=\"showTitle\">\n        <span class=\"button-title\">{{title}}</span>\n    </div>\n    <div fxFlex=\"{{showTitle ? 80 : 100}}\" [ngStyle]=\"{paddingTop: showTitle ? '5px': '10px'}\"\n        class=\"button-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <div>\n            <button mat-button (click)=\"sendCommand()\"\n                    [class.mat-raised-button]=\"styleButton?.isRaised\"\n                    [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n                    [ngStyle]=\"customStyle\">\n                {{buttonLable}}\n            </button>\n        </div>\n    </div>\n    <div class=\"error-container\" [ngStyle]=\"{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span class=\"button-error\">{{ error }}</span>\n    </div>\n</div>",
-        "templateCss": ".tb-rpc-button {\n    width: 100%;\n    height: 100%;\n}\n\n.tb-rpc-button .title-container {\n    font-weight: 500;\n    white-space: nowrap;\n    margin: 10px 0;\n}\n\n.tb-rpc-button .button-container div{\n    min-width: 80%\n}\n\n.tb-rpc-button .button-container .mat-button{\n    width: 100%;\n    margin: 0;\n}\n\n.tb-rpc-button .error-container {\n    position: absolute;\n    top: 2%;\n    right: 0;\n    left: 0;\n    z-index: 4;\n    height: 14px;\n}\n\n.tb-rpc-button .error-container .button-error {\n    color: #ff3315;\n    white-space: nowrap;\n}",
+        "templateHtml": "<div class=\"tb-rpc-button\" fxLayout=\"column\">\n    <div fxFlex=\"20\" class=\"title-container\" fxLayout=\"row\"\n        fxLayoutAlign=\"center center\" [fxShow]=\"showTitle\">\n        <span class=\"button-title\">{{title}}</span>\n    </div>\n    <div fxFlex=\"{{showTitle ? 80 : 100}}\" [ngStyle]=\"{paddingTop: showTitle ? '5px': '10px'}\"\n        class=\"button-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <div>\n            <button mat-button (click)=\"sendCommand()\"\n                    [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n                    [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n                    [ngStyle]=\"customStyle\">\n                {{buttonLable}}\n            </button>\n        </div>\n    </div>\n    <div class=\"error-container\" [ngStyle]=\"{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span class=\"button-error\">{{ error }}</span>\n    </div>\n</div>",
+        "templateCss": ".tb-rpc-button {\n    width: 100%;\n    height: 100%;\n}\n\n.tb-rpc-button .title-container {\n    font-weight: 500;\n    white-space: nowrap;\n    margin: 10px 0;\n}\n\n.tb-rpc-button .button-container div{\n    min-width: 80%\n}\n\n.tb-rpc-button .button-container .mat-mdc-button{\n    width: 100%;\n    margin: 0;\n}\n\n.tb-rpc-button .error-container {\n    position: absolute;\n    top: 2%;\n    right: 0;\n    left: 0;\n    z-index: 4;\n    height: 14px;\n}\n\n.tb-rpc-button .error-container .button-error {\n    color: #ff3315;\n    white-space: nowrap;\n}",
        "controllerScript": "var requestPersistent = false;\nvar persistentPollingInterval = 5000;\n\nself.onInit = function() {\n    if (self.ctx.settings.requestPersistent) {\n        requestPersistent = self.ctx.settings.requestPersistent;\n    }\n    if (self.ctx.settings.persistentPollingInterval) {\n        persistentPollingInterval = self.ctx.settings.persistentPollingInterval;\n    }\n    \n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges();\n    });\n};\n\nfunction init() {\n    let rpcEnabled = self.ctx.defaultSubscription.rpcEnabled;\n\n    self.ctx.$scope.buttonLable = self.ctx.settings.buttonText;\n    self.ctx.$scope.showTitle = self.ctx.settings.title &&\n        self.ctx.settings.title.length ? true : false;\n    self.ctx.$scope.title = self.ctx.settings.title;\n    self.ctx.$scope.styleButton = self.ctx.settings.styleButton;\n\n    if (self.ctx.settings.styleButton.isPrimary ===\n        false) {\n        self.ctx.$scope.customStyle = {\n            'background-color': self.ctx.$scope.styleButton.bgColor,\n            'color': self.ctx.$scope.styleButton.textColor\n        };\n    }\n\n    if (!rpcEnabled) {\n        self.ctx.$scope.error =\n            'Target device is not set!';\n    }\n\n    self.ctx.$scope.sendCommand = function() {\n        var rpcMethod = self.ctx.settings.methodName;\n        var rpcParams = self.ctx.settings.methodParams;\n        if (rpcParams.length) {\n            try {\n                rpcParams = JSON.parse(rpcParams);\n            } catch (e) {}\n        }\n        var timeout = self.ctx.settings.requestTimeout;\n        var oneWayElseTwoWay = self.ctx.settings.oneWayElseTwoWay ?\n            true : false;\n\n        var commandPromise;\n        if (oneWayElseTwoWay) {\n            commandPromise = self.ctx.controlApi.sendOneWayCommand(\n                rpcMethod, rpcParams, timeout, requestPersistent, persistentPollingInterval);\n        } else {\n            commandPromise = self.ctx.controlApi.sendTwoWayCommand(\n                rpcMethod, rpcParams, timeout, requestPersistent, persistentPollingInterval);\n        }\n        commandPromise.subscribe(\n            function success() {\n                self.ctx.$scope.error = \"\";\n                self.ctx.detectChanges();\n            },\n            function fail(rejection) {\n                if (self.ctx.settings.showError) {\n                    self.ctx.$scope.error =\n                        rejection.status + \": \" +\n                        rejection.statusText;\n                    self.ctx.detectChanges();\n                }\n            }\n        );\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.controlApi.completedCommand();\n}\n",
        "settingsSchema": "",
        "dataKeySettingsSchema": "{}\n",
@ -149,8 +149,8 @@
        "sizeX": 4,
        "sizeY": 2,
        "resources": [],
-        "templateHtml": "<div class=\"tb-rpc-button\" fxLayout=\"column\">\n    <div fxFlex=\"20\" class=\"title-container\" fxLayout=\"row\"\n        fxLayoutAlign=\"center center\" [fxShow]=\"showTitle\">\n        <span class=\"button-title\">{{title}}</span>\n    </div>\n    <div fxFlex=\"{{showTitle ? 80 : 100}}\" [ngStyle]=\"{paddingTop: showTitle ? '5px': '10px'}\"\n        class=\"button-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <div>\n            <button mat-button (click)=\"sendUpdate()\"\n                    [class.mat-raised-button]=\"styleButton?.isRaised\"\n                    [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n                    [ngStyle]=\"customStyle\">\n                {{buttonLable}}\n            </button>\n        </div>\n    </div>\n    <div class=\"error-container\" [ngStyle]=\"{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span class=\"button-error\">{{ error }}</span>\n    </div>\n</div>",
-        "templateCss": ".tb-rpc-button {\n    width: 100%;\n    height: 100%;\n}\n\n.tb-rpc-button .title-container {\n    font-weight: 500;\n    white-space: nowrap;\n    margin: 10px 0;\n}\n\n.tb-rpc-button .button-container div{\n    min-width: 80%\n}\n\n.tb-rpc-button .button-container .mat-button{\n    width: 100%;\n    margin: 0;\n}\n\n.tb-rpc-button .error-container {\n    position: absolute;\n    top: 2%;\n    right: 0;\n    left: 0;\n    z-index: 4;\n    height: 14px;\n}\n\n.tb-rpc-button .error-container .button-error {\n    color: #ff3315;\n    white-space: nowrap;\n}",
+        "templateHtml": "<div class=\"tb-rpc-button\" fxLayout=\"column\">\n    <div fxFlex=\"20\" class=\"title-container\" fxLayout=\"row\"\n        fxLayoutAlign=\"center center\" [fxShow]=\"showTitle\">\n        <span class=\"button-title\">{{title}}</span>\n    </div>\n    <div fxFlex=\"{{showTitle ? 80 : 100}}\" [ngStyle]=\"{paddingTop: showTitle ? '5px': '10px'}\"\n        class=\"button-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <div>\n            <button mat-button (click)=\"sendUpdate()\"\n                    [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n                    [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n                    [ngStyle]=\"customStyle\">\n                {{buttonLable}}\n            </button>\n        </div>\n    </div>\n    <div class=\"error-container\" [ngStyle]=\"{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span class=\"button-error\">{{ error }}</span>\n    </div>\n</div>",
+        "templateCss": ".tb-rpc-button {\n    width: 100%;\n    height: 100%;\n}\n\n.tb-rpc-button .title-container {\n    font-weight: 500;\n    white-space: nowrap;\n    margin: 10px 0;\n}\n\n.tb-rpc-button .button-container div{\n    min-width: 80%\n}\n\n.tb-rpc-button .button-container .mat-mdc-button{\n    width: 100%;\n    margin: 0;\n}\n\n.tb-rpc-button .error-container {\n    position: absolute;\n    top: 2%;\n    right: 0;\n    left: 0;\n    z-index: 4;\n    height: 14px;\n}\n\n.tb-rpc-button .error-container .button-error {\n    color: #ff3315;\n    white-space: nowrap;\n}",
        "controllerScript": "self.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges();\n    });\n};\n\nfunction init() {\n    self.ctx.$scope.buttonLable = self.ctx.settings.buttonText;\n    self.ctx.$scope.showTitle = self.ctx.settings.title &&\n        self.ctx.settings.title.length ? true : false;\n    self.ctx.$scope.title = self.ctx.settings.title;\n    self.ctx.$scope.styleButton = self.ctx.settings.styleButton;\n    let entityAttributeType = self.ctx.settings.entityAttributeType;\n    let entityParameters = JSON.parse(self.ctx.settings.entityParameters);\n\n    if (self.ctx.settings.styleButton.isPrimary ===\n        false) {\n        self.ctx.$scope.customStyle = {\n            'background-color': self.ctx.$scope.styleButton\n                .bgColor,\n            'color': self.ctx.$scope.styleButton.textColor\n        };\n    }\n\n    let attributeService = self.ctx.$scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n\n    self.ctx.$scope.sendUpdate = function() {\n        let attributes = [];\n        for (let key in entityParameters) {\n            attributes.push({\n                \"key\": key,\n                \"value\": entityParameters[key]\n            });\n        }\n        \n        let entityId = {\n            entityType: \"DEVICE\",\n            id: self.ctx.defaultSubscription.targetDeviceId\n        };\n        attributeService.saveEntityAttributes(entityId,\n            entityAttributeType, attributes).subscribe(\n            function success() {\n                self.ctx.$scope.error = \"\";\n                self.ctx.detectChanges();\n            },\n            function fail(rejection) {\n                if (self.ctx.settings.showError) {\n                    self.ctx.$scope.error =\n                        rejection.status + \": \" +\n                        rejection.statusText;\n                        self.ctx.detectChanges();\n                }\n            }\n\n        );\n    };\n}\n",
        "settingsSchema": "",
        "dataKeySettingsSchema": "{}\n",
@ -197,4 +197,4 @@
      }
    }
  ]
-}
+}
--- a/application/src/main/data/json/system/widget_bundles/entity_admin_widgets.json
+++ b/application/src/main/data/json/system/widget_bundles/entity_admin_widgets.json
--- a/application/src/main/data/json/system/widget_bundles/input_widgets.json
+++ b/application/src/main/data/json/system/widget_bundles/input_widgets.json
--- a/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
+++ b/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
--- a/ui-ngx/.browserslistrc
+++ b/ui-ngx/.browserslistrc
@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
--- a/ui-ngx/package.json
+++ b/ui-ngx/package.json
@ -14,17 +14,17 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^14.2.12",
-    "@angular/cdk": "^14.2.7",
-    "@angular/common": "^14.2.12",
-    "@angular/compiler": "^14.2.12",
-    "@angular/core": "^14.2.12",
-    "@angular/flex-layout": "^14.0.0-beta.41",
-    "@angular/forms": "^14.2.12",
-    "@angular/material": "^14.2.7",
-    "@angular/platform-browser": "^14.2.12",
-    "@angular/platform-browser-dynamic": "^14.2.12",
-    "@angular/router": "^14.2.12",
+    "@angular/animations": "^15.2.0",
+    "@angular/cdk": "^15.2.0",
+    "@angular/common": "^15.2.0",
+    "@angular/compiler": "^15.2.0",
+    "@angular/core": "^15.2.0",
+    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "^15.2.0",
+    "@angular/material": "^15.2.0",
+    "@angular/platform-browser": "^15.2.0",
+    "@angular/platform-browser-dynamic": "^15.2.0",
+    "@angular/router": "^15.2.0",
    "@auth0/angular-jwt": "^5.1.2",
    "@date-io/core": "1.3.7",
    "@date-io/date-fns": "1.3.7",
@ -32,18 +32,18 @@
    "@flowjs/ngx-flow": "~0.6.0",
    "@geoman-io/leaflet-geoman-free": "^2.13.0",
    "@juggle/resize-observer": "^3.3.1",
-    "@mat-datetimepicker/core": "~10.1.1",
+    "@mat-datetimepicker/core": "~11.0.2",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/pickers": "3.3.10",
-    "@ngrx/effects": "^14.3.3",
-    "@ngrx/store": "^14.3.3",
-    "@ngrx/store-devtools": "^14.3.3",
+    "@ngrx/effects": "^15.3.0",
+    "@ngrx/store": "^15.3.0",
+    "@ngrx/store-devtools": "^15.3.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "ace-builds": "1.4.13",
    "ace-diff": "^3.0.3",
-    "angular-gridster2": "~14.1.4",
+    "angular-gridster2": "~15.0.3",
    "angular2-hotkeys": "^13.1.0",
    "canvas-gauges": "^2.1.7",
    "core-js": "^3.26.1",
@ -66,16 +66,17 @@
    "leaflet.gridlayer.googlemutant": "^0.13.5",
    "leaflet.markercluster": "^1.5.3",
    "libphonenumber-js": "^1.10.4",
+    "marked": "^4.0.17",
    "messageformat": "^2.3.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.40",
    "ngx-clipboard": "^15.1.0",
    "ngx-color-picker": "^13.0.0",
    "ngx-daterangepicker-material": "^6.0.4",
-    "ngx-drag-drop": "^14.0.0",
+    "ngx-drag-drop": "^15.0.1",
    "ngx-flowchart": "https://github.com/thingsboard/ngx-flowchart.git#release/2.0.0",
    "ngx-hm-carousel": "^3.0.0",
-    "ngx-markdown": "^14.0.1",
+    "ngx-markdown": "^15.1.1",
    "ngx-sharebuttons": "^11.0.0",
    "ngx-translate-messageformat-compiler": "^5.1.0",
    "objectpath": "^2.0.0",
@ -103,17 +104,17 @@
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
-    "@angular-builders/custom-webpack": "~14.1.0",
-    "@angular-devkit/build-angular": "^14.2.10",
-    "@angular-eslint/builder": "14.4.0",
-    "@angular-eslint/eslint-plugin": "14.4.0",
-    "@angular-eslint/eslint-plugin-template": "14.4.0",
-    "@angular-eslint/schematics": "14.4.0",
-    "@angular-eslint/template-parser": "14.4.0",
-    "@angular/cli": "^14.2.10",
-    "@angular/compiler-cli": "^14.2.12",
-    "@angular/language-service": "^14.2.12",
-    "@ngtools/webpack": "^14.2.10",
+    "@angular-builders/custom-webpack": "~15.0.0",
+    "@angular-devkit/build-angular": "^15.2.0",
+    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
+    "@angular/cli": "^15.2.0",
+    "@angular/compiler-cli": "^15.2.0",
+    "@angular/language-service": "^15.2.0",
+    "@ngtools/webpack": "^15.1.6",
    "@types/ace-diff": "^2.1.1",
    "@types/canvas-gauges": "^2.1.4",
    "@types/flot": "^0.0.32",
@ -129,6 +130,7 @@
    "@types/leaflet.gridlayer.googlemutant": "^0.4.6",
    "@types/leaflet.markercluster": "^1.5.1",
    "@types/lodash": "^4.14.177",
+    "@types/marked": "^4.0.3",
    "@types/moment-timezone": "^0.5.30",
    "@types/mousetrap": "^1.6.0",
    "@types/node": "~15.14.9",
@ -159,7 +161,7 @@
    "protractor": "~7.0.0",
    "raw-loader": "^4.0.2",
    "ts-node": "^10.9.1",
-    "typescript": "~4.6.4",
+    "typescript": "~4.8.4",
    "webpack": "^5.75.0"
  },
  "resolutions": {
@ -167,4 +169,4 @@
    "ace-builds": "1.4.13",
    "@date-io/core": "1.3.7"
  }
-}
+}
--- a/ui-ngx/src/app/core/utils.ts
+++ b/ui-ngx/src/app/core/utils.ts
@ -304,7 +304,7 @@ export function deepClone<T>(target: T, ignoreFields?: string[]): T {
    (target as any[]).forEach((v) => { cp.push(v); });
    return cp.map((n: any) => deepClone<any>(n)) as any;
  }
-  if (typeof target === 'object' && target !== {}) {
+  if (typeof target === 'object' && Object.keys(target).length) {
    const cp = {...(target as { [key: string]: any })} as { [key: string]: any };
    Object.keys(cp).forEach(k => {
      if (!ignoreFields || ignoreFields.indexOf(k) === -1) {
--- 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,
--- 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,26 +22,3 @@
  padding-right: 8px;
  min-width: 160px;
 }
-
-:host ::ng-deep {
-  mat-form-field {
-    font-size: 16px;
-    width: 200px;
-
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
-}
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-autocomplete.component.html
@ -16,14 +16,15 @@

 -->
 <mat-form-field [formGroup]="selectEntityInfoFormGroup" class="mat-block">
-  <input matInput type="text" placeholder="{{ alias }}"
+  <mat-label>{{ alias }}</mat-label>
+  <input matInput type="text"
         #entityInfoInput
         formControlName="entityInfo"
         [required]="required"
         [matAutocomplete]="entityInfoAutocomplete">
  <button *ngIf="selectEntityInfoFormGroup.get('entityInfo').value && !disabled"
          type="button"
-          matSuffix mat-button mat-icon-button aria-label="Clear"
+          matSuffix mat-icon-button aria-label="Clear"
          (click)="clear()">
    <mat-icon class="material-icons">close</mat-icon>
  </button>
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<form [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
+<form [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="width: 700px;">
  <mat-toolbar color="primary">
    <h2>{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2>
    <span fxFlex></span>
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.html
@ -15,10 +15,9 @@
    limitations under the License.

 -->
-<mat-form-field [floatLabel]="showLabel ? 'auto' : 'always'"
-                [hideRequiredMarker]="!showLabel" [formGroup]="selectEntityAliasFormGroup" class="mat-block">
-  <mat-label *ngIf="!showLabel"></mat-label>
-  <input matInput type="text" placeholder="{{ 'entity.entity-alias' | translate }}"
+<mat-form-field [formGroup]="selectEntityAliasFormGroup" class="mat-block">
+  <mat-label *ngIf="showLabel">{{ 'entity.entity-alias' | translate }}</mat-label>
+  <input matInput type="text" placeholder="{{ !showLabel ? ('entity.entity-alias' | translate) : ''}}"
         #entityAliasInput
         formControlName="entityAlias"
         (focusin)="onFocus()"
--- 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,9 +16,3 @@
 :host {

 }
-
-:host ::ng-deep {
-  .mat-form-field-infix {
-    border-top: none;
-  }
-}
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 700px;">
+<form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 800px;">
  <mat-toolbar color="primary">
    <h2>{{ title | translate }}</h2>
    <span fxFlex></span>
@ -32,7 +32,7 @@
    <div class="tb-aliases-header" fxLayout="row" fxLayoutAlign="start center">
      <span fxFlex="5"></span>
      <div fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-        <span class="tb-header-label" translate fxFlex="150px">alias.name</span>
+        <span class="tb-header-label" translate fxFlex fxFlex.gt-sm="200px">alias.name</span>
        <span class="tb-header-label" translate fxFlex style="padding-left: 10px;">alias.entity-filter</span>
        <span class="tb-header-label" translate fxFlex="120px" style="padding-left: 10px;">alias.resolve-multiple</span>
        <span style="min-width: 80px;"></span>
@ -45,8 +45,7 @@
           *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
        <span fxFlex="5">{{$index + 1}}.</span>
        <div class="mat-elevation-z4 tb-alias" fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-          <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block" fxFlex="150px">
-            <mat-label></mat-label>
+          <mat-form-field class="mat-block" fxFlex fxFlex.gt-sm="200px" style="padding-top: 20px;">
            <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
            <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
              {{ 'entity.alias-required' | translate }}
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.scss
@ -45,7 +45,7 @@
 }

 :host ::ng-deep {
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
--- a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
@ -19,7 +19,7 @@
  <mat-toolbar color="primary">
    <h2>{{ 'attribute.add' | translate }}</h2>
    <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
@ -19,7 +19,7 @@
  <mat-toolbar color="primary">
    <h2 translate>attribute.add-widget-to-dashboard</h2>
    <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
--- 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,16 +13,5 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-:host ::ng-deep {
-  mat-radio-button {
-    display: block;
-    margin-bottom: 16px;
-    .mat-radio-label {
-      width: 100%;
-      align-items: start;
-      .mat-radio-label-content {
-        width: 100%;
-      }
-    }
-  }
+:host {
 }
--- 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
@ -17,7 +17,7 @@
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
  <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
-    <mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
      <div class="mat-toolbar-tools">
        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
          <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
@ -58,7 +58,7 @@
        </button>
      </div>
    </mat-toolbar>
-    <mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && textSearchMode && dataSource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="mode === 'default' && textSearchMode && dataSource.selection.isEmpty()">
      <div class="mat-toolbar-tools">
        <button mat-icon-button
                matTooltip="{{ 'action.search' | translate }}"
@ -78,7 +78,7 @@
        </button>
      </div>
    </mat-toolbar>
-    <mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="mode === 'default' && !dataSource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="mode === 'default' && !dataSource.selection.isEmpty()">
      <div class="mat-toolbar-tools" fxLayout.xs="row wrap">
        <span class="tb-entity-table-info">
          {{ (attributeScope === latestTelemetryTypes.LATEST_TELEMETRY ?
@ -104,7 +104,7 @@
        </button>
      </div>
    </mat-toolbar>
-    <mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="mode === 'widget'">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="mode === 'widget'">
      <div class="mat-toolbar-tools" fxLayoutGap="8px" fxLayout.xs="row wrap">
        <div fxFlex fxLayout="row" fxLayoutAlign="start">
          <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
@ -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>
@ -249,10 +249,10 @@
                           widgetBundleSet"
          fxFlex fxLayoutAlign="center center"
          style="display: flex;"
-          class="mat-headline">widgets-bundle.empty</span>
+          class="mat-headline-5">widgets-bundle.empty</span>
    <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
          fxFlex fxLayoutAlign="center center"
          style="display: flex;"
-          class="mat-headline">widget.select-widgets-bundle</span>
+          class="mat-headline-5">widget.select-widgets-bundle</span>
  </div>
 </div>
--- 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,26 +78,6 @@
  .mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
  }
-  mat-form-field.tb-attribute-scope {
-    font-size: 16px;
-    width: 200px;
-
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
  mat-cell.tb-value-cell {
    cursor: pointer;
    mat-icon {
--- 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"
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
@ -18,7 +18,7 @@
 <mat-toolbar color="primary">
  <h2 translate>audit-log.audit-log-details</h2>
  <span fxFlex></span>
-  <button mat-button mat-icon-button
+  <button mat-icon-button
          [mat-dialog-close]="false"
          type="button">
    <mat-icon class="material-icons">close</mat-icon>
--- 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>
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@ -19,7 +19,7 @@
  <mat-toolbar color="primary">
    <h2 translate>dashboard.update-image</h2>
    <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss
@ -18,7 +18,7 @@ $previewSize: 300px !default;
 :host {

  mat-form-field.rect-field {
-    max-width: 60px;
+    max-width: 80px;
  }

  .tb-image-preview {
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@ -157,7 +157,7 @@
        <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
                 [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
          <h3 [fxShow]="!isEdit && displayTitle()">{{ translatedDashboardTitle }}</h3>
-          <mat-form-field [fxShow]="isEdit" class="mat-block">
+          <mat-form-field [fxShow]="isEdit" class="mat-block tb-appearance-transparent">
            <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
            <input matInput class="tb-dashboard-title"
                   [ngStyle]="{'color': dashboard.configuration.settings.titleColor}"
@ -285,7 +285,7 @@
            </tb-widgets-bundle-search>
          </div>
          <div class="details-buttons" *ngIf="isAddingWidget">
-            <button mat-button mat-icon-button type="button"
+            <button mat-icon-button type="button"
                    *ngIf="dashboardWidgetSelectComponent?.widgetTypes.size > 1"
                    (click)="editWidgetsTypesToDisplay($event)"
                    matTooltip="{{ 'widget.filter' | translate }}"
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss
@ -35,9 +35,15 @@ div.tb-dashboard-page {
    position: relative;
    padding-left: 20px;
    max-height: 60px;
-    mat-form-field {
-      .mat-form-field-infix {
-        width: 100%;
+    .mat-mdc-form-field.mat-form-field-appearance-fill.tb-appearance-transparent {
+      .mat-mdc-text-field-wrapper {
+        .mat-mdc-form-field-infix {
+          width: 100%;
+          padding-top: 20px;
+          .mat-mdc-floating-label {
+            top: 24px;
+          }
+        }
      }
    }
    input.tb-dashboard-title {
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@ -19,7 +19,7 @@
  <mat-toolbar color="primary">
    <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
    <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
--- 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,9 +27,6 @@
 }

 :host ::ng-deep {
-  .mat-slide-toggle-content {
-    white-space: normal;
-  }
  .mat-expansion-panel {
    &.tb-settings {
      box-shadow: none;
--- 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
@ -25,10 +25,10 @@ $mobile-app-toolbar-height: 40px !default;

 div.tb-dashboard-page.mobile-app {
  tb-dashboard-toolbar {
-    mat-fab-toolbar {
+    .mat-fab-toolbar {
      .mat-fab-toolbar-wrapper {
        height: $mobile-app-toolbar-height;
-        mat-toolbar {
+        .mat-toolbar.mat-toolbar-single-row {
          height: $mobile-app-toolbar-height;
          min-height: $mobile-app-toolbar-height;
          .mat-toolbar-tools {
@ -58,15 +58,12 @@ div.tb-dashboard-page.mobile-app {
 }

 tb-dashboard-toolbar {
-  mat-fab-toolbar {
+  .mat-fab-toolbar {
    mat-fab-trigger {
-      .mat-fab {
+      .mat-mdc-fab {
        width: 36px;
        height: 36px;
        margin: 4px 0 0 4px;
-        .mat-button-wrapper {
-          padding: 0;
-        }
      }
    }

@ -79,7 +76,7 @@ tb-dashboard-toolbar {
          height: $fullscreen-toolbar-height;
        }

-        mat-toolbar {
+        .mat-toolbar.mat-toolbar-single-row {
          height: $mobile-toolbar-height;
          min-height: $mobile-toolbar-height;
          .mat-toolbar-tools {
@ -105,7 +102,7 @@ tb-dashboard-toolbar {
        height: $toolbar-height;
      }

-      mat-toolbar {
+      .mat-toolbar.mat-toolbar-single-row {
        height: $mobile-toolbar-height;
        min-height: $mobile-toolbar-height;
        .mat-toolbar-tools {
@ -154,12 +151,6 @@ tb-dashboard-toolbar {
                min-width: 0;
                height: $half-mobile-toolbar-height;

-                @media #{$mat-lt-md} {
-                  mat-menu{
-                    margin: 0;
-                  }
-                }
-
                @media #{$mat-gt-sm} {
                  height: 46px;
                }
@ -172,28 +163,9 @@ tb-dashboard-toolbar {
                  }
                }

-                mat-select {
-                  margin: 0;
-                  pointer-events: all;
-                }
-
                tb-states-component {
                  pointer-events: all;
                }
-
-                button.mat-icon-button:not(.tb-mat-32) {
-                  min-width: 40px;
-
-                  @media #{$mat-lt-md} {
-                    min-width: 28px;
-                    padding: 2px;
-                    margin: 0;
-                    .mat-button-wrapper {
-                      display: block;
-                      line-height: 24px;
-                    }
-                  }
-                }
              }
            }
          }
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
@ -19,7 +19,7 @@
  <div *ngIf="widgetsBundle; else bundles">
    <div *ngIf="(widgets$ | async)?.length; else loadingWidgets" fxFlexFill fxLayoutGap="12px grid" fxLayout="row wrap">
      <div *ngFor="let widget of widgets$ | async" class="mat-card-container">
-        <mat-card fxFlexFill fxLayout="row" fxLayoutGap="16px" (click)="onWidgetClicked($event, widget)">
+        <mat-card appearance="raised" fxFlexFill fxLayout="row" fxLayoutGap="16px" (click)="onWidgetClicked($event, widget)">
          <div class="preview-container" fxFlex="45">
            <img class="preview" [src]="getPreviewImage(widget.image)" alt="{{ widget.title }}">
          </div>
@ -36,7 +36,7 @@
    <ng-template #loadingWidgets>
      <div *ngIf="loadingWidgets$ | async; else emptyBundle" fxLayout="column"
           fxLayoutAlign="center center" class="tb-absolute-fill">
-        <span class="mat-headline" style="padding-bottom: 20px;">
+        <span class="mat-headline-5" style="padding-bottom: 20px;">
          {{ 'widget.loading-widgets' | translate }}
        </span>
        <mat-spinner color="accent" strokeWidth="5"></mat-spinner>
@ -45,14 +45,14 @@
        <span translate
              style="display: flex;"
              fxLayoutAlign="center center"
-              class="mat-headline tb-absolute-fill">widgets-bundle.empty</span>
+              class="mat-headline-5 tb-absolute-fill">widgets-bundle.empty</span>
      </ng-template>
    </ng-template>
  </div>
  <ng-template #bundles>
    <div *ngIf="(widgetsBundles$ | async)?.length; else loadingWidgetBundles" fxFlexFill fxLayoutGap="12px grid" fxLayout="row wrap">
      <div *ngFor="let widgetsBundle of widgetsBundles$ | async" class="mat-card-container">
-        <mat-card fxFlexFill fxLayout="row" fxLayoutGap="16px" (click)="selectBundle($event, widgetsBundle)">
+        <mat-card appearance="raised" fxFlexFill fxLayout="row" fxLayoutGap="16px" (click)="selectBundle($event, widgetsBundle)">
          <div class="preview-container" fxFlex="45">
            <img class="preview" [src]=getPreviewImage(widgetsBundle.image) alt="{{ widgetsBundle.title }}">
          </div>
@ -69,7 +69,7 @@
    <ng-template #loadingWidgetBundles>
      <div *ngIf="loadingWidgetBundles$ | async; else noWidgetBundles" fxLayout="column"
           fxLayoutAlign="center center" class="tb-absolute-fill">
-        <span class="mat-headline" style="padding-bottom: 20px;">
+        <span class="mat-headline-5" style="padding-bottom: 20px;">
          {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
        </span>
        <mat-spinner strokeWidth="5"></mat-spinner>
@ -78,7 +78,7 @@
        <span translate
              style="display: flex;"
              fxLayoutAlign="center center"
-              class="mat-headline tb-absolute-fill">widgets-bundle.no-widgets-bundles-text</span>
+              class="mat-headline-5 tb-absolute-fill">widgets-bundle.no-widgets-bundles-text</span>
      </ng-template>
    </ng-template>
  </ng-template>
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
@ -24,20 +24,20 @@
  .widget-select {
    padding: 12px 0 12px 12px;
    background-color: #cfd8dc;
-
    .mat-card-container {
      flex: 0 0 100%;
      max-width: 100%;

      &:hover {
-        .mat-card {
+        .mat-mdc-card {
          box-shadow: 0 2px 6px 6px rgb(0 0 0 / 20%), 0 1px 4px 2px rgb(0 0 0 / 14%), 0 1px 6px 0 rgb(0 0 0 / 12%)
        }
      }

-      .mat-card {
+      .mat-mdc-card {
        cursor: pointer;
        transition: box-shadow 0.2s;
+        padding: 16px;

        .preview-container {
          text-align: center;
@ -50,14 +50,25 @@
          object-fit: contain;
        }

-        .mat-card-title {
+        .mat-mdc-card-title {
          font-size: 20px;
+          line-height: normal;
+          margin-bottom: 8px;
+        }
+
+        .mat-mdc-card-subtitle {
+          margin-bottom: 16px;
+          margin-top: -4px;
+          line-height: normal;
+          font-weight: normal;
        }

-        .mat-card-content {
+        .mat-mdc-card-content {
          font-size: 14px;
          line-height: 18px;
          color: #666;
+          margin-bottom: 16px;
+          padding: 0;
        }
      }
    }
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.ts
@ -14,7 +14,7 @@
 /// limitations under the License.
 ///

-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
@ -27,7 +27,7 @@
          [ngStyle]="dashboardStyle">
  <section *ngIf="layoutCtx.widgets.isEmpty()" fxLayoutAlign="center center"
           style="display: flex; z-index: 1; pointer-events: none;"
-           class="mat-headline tb-absolute-fill">
+           class="mat-headline-5 tb-absolute-fill">
    <span *ngIf="!isEdit" style="text-align: center;">
      {{'dashboard.no-widgets' | translate}}
    </span>
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss
@ -15,16 +15,14 @@
 */
 :host {
  button.tb-add-new-widget {
+    height: auto;
    padding-right: 12px;
    font-size: 20px;
    border-style: dashed;
    border-width: 2px;
-
-    ::ng-deep .mat-button-wrapper {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-    }
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
  }
 }
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@ -19,7 +19,7 @@
  <mat-toolbar color="primary">
    <h2 translate>layout.manage</h2>
    <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
      (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
@ -145,9 +145,8 @@
                    max="{{ layoutPercentageSize.MAX }}"
                    style="width: 100%;"
                    color="accent"
-                    formControlName="sliderPercentage"
-                    thumbLabel
-                    [displayWith]="formatSliderTooltipLabel.bind(this)">
+                    discrete
+                    [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderPercentage"/>
        </mat-slider>
        <mat-slider *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.PERCENTAGE"
                    step="1"
@ -155,9 +154,8 @@
                    max="{{ layoutFixedSize.MAX }}"
                    style="width: 100%;"
                    color="accent"
-                    formControlName="sliderFixed"
-                    thumbLabel
-                    [displayWith]="formatSliderTooltipLabel.bind(this)">
+                    discrete
+                    [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderFixed"/>
        </mat-slider>
        <div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group" style="width: 100%;">
          <label>
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
@ -59,7 +59,7 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
        transition-property: max-width;
        position: relative;

-        .mat-icon-button {
+        .mat-mdc-icon-button {
          align-self: end;
        }
      }
@ -124,42 +124,17 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
 }

 :host ::ng-deep {
-  .mat-slider-wrapper {
-    .mat-slider-thumb-container {
-      .mat-slider-thumb-label {
-        width: 35px;
-        height: 35px;
-      }
-    }
-  }
-
  .mat-button-toggle-group {
    width: 100%;
    min-width: 354px;
    border: 2px solid rgba(0, 0, 0, 0.06);
-
    .mat-button-toggle-checked  {
      background: rgba(0, 0, 0, 0.06);
    }
-
    .mat-button-toggle {
      border: none !important;
    }
  }
-
-  /* Make mat-slider tooltip always visible */
-  .mat-slider-thumb-label {
-    transform: rotate(45deg) !important;
-    border-radius: 50% 50% 0 !important;
-  }
-
-  .mat-slider-thumb {
-    transform: scale(0) !important;
-  }
-
-  .mat-slider-thumb-label-text {
-    opacity: 1 !important;
-  }
 }

 ::ng-deep {
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
@ -19,7 +19,7 @@
  <mat-toolbar color="primary">
    <h2 translate>{{ isAdd ? 'dashboard.add-state' : 'dashboard.edit-state' }}</h2>
    <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss
@ -15,16 +15,15 @@
 */
 :host {
  width: min-content; //for Safari
-
-  mat-select.default-state-controller {
-    margin: 0;
-  }
 }

 :host ::ng-deep {
-  mat-select.default-state-controller {
-    .mat-select-value {
+  .mat-mdc-select.default-state-controller {
+    .mat-mdc-select-value {
      max-width: 200px;
    }
+    .mat-mdc-select-arrow {
+      width: 24px;
+    }
  }
 }
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.scss
@ -33,21 +33,20 @@
      white-space: nowrap;
      outline: none;
    }
-
-    mat-select {
-      margin: 0;
-    }
  }
 }

 :host ::ng-deep {
-  mat-select {
-    .mat-select-value {
+  .mat-mdc-select {
+    .mat-mdc-select-value {
      max-width: 200px;
-      .mat-select-value-text {
+      .mat-mdc-select-value-text {
        font-size: 18px;
        font-weight: 700;
      }
    }
+    .mat-mdc-select-arrow {
+      width: 24px;
+    }
  }
 }
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@ -19,7 +19,7 @@
  <mat-toolbar color="primary">
    <h2 translate>dashboard.manage-states</h2>
    <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
@ -32,7 +32,7 @@
      <div class="manage-dashboard-states">
        <div class="tb-entity-table">
          <div fxLayout="column" class="tb-entity-table-content">
-            <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode">
+            <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
              <div class="mat-toolbar-tools">
                <span class="tb-entity-table-title" translate>dashboard.states</span>
                <span fxFlex></span>
@ -51,7 +51,7 @@
                </button>
              </div>
            </mat-toolbar>
-            <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
+            <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
              <div class="mat-toolbar-tools">
                <button mat-icon-button
                        type="button"
--- 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,15 +29,4 @@
      border-radius: 5px 0 0 5px;
    }
  }
-
-  &::ng-deep {
-    .mat-button-wrapper {
-      line-height: 18px;
-      span {
-        font-size: 18px;
-        font-weight: 400;
-        white-space: normal;
-      }
-    }
-  }
 }
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@ -29,18 +29,18 @@
        </span>
      </div>
      <div *ngIf="isShowSearch" [fxHide]="!showSearchPane" fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
-        <button mat-button mat-icon-button (click)="onToggleSearch()">
+        <button mat-icon-button (click)="onToggleSearch()">
          <mat-icon class="material-icons">arrow_back</mat-icon>
        </button>
        <div style="width: 100%; margin: 0 20px">
          <ng-content select=".search-pane"></ng-content>
        </div>
      </div>
-      <button mat-button mat-icon-button *ngIf="isShowSearch && !showSearchPane" (click)="onToggleSearch()">
+      <button mat-icon-button *ngIf="isShowSearch && !showSearchPane" (click)="onToggleSearch()">
        <mat-icon class="material-icons">search</mat-icon>
      </button>
      <ng-content select=".details-buttons"></ng-content>
-      <button mat-button mat-icon-button (click)="onCloseDetails()">
+      <button mat-icon-button (click)="onCloseDetails()">
        <mat-icon class="material-icons">close</mat-icon>
      </button>
    </div>
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.ts
@ -14,7 +14,15 @@
 /// limitations under the License.
 ///

-import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output
+} from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.html
@ -76,7 +76,7 @@
  </mat-tab>
  <mat-tab label="{{ 'device.lwm2m-security-config.bootstrap-tab' | translate }}">
    <div style="padding: 2px;" formGroupName="bootstrap">
-      <mat-accordion multi="true" class="mat-body-1">
+      <mat-accordion multi="true" class="mat-body-2">
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.scss
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.scss
@ -14,17 +14,17 @@
 * limitations under the License.
 */
 :host {
-  mat-tab-group {
+ .mat-mdc-tab-group {
    min-height: 330px;
  }
 }

 :host ::ng-deep {
-  .mat-tab-body-wrapper {
+  .mat-mdc-tab-body-wrapper {
    min-height: 200px;
  }

-  .mat-tab-body {
+  .mat-mdc-tab-body {
    padding: 16px 0;
  }
 }
--- 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,24 +18,3 @@
 :host {
  padding-right: 8px;
 }
-
-:host ::ng-deep {
-  mat-form-field {
-
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
-}
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@ -35,7 +35,7 @@
  <mat-drawer-content>
    <div class="mat-padding tb-entity-table tb-absolute-fill">
      <div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
-        <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
+        <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
          <div class="mat-toolbar-tools">
            <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
              <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
@ -102,7 +102,7 @@
            </button>
          </div>
        </mat-toolbar>
-        <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
+        <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
          <div class="mat-toolbar-tools">
            <button mat-icon-button
                    matTooltip="{{ translations.search | translate }}"
@ -122,7 +122,7 @@
            </button>
          </div>
        </mat-toolbar>
-        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
+        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
          <div class="mat-toolbar-tools">
            <span class="tb-entity-table-info">
              {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
@ -141,7 +141,7 @@
          <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
                     matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
            <ng-container matColumnDef="select" sticky>
-              <mat-header-cell *matHeaderCellDef style="width: 30px;">
+              <mat-header-cell *matHeaderCellDef style="width: 40px;">
                <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
                              [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
                              [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@ -210,14 +210,14 @@
              </mat-cell>
            </ng-container>
            <ng-container matColumnDef="actions" stickyEnd>
-              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 40) + 'px',
-                                                                    maxWidth: (cellActionDescriptors.length * 40) + 'px',
-                                                                    width: (cellActionDescriptors.length * 40) + 'px' }">
+              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
+                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
+                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
                {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
              </mat-header-cell>
-              <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 40) + 'px',
-                                                                    maxWidth: (cellActionDescriptors.length * 40) + 'px',
-                                                                    width: (cellActionDescriptors.length * 40) + 'px' }">
+              <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
+                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
+                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
                <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
                          *ngFor="let actionDescriptor of cellActionDescriptors"
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<mat-card class="settings-card">
+<mat-card appearance="outlined" class="settings-card">
  <mat-toolbar class="details-toolbar">
    <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center">
      <div class="tb-details-title-header" fxLayout="column" fxLayoutAlign="center start">
@ -46,7 +46,7 @@
    </div>
  </mat-toolbar>
  <mat-card-content fxFlex="100">
-    <mat-tab-group class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" [(selectedIndex)]="selectedTab" fxFill>
+    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" [(selectedIndex)]="selectedTab" fxFill>
      <mat-tab label="{{ 'details.details' | translate }}">
        <tb-anchor #entityDetailsForm></tb-anchor>
      </mat-tab>
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.scss
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.scss
@ -79,7 +79,6 @@
    .tb-header-button {
      .tb-btn-header {
        position: relative !important;
-        display: inline-block !important;
        animation: tbMoveFromTopFade .3s ease both;

        &.tb-hide {
@ -92,25 +91,25 @@

 :host ::ng-deep {
  .tb-help {
-    .mat-icon-button.mat-primary {
+    .mat-mdc-icon-button.mat-primary {
      color: rgba(0, 0, 0, 0.52);
    }
  }

-  .mat-card-content {
+  .mat-mdc-card-content {
    position: relative;
    overflow: hidden;

-    > .mat-tab-group {
-      > .mat-tab-body-wrapper {
+    > .mat-mdc-tab-group {
+      > .mat-mdc-tab-body-wrapper {
        position: absolute;
        top: 49px;
        left: 0;
        right: 0;
        bottom: 0;
      }
-      > .mat-tab-header {
-        .mat-tab-label {
+      > .mat-mdc-tab-header {
+        .mat-mdc-tab {
          min-width: 40px;
        }
      }
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
@ -27,7 +27,7 @@
  <div class="details-buttons">
    <div [tb-help]="helpLinkId()"></div>
  </div>
-  <mat-tab-group class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" fxFlex [(selectedIndex)]="selectedTab">
+  <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" fxFlex [(selectedIndex)]="selectedTab">
    <mat-tab label="{{ 'details.details' | translate }}">
      <tb-anchor #entityDetailsForm></tb-anchor>
    </mat-tab>
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.scss
@ -23,16 +23,16 @@
 :host ::ng-deep {
  tb-details-panel {
    > .mat-content {
-      > .mat-tab-group {
-        > .mat-tab-body-wrapper {
+      > .mat-mdc-tab-group {
+        > .mat-mdc-tab-body-wrapper {
          position: absolute;
          top: 49px;
          left: 0;
          right: 0;
          bottom: 0;
        }
-        > .mat-tab-header {
-          .mat-tab-label {
+        > .mat-mdc-tab-header {
+          .mat-mdc-tab {
            min-width: 40px;
          }
        }
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
@ -144,8 +144,8 @@
                            formControlName="rootEntity">
          </tb-entity-select>
        </div>
-        <div fxFlex fxLayout="row" *ngIf="filterFormGroup.get('rootStateEntity').value">
-          <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 14px; padding-right: 8px;">
+        <div fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="filterFormGroup.get('rootStateEntity').value">
+          <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
            <mat-label translate>alias.state-entity-parameter-name</mat-label>
            <input matInput formControlName="stateEntityParamName"
                   placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
@ -211,8 +211,8 @@
                          formControlName="rootEntity">
        </tb-entity-select>
      </div>
-      <div fxFlex fxLayout="row" *ngIf="filterFormGroup.get('rootStateEntity').value">
-        <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 14px; padding-right: 8px;">
+      <div fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="filterFormGroup.get('rootStateEntity').value">
+        <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
          <mat-label translate>alias.state-entity-parameter-name</mat-label>
          <input matInput formControlName="stateEntityParamName"
                 placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
--- a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
@ -18,7 +18,7 @@
 <mat-toolbar fxLayout="row" color="primary">
  <h2 translate>{{ title }}</h2>
  <span fxFlex></span>
-  <button mat-button mat-icon-button
+  <button mat-icon-button
          [mat-dialog-close]="false"
          type="button">
    <mat-icon class="material-icons">close</mat-icon>
--- a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
@ -252,6 +252,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
              name: this.translate.instant('event.copy-entity-id'),
              icon: 'content_paste',
              style: {
+                padding: '4px',
                'font-size': '16px',
                color: 'rgba(0,0,0,.87)'
              },
@ -268,6 +269,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
              name: this.translate.instant('event.copy-message-id'),
              icon: 'content_paste',
              style: {
+                padding: '4px',
                'font-size': '16px',
                color: 'rgba(0,0,0,.87)'
              },
--- 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,25 +23,3 @@
  min-width: 160px;
 }

-:host ::ng-deep {
-  mat-form-field {
-    font-size: 16px;
-    width: 200px;
-
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
-}
--- a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
@ -16,8 +16,7 @@

 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="booleanFilterPredicateFormGroup">
-  <mat-form-field floatLabel="always" hideRequiredMarker fxFlex="30" class="mat-block">
-    <mat-label></mat-label>
+  <mat-form-field hideRequiredMarker fxFlex="30" class="mat-block">
    <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
      <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
        {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 900px;">
+<form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
  <mat-toolbar color="primary">
    <h2 translate>filter.complex-filter</h2>
    <span fxFlex></span>
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
@ -38,9 +38,9 @@
        <span [fxShow]="!disabled" style="min-width: 40px;">&nbsp;</span>
      </div>
    </div>
-    <mat-divider></mat-divider>
+    <mat-divider style="padding-bottom: 5px;"></mat-divider>
    <div class="predicate-list">
-      <div fxLayout="row" fxLayoutAlign="start center" style="height: 45px;"
+      <div fxLayout="row" fxLayoutAlign="start" style="height: 71px;"
           formArrayName="predicates"
           *ngFor="let predicateControl of predicatesFormArray().controls; let $index = index">
        <div fxFlex="8" fxLayout="row" fxLayoutAlign="center" class="filters-operation">
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.scss
@ -15,14 +15,15 @@
 */
 :host {
  .predicate-list {
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
    max-height: 350px;
    .no-data-found {
      height: 50px;
    }
  }
  .filters-operation {
-    margin-top: -40px;
+    margin-top: -18px;
    color: #666;
    font-weight: 500;
  }
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@ -19,14 +19,12 @@
  <div fxFlex fxLayout="column" [fxShow]="!dynamicMode && !onlyUserDynamicSource">
    <div fxLayout="column" [ngSwitch]="valueType">
      <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
-        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
-          <mat-label></mat-label>
+        <mat-form-field hideRequiredMarker class="mat-block">
          <input matInput formControlName="defaultValue" placeholder="{{'filter.value' | translate}}">
        </mat-form-field>
      </ng-template>
      <ng-template [ngSwitchCase]="valueTypeEnum.NUMERIC">
-        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
-          <mat-label></mat-label>
+        <mat-form-field hideRequiredMarker class="mat-block">
          <input required type="number" matInput formControlName="defaultValue"
                 placeholder="{{'filter.value' | translate}}">
        </mat-form-field>
@ -48,8 +46,7 @@
  <div fxFlex fxLayout="column" [fxShow]="dynamicMode || onlyUserDynamicSource">
    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
      <div fxFlex="35" fxLayout="column">
-        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
-          <mat-label></mat-label>
+        <mat-form-field hideRequiredMarker class="mat-block">
          <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
            <mat-option [value]="null">
              {{'filter.no-dynamic-value' | translate}}
@ -62,8 +59,7 @@
        <div class="tb-hint" translate>filter.dynamic-source-type</div>
      </div>
      <div fxFlex fxLayout="column">
-        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
-          <mat-label></mat-label>
+        <mat-form-field hideRequiredMarker class="mat-block">
          <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
        </mat-form-field>
        <div class="tb-hint" translate>filter.source-attribute</div>
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.scss
@ -20,17 +20,15 @@
 }

 :host ::ng-deep {
-  mat-form-field {
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-      .mat-form-field-infix {
-        border-top-width: 0.2em;
-        width: auto;
-        min-width: auto;
-      }
-      .mat-form-field-underline {
-        bottom: 0;
+  .mat-mdc-form-field {
+    .mat-mdc-form-field-subscript-wrapper {
+      &:before {
+        content: none;
      }
    }
+    .mat-mdc-form-field-infix {
+      width: auto;
+      min-width: auto;
+    }
  }
 }
--- a/ui-ngx/src/app/modules/home/components/filter/filter-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-select.component.html
@ -15,10 +15,9 @@
    limitations under the License.

 -->
-<mat-form-field [floatLabel]="showLabel ? 'auto' : 'always'"
-                [hideRequiredMarker]="!showLabel" [formGroup]="selectFilterFormGroup" class="mat-block">
-  <mat-label *ngIf="!showLabel"></mat-label>
-  <input matInput type="text" placeholder="{{ 'filter.filter' | translate }}"
+<mat-form-field [formGroup]="selectFilterFormGroup" class="mat-block">
+  <mat-label *ngIf="showLabel">{{ 'filter.filter' | translate }}</mat-label>
+  <input matInput type="text" placeholder="{{ !showLabel ? ('filter.filter' | translate) : ''}}"
         #filterInput
         formControlName="filter"
         (focusin)="onFocus()"
--- a/ui-ngx/src/app/modules/home/components/filter/filter-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-select.component.scss
@ -1,24 +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.
- */
-:host {
-
-}
-
-:host ::ng-deep {
-  .mat-form-field-infix {
-    border-top: none;
-  }
-}
--- a/ui-ngx/src/app/modules/home/components/filter/filter-select.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-select.component.ts
@ -41,7 +41,7 @@ import { Filter } from '@shared/models/query/query.models';
@Component({
  selector: 'tb-filter-select',
  templateUrl: './filter-select.component.html',
-  styleUrls: ['./filter-select.component.scss'],
+  styleUrls: [],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => FilterSelectComponent),
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.scss
@ -45,7 +45,7 @@
 }

 :host ::ng-deep {
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<form [formGroup]="keyFilterFormGroup" (ngSubmit)="save()" style="width: 900px;">
+<form [formGroup]="keyFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
  <mat-toolbar color="primary">
    <h2>{{(data.isAdd ? 'filter.add-key-filter' : (data.readonly ? 'filter.key-filter' : 'filter.edit-key-filter')) | translate}}</h2>
    <span fxFlex></span>
@ -46,7 +46,7 @@
                   [matAutocompleteDisabled]="!showAutocomplete">
            <button *ngIf="keyFilterFormGroup.get('key.key').value && showAutocomplete"
                    type="button"
-                    matSuffix mat-button mat-icon-button aria-label="Clear"
+                    matSuffix mat-icon-button aria-label="Clear"
                    (click)="clear()">
              <mat-icon class="material-icons">close</mat-icon>
            </button>
@ -60,7 +60,7 @@
            </mat-error>
          </mat-form-field>
        </section>
-        <mat-form-field [fxFlex]="isConstantKeyType ? 20 : 30" class="mat-block">
+        <mat-form-field [fxFlex]="isConstantKeyType ? 20 : 30" class="mat-block tb-value-type">
          <mat-label translate>filter.value-type.value-type</mat-label>
          <mat-select formControlName="valueType">
            <mat-select-trigger>
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.scss
@ -14,11 +14,13 @@
 * limitations under the License.
 */
 :host ::ng-deep {
-  .entity-key {
-    mat-form-field {
-      .mat-form-field-wrapper {
-        .mat-form-field-infix {
-          width: auto;
+  .mat-mdc-form-field.tb-value-type {
+    mat-select-trigger {
+      .mat-icon {
+        vertical-align: middle;
+        margin-right: 8px;
+        svg {
+          vertical-align: initial;
        }
      }
    }
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
@ -34,7 +34,7 @@
      </div>
      <mat-divider></mat-divider>
      <div class="key-filter-list">
-        <div fxLayout="row" fxLayoutAlign="start center" style="max-height: 40px;"
+        <div fxLayout="row" fxLayoutAlign="start" style="max-height: 71px;"
             formArrayName="keyFilters"
             *ngFor="let keyFilterControl of keyFiltersFormArray().controls; let $index = index">
          <div fxFlex="8" class="filters-operation">
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.scss
@ -22,7 +22,7 @@
    }
  }
  .filters-operation {
-    margin-top: -40px;
+    margin-top: -18px;
    color: #666;
    font-weight: 500;
  }
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
@ -16,8 +16,7 @@

 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="numericFilterPredicateFormGroup">
-  <mat-form-field floatLabel="always" hideRequiredMarker fxFlex="30" class="mat-block">
-    <mat-label></mat-label>
+  <mat-form-field hideRequiredMarker fxFlex="30" class="mat-block">
    <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
      <mat-option *ngFor="let operation of numericOperations" [value]="operation">
        {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
--- a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
@ -17,8 +17,7 @@
 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="stringFilterPredicateFormGroup">
  <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-    <mat-form-field floatLabel="always" hideRequiredMarker fxFlex class="mat-block">
-      <mat-label></mat-label>
+    <mat-form-field hideRequiredMarker fxFlex class="mat-block">
      <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
        <mat-option *ngFor="let operation of stringOperations" [value]="operation">
          {{stringOperationTranslations.get(stringOperationEnum[operation]) | translate}}
--- a/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html
@ -20,7 +20,7 @@
    <h2 translate>{{ importTitle }}</h2>
    <span fxFlex></span>
    <div [tb-help]="'entitiesImport'"></div>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            [disabled]="isImportData"
            type="button">
@ -119,13 +119,13 @@
      <mat-step>
        <ng-template matStepLabel>{{ 'action.done' | translate }}</ng-template>
        <div fxLayout="column">
-          <p class="mat-body-1" *ngIf="this.statistical?.created">
+          <p class="mat-body-2" *ngIf="this.statistical?.created">
            {{ translate.instant('import.message.create-entities', {count: this.statistical.created}) }}
          </p>
-          <p class="mat-body-1" *ngIf="this.statistical?.updated">
+          <p class="mat-body-2" *ngIf="this.statistical?.updated">
            {{ translate.instant('import.message.update-entities', {count: this.statistical.updated}) }}
          </p>
-          <p class="mat-body-1" style="margin-bottom: 0.8em" *ngIf="this.statistical?.errors">
+          <p class="mat-body-2" style="margin-bottom: 0.8em" *ngIf="this.statistical?.errors">
            {{ translate.instant('import.message.error-entities', {count: this.statistical.errors}) }}
          </p>
          <mat-expansion-panel class="advanced-logs" [expanded]="false"
--- a/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.scss
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.scss
@ -14,7 +14,7 @@
 * limitations under the License.
 */
 :host ::ng-deep {
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
    .mat-vertical-content {
      form {
        padding-bottom: 12px;
--- a/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html
@ -19,7 +19,7 @@
  <mat-toolbar color="primary">
    <h2 translate>{{ importTitle }}</h2>
    <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
--- a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
@ -46,9 +46,7 @@
  <ng-container matColumnDef="key">
    <mat-header-cell *matHeaderCellDef class="mat-column-key"> {{ 'import.column-key' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let column">
-      <mat-form-field floatLabel="always" hideRequiredMarker
-                      *ngIf="isColumnTypeDiffers(column.type)">
-        <mat-label></mat-label>
+      <mat-form-field *ngIf="isColumnTypeDiffers(column.type)">
        <input matInput [required]="isColumnTypeDiffers(column.type)"
               [(ngModel)]="column.key" (ngModelChange)="columnsUpdated()"
               placeholder="{{ 'import.column-value' | translate }}"/>
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
@ -50,9 +50,9 @@
              formControlName="defaultRuleChainId">
            </tb-rule-chain-autocomplete>
            <tb-dashboard-autocomplete
-              placeholder="{{'device-profile.mobile-dashboard' | translate}}"
+              label="{{'device-profile.mobile-dashboard' | translate}}"
              formControlName="defaultDashboardId">
-              <div tb-hint>{{'device-profile.mobile-dashboard-hint' | translate}}</div>
+              <span tb-hint>{{'device-profile.mobile-dashboard-hint' | translate}}</span>
            </tb-dashboard-autocomplete>
            <tb-queue-autocomplete
              [queueType]="serviceType"
@ -62,7 +62,7 @@
              labelText="device-profile.default-edge-rule-chain"
              formControlName="defaultEdgeRuleChainId"
              [ruleChainType]="edgeRuleChainType">
-              <div tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</div>
+              <span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
            </tb-rule-chain-autocomplete>
            <mat-form-field fxHide class="mat-block">
              <mat-label translate>device-profile.type</mat-label>
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss
@ -15,16 +15,16 @@
 */
@import "../../../../../scss/constants";

-:host-context(.tb-fullscreen-dialog .mat-dialog-container) {
+:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
  @media #{$mat-lt-sm} {
-    .mat-dialog-content {
+    .mat-mdc-dialog-content {
      max-height: 75vh;
    }
  }
 }

 :host ::ng-deep {
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
    display: flex;
    flex-direction: column;
    height: 100%;
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
@ -17,8 +17,7 @@
 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="alarmDurationPredicateValueFormGroup">
  <div fxFlex fxLayout="column" [fxShow]="!dynamicMode">
-    <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
-      <mat-label></mat-label>
+    <mat-form-field class="mat-block" subscriptSizing="dynamic">
      <input required type="number" matInput
             step="1" min="1" max="2147483647"
             formControlName="defaultValue"
@ -40,8 +39,7 @@
  <div fxFlex fxLayout="column" [fxShow]="dynamicMode">
    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
      <div fxFlex="40" fxLayout="column">
-        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
-          <mat-label></mat-label>
+        <mat-form-field class="mat-block" subscriptSizing="dynamic">
          <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
            <mat-option [value]="null">
              {{'filter.no-dynamic-value' | translate}}
@ -53,8 +51,7 @@
        </mat-form-field>
      </div>
      <div fxFlex fxLayout="column">
-        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block source-attribute">
-          <mat-label></mat-label>
+        <mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
          <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
        </mat-form-field>
      </div>
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.scss
@ -1,22 +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.
- */
-:host ::ng-deep {
-  .source-attribute {
-    .mat-form-field-infix{
-      width: 100%;
-    }
-  }
-}
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.ts
@ -28,7 +28,7 @@ import { AlarmConditionType } from '@shared/models/device.models';
@Component({
  selector: 'tb-alarm-duration-predicate-value',
  templateUrl: './alarm-duration-predicate-value.component.html',
-  styleUrls: ['./alarm-duration-predicate-value.component.scss'],
+  styleUrls: [],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
@ -30,8 +30,7 @@
    <div fxFlex fxLayout="column">
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
        <div fxFlex="40" fxLayout="column">
-          <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
-            <mat-label></mat-label>
+          <mat-form-field class="mat-block">
            <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
              <mat-option [value]="null">
                {{'filter.no-dynamic-value' | translate}}
@ -43,8 +42,7 @@
          </mat-form-field>
        </div>
        <div fxFlex fxLayout="column">
-          <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block source-attribute">
-            <mat-label></mat-label>
+          <mat-form-field class="mat-block source-attribute">
            <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
          </mat-form-field>
        </div>
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 700px;">
+<form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
  <mat-toolbar color="primary">
    <h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
    <span fxFlex></span>
@ -56,8 +56,7 @@
            >
            </tb-alarm-duration-predicate-value>
            <div fxFlex="23" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
-              <mat-form-field class="mat-block" hideRequiredMarker floatLabel="always">
-                <mat-label></mat-label>
+              <mat-form-field class="mat-block" subscriptSizing="dynamic">
                <mat-select formControlName="unit" required
                            placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
                  <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.scss
@ -15,7 +15,7 @@
 */
 :host {
  display: flex;
-  a.mat-button {
+  a.mat-mdc-button {
    &:hover, &:focus {
      border-bottom: none;
    }
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
@ -41,10 +41,10 @@
      {{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
    </span>
    <tb-dashboard-autocomplete class="tb-alarm-rule-dashboard dashboard"
-      floatLabel="never"
+      label=""
      placeholder="{{ 'device-profile.alarm-rule-no-mobile-dashboard' | translate }}"
      formControlName="dashboardId">
-      <div tb-hint>{{'device-profile.alarm-rule-mobile-dashboard-hint' | translate}}</div>
+      <span tb-hint>{{'device-profile.alarm-rule-mobile-dashboard-hint' | translate}}</span>
    </tb-dashboard-autocomplete>
  </div>
 </div>
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.scss
@ -34,7 +34,7 @@
  .tb-alarm-rule-dashboard {
    &.dashboard {
      width: 100%;
-      max-width: 350px;
+      max-width: 400px;
    }
  }
 }
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 800px;">
+<form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
  <mat-toolbar color="primary">
    <h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
    <span fxFlex></span>
@ -28,13 +28,9 @@
  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
  </mat-progress-bar>
  <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
-        <tb-alarm-schedule
-          formControlName="alarmSchedule">
-        </tb-alarm-schedule>
-      </div>
-    </fieldset>
+    <tb-alarm-schedule
+      formControlName="alarmSchedule">
+    </tb-alarm-schedule>
  </div>
  <div mat-dialog-actions fxLayoutAlign="end center">
    <button mat-button color="primary"
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.scss
@ -15,7 +15,7 @@
 */
 :host {
  display: flex;
-  a.mat-button {
+  a.mat-mdc-button {
    &:hover, &:focus {
      border-bottom: none;
    }
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
@ -16,8 +16,7 @@

 -->
 <section [formGroup]="alarmScheduleForm" fxLayout="column">
-  <mat-form-field class="mat-block" hideRequiredMarker floatLabel="always">
-    <mat-label> </mat-label>
+  <mat-form-field class="mat-block">
    <mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}">
      <mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType">
        {{ alarmScheduleTypeTranslate.get(alarmScheduleType) | translate }}
@ -36,13 +35,13 @@
    <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
      <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
      <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="16px">
-        <div fxLayout="row" fxLayoutGap="16px">
+      <div fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="8px">
+        <div fxLayout="row" fxLayoutGap="8px">
          <mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
            {{ dayOfWeekTranslationsArray[day] | translate }}
          </mat-checkbox>
        </div>
-        <div fxLayout="row" fxLayoutGap="16px">
+        <div fxLayout="row" fxLayoutGap="8px">
          <mat-checkbox *ngFor="let day of secondRowDays" [formControl]="weeklyRepeatControl(day)">
            {{ dayOfWeekTranslationsArray[day] | translate }}
          </mat-checkbox>
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
@ -137,7 +137,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
    if (this.disabled) {
      this.alarmScheduleForm.disable({emitEvent: false});
    } else {
-      this.alarmScheduleForm.enable({emitEvent: false});
+      this.updateValidators(this.alarmScheduleForm.get('type').value);
    }
  }

--- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss
@ -23,8 +23,8 @@
 }

 :host ::ng-deep {
-  .mat-form-field.severity {
-    .mat-form-field-infix {
+  .mat-mdc-form-field.severity {
+    .mat-mdc-form-field-infix {
      width: 160px;
    }
  }
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@ -65,20 +65,20 @@
        <section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
          <mat-form-field floatLabel="always" class="mat-block">
            <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
-            <mat-chip-list #relationTypesChipList [disabled]="disabled">
-              <mat-chip
+            <mat-chip-grid #relationTypesChipList [disabled]="disabled">
+              <mat-chip-row
                *ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
                (removed)="removeRelationType(key)">
                {{key}}
                <mat-icon matChipRemove>close</mat-icon>
-              </mat-chip>
+              </mat-chip-row>
              <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
                     style="max-width: 200px;"
                     [matChipInputFor]="relationTypesChipList"
                     [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                     matChipInputAddOnBlur
                     (matChipInputTokenEnd)="addRelationType($event)">
-            </mat-chip-list>
+            </mat-chip-grid>
            <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
          </mat-form-field>
        </section>
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
@ -15,8 +15,9 @@
    limitations under the License.

 -->
-<mat-form-field [formGroup]="selectAssetProfileFormGroup" class="mat-block">
-  <input matInput type="text" placeholder="{{ 'asset-profile.asset-profile' | translate }}"
+<mat-form-field [formGroup]="selectAssetProfileFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label>{{ 'asset-profile.asset-profile' | translate }}</mat-label>
+  <input matInput type="text"
         #assetProfileInput
         formControlName="assetProfile"
         (focusin)="onFocus()"
@ -30,13 +31,13 @@
  </a>
  <button *ngIf="selectAssetProfileFormGroup.get('assetProfile').value && !disabled"
          type="button"
-          matSuffix mat-button mat-icon-button aria-label="Clear"
+          matSuffix mat-icon-button aria-label="Clear"
          (click)="clear()">
    <mat-icon class="material-icons">close</mat-icon>
  </button>
  <button *ngIf="selectAssetProfileFormGroup.get('assetProfile').value && !disabled && editProfileEnabled"
          type="button"
-          matSuffix mat-button mat-icon-button aria-label="Edit"
+          matSuffix mat-icon-button aria-label="Edit"
          matTooltip="{{ 'asset-profile.edit' | translate }}"
          matTooltipPosition="above"
          (click)="editAssetProfile($event)">
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.scss
@ -14,7 +14,7 @@
 * limitations under the License.
 */
 :host{
-  .mat-icon-button a {
+  .mat-mdc-icon-button a {
    border-bottom: none;
    color: inherit;
  }
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts
@ -45,6 +45,7 @@ import { AssetProfileId } from '@shared/models/id/asset-profile-id';
 import { AssetProfile, AssetProfileInfo } from '@shared/models/asset.models';
 import { AssetProfileService } from '@core/http/asset-profile.service';
 import { AssetProfileDialogComponent, AssetProfileDialogData } from './asset-profile-dialog.component';
+import { SubscriptSizing } from '@angular/material/form-field';

@Component({
  selector: 'tb-asset-profile-autocomplete',
@ -62,6 +63,9 @@ export class AssetProfileAutocompleteComponent implements ControlValueAccessor,

  modelValue: AssetProfileId | null;

+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed';
+
  @Input()
  selectDefaultProfile = false;

--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
@ -69,9 +69,9 @@
        formControlName="defaultRuleChainId">
      </tb-rule-chain-autocomplete>
      <tb-dashboard-autocomplete
-        placeholder="{{'asset-profile.mobile-dashboard' | translate}}"
+        label="{{'asset-profile.mobile-dashboard' | translate}}"
        formControlName="defaultDashboardId">
-        <div tb-hint>{{'asset-profile.mobile-dashboard-hint' | translate}}</div>
+        <span tb-hint>{{'asset-profile.mobile-dashboard-hint' | translate}}</span>
      </tb-dashboard-autocomplete>
      <tb-queue-autocomplete
        [queueType]="serviceType"
@ -81,7 +81,7 @@
        labelText="asset-profile.default-edge-rule-chain"
        formControlName="defaultEdgeRuleChainId"
        [ruleChainType]="edgeRuleChainType">
-        <div tb-hint>{{'asset-profile.default-edge-rule-chain-hint' | translate}}</div>
+        <span tb-hint>{{'asset-profile.default-edge-rule-chain-hint' | translate}}</span>
      </tb-rule-chain-autocomplete>
      <tb-image-input fxFlex
                      label="{{'asset-profile.image' | translate}}"
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
@ -15,8 +15,9 @@
    limitations under the License.

 -->
-<mat-form-field [formGroup]="selectDeviceProfileFormGroup" class="mat-block">
-  <input matInput type="text" placeholder="{{ 'device-profile.device-profile' | translate }}"
+<mat-form-field [formGroup]="selectDeviceProfileFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label>{{ 'device-profile.device-profile' | translate }}</mat-label>
+  <input matInput type="text"
         #deviceProfileInput
         formControlName="deviceProfile"
         (focusin)="onFocus()"
@ -30,13 +31,13 @@
  </a>
  <button *ngIf="selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled"
          type="button"
-          matSuffix mat-button mat-icon-button aria-label="Clear"
+          matSuffix mat-icon-button aria-label="Clear"
          (click)="clear()">
    <mat-icon class="material-icons">close</mat-icon>
  </button>
  <button *ngIf="selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled && editProfileEnabled"
          type="button"
-          matSuffix mat-button mat-icon-button aria-label="Edit"
+          matSuffix mat-icon-button aria-label="Edit"
          matTooltip="{{ 'device-profile.edit' | translate }}"
          matTooltipPosition="above"
          (click)="editDeviceProfile($event)">
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.scss
@ -14,7 +14,7 @@
 * limitations under the License.
 */
 :host{
-  .mat-icon-button a {
+  .mat-mdc-icon-button a {
    border-bottom: none;
    color: inherit;
  }
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts
@ -48,6 +48,7 @@ import { MatAutocomplete } from '@angular/material/autocomplete';
 import { AddDeviceProfileDialogComponent, AddDeviceProfileDialogData } from './add-device-profile-dialog.component';
 import { emptyPageData } from '@shared/models/page/page-data';
 import { getEntityDetailsPageURL } from '@core/utils';
+import { SubscriptSizing } from '@angular/material/form-field';

@Component({
  selector: 'tb-device-profile-autocomplete',
@ -65,6 +66,9 @@ export class DeviceProfileAutocompleteComponent implements ControlValueAccessor,

  modelValue: DeviceProfileId | null;

+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed';
+
  @Input()
  selectDefaultProfile = false;

--- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
@ -69,9 +69,9 @@
        formControlName="defaultRuleChainId">
      </tb-rule-chain-autocomplete>
      <tb-dashboard-autocomplete
-        placeholder="{{'device-profile.mobile-dashboard' | translate}}"
+        label="{{'device-profile.mobile-dashboard' | translate}}"
        formControlName="defaultDashboardId">
-        <div tb-hint>{{'device-profile.mobile-dashboard-hint' | translate}}</div>
+        <span tb-hint>{{'device-profile.mobile-dashboard-hint' | translate}}</span>
      </tb-dashboard-autocomplete>
      <tb-queue-autocomplete
        [queueType]="serviceType"
@ -81,7 +81,7 @@
        labelText="device-profile.default-edge-rule-chain"
        formControlName="defaultEdgeRuleChainId"
        [ruleChainType]="edgeRuleChainType">
-        <div tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</div>
+        <span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
      </tb-rule-chain-autocomplete>
      <tb-ota-package-autocomplete
        [useFullEntityId]="true"