UI: Angular 15 migration

4 years ago · 8711048ca6
83 changed files with 304 additions and 454 deletions
--- 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,7 +16,8 @@
 -->
 <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"
--- 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,17 +58,12 @@ div.tb-dashboard-page.mobile-app {
 }
 tb-dashboard-toolbar {
-  mat-fab-toolbar {
+  .mat-fab-toolbar {
    mat-fab-trigger {
      .mat-mdc-fab {
        width: 36px;
        height: 36px;
        margin: 4px 0 0 4px;
        /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
 */
        .mat-button-wrapper {
          padding: 0;
        }
      }
    }
@ -81,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 {
@ -107,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 {
--- 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/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-form-field hideRequiredMarker fxFlex="30" class="mat-block">
    <mat-label></mat-label>
    <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-form-field hideRequiredMarker class="mat-block">
          <mat-label></mat-label>
          <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-form-field hideRequiredMarker class="mat-block">
          <mat-label></mat-label>
          <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-form-field hideRequiredMarker class="mat-block">
          <mat-label></mat-label>
          <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-form-field hideRequiredMarker class="mat-block">
          <mat-label></mat-label>
          <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,25 +20,15 @@
 }
 :host ::ng-deep {
-  mat-form-field {
+  .mat-mdc-form-field {
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
+    .mat-mdc-form-field-subscript-wrapper {
- */
+      &:before {
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
+        content: none;
 */
    .mat-form-field-wrapper {
      padding-bottom: 0;
      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
      .mat-form-field-infix {
        border-top-width: 0.2em;
        width: auto;
        min-width: auto;
      }
      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
      .mat-form-field-underline {
        bottom: 0;
      }
    }
    .mat-mdc-form-field-infix {
      width: auto;
      min-width: auto;
    }
  }
 }
--- 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,26 +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 {
  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
  .mat-form-field-infix {
    border-top: none;
  }
 }
--- 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/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>
@ -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,17 +14,13 @@
 * limitations under the License.
 */
 :host ::ng-deep {
-  .entity-key {
+  .mat-mdc-form-field.tb-value-type {
-    mat-form-field {
+    mat-select-trigger {
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
+      .mat-icon {
- */
+        vertical-align: middle;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
+        margin-right: 8px;
- */
+        svg {
-      .mat-form-field-wrapper {
+          vertical-align: initial;
        /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
        .mat-form-field-infix {
          width: auto;
        }
      }
    }
--- 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-form-field hideRequiredMarker fxFlex="30" class="mat-block">
    <mat-label></mat-label>
    <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-form-field hideRequiredMarker fxFlex class="mat-block">
      <mat-label></mat-label>
      <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/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/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/asset-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
@ -16,7 +16,8 @@
 -->
 <mat-form-field [formGroup]="selectAssetProfileFormGroup" class="mat-block">
-  <input matInput type="text" placeholder="{{ 'asset-profile.asset-profile' | translate }}"
+  <mat-label>{{ 'asset-profile.asset-profile' | translate }}</mat-label>
  <input matInput type="text"
         #assetProfileInput
         formControlName="assetProfile"
         (focusin)="onFocus()"
--- 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
@ -16,7 +16,8 @@
 -->
 <mat-form-field [formGroup]="selectDeviceProfileFormGroup" class="mat-block">
-  <input matInput type="text" placeholder="{{ 'device-profile.device-profile' | translate }}"
+  <mat-label>{{ 'device-profile.device-profile' | translate }}</mat-label>
  <input matInput type="text"
         #deviceProfileInput
         formControlName="deviceProfile"
         (focusin)="onFocus()"
--- 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"
--- a/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
@ -17,7 +17,7 @@
 -->
 <section [formGroup]="parentForm">
  <mat-form-field class="mat-block" fxFlex>
-    <mat-label>{{ isDeviceSetting ? ("device-profile.power-saving-mode" | translate) : " "}}</mat-label>
+    <mat-label *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode" | translate }}</mat-label>
    <mat-select formControlName="powerMode">
      <mat-option [value]="null" *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode-type.default" | translate }}</mat-option>
      <mat-option *ngFor="let powerMod of powerMods" [value]="powerMod">
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
@ -16,7 +16,8 @@
 -->
 <mat-form-field [formGroup]="selectRuleChainFormGroup" class="mat-block">
-  <input matInput type="text" placeholder="{{ labelText | translate }}"
+  <mat-label>{{ labelText | translate }}</mat-label>
  <input matInput type="text"
         #ruleChainInput
         formControlName="ruleChainId"
         (focusin)="onFocus()"
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
@ -17,13 +17,13 @@
 -->
 <div>
  <mat-card appearance="outlined" class="auto-commit-settings settings-card">
-    <mat-card-title>
+    <mat-card-header>
-      <div fxLayout="row">
+      <mat-card-title>
        <span class="mat-headline-5" translate>admin.auto-commit-settings</span>
-        <span fxFlex></span>
+      </mat-card-title>
-        <div tb-help="autoCommitSettings"></div>
+      <span fxFlex></span>
-      </div>
+      <div tb-help="autoCommitSettings"></div>
-    </mat-card-title>
+    </mat-card-header>
    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
    </mat-progress-bar>
    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss
@ -14,9 +14,7 @@
 * limitations under the License.
 */
 :host {
-  /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.
+  .mat-mdc-card.auto-commit-settings {
 */
  mat-card.auto-commit-settings {
    margin: 8px;
    .mat-divider {
      position: relative;
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
@ -103,6 +103,7 @@
              tooltipPosition="above"
              icon="content_paste"
              [style]="{
                 padding: '4px',
                 'font-size': '16px',
                 color: 'rgba(0,0,0,.87)'
              }">
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
@ -17,13 +17,13 @@
 -->
 <div>
  <mat-card appearance="outlined" class="repository-settings" [ngClass]="{'settings-card': !detailsMode}" [ngStyle]="popoverComponent ? {boxShadow: 'none', width: '800px'} : {}">
-    <mat-card-title>
+    <mat-card-header>
-      <div fxLayout="row">
+      <mat-card-title>
        <span class="mat-headline-5" translate>admin.repository-settings</span>
-        <span fxFlex></span>
+      </mat-card-title>
-        <div tb-help="repositorySettings"></div>
+      <span fxFlex></span>
-      </div>
+      <div tb-help="repositorySettings"></div>
-    </mat-card-title>
+    </mat-card-header>
    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
    </mat-progress-bar>
    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss
@ -14,14 +14,10 @@
 * limitations under the License.
 */
 :host {
-  /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.
+  .mat-mdc-card.repository-settings {
 */
  mat-card.repository-settings {
    margin: 8px;
  }
-  /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
+  .mat-mdc-checkbox {
 */
  mat-checkbox {
    padding-bottom: 16px;
  }
  .fields-group {
@ -41,10 +37,3 @@
    }
  }
 }
 :host ::ng-deep {
  /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
 */
  .mat-checkbox-layout {
    white-space: normal !important;
  }
 }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@ -384,94 +384,99 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
  const mdDarkDivider = defaultColor.setAlpha(0.12).toRgbString();
  const cssString =
-    '.mat-input-element::placeholder {\n' +
+    '.mat-mdc-input-element::placeholder {\n' +
    '   color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-input-element::-moz-placeholder {\n' +
+    '.mat-mdc-input-element::-moz-placeholder {\n' +
    '   color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-input-element::-webkit-input-placeholder {\n' +
+    '.mat-mdc-input-element::-webkit-input-placeholder {\n' +
    '   color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-input-element:-ms-input-placeholder {\n' +
+    '.mat-mdc-input-element:-ms-input-placeholder {\n' +
    '   color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
    'mat-toolbar.mat-mdc-table-toolbar {\n' +
    'color: ' + mdDark + ';\n' +
    '}\n' +
-    'mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) button.mat-icon-button mat-icon {\n' +
+    'mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) button.mat-mdc-icon-button mat-icon {\n' +
    'color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-tab-label {\n' +
+    '.mat-mdc-tab .mdc-tab__text-label {\n' +
    'color: ' + mdDark + ';\n' +
    '}\n' +
-    '.mat-tab-header-pagination-chevron {\n' +
+    '.mat-mdc-tab-header-pagination-chevron {\n' +
    'border-color: ' + mdDark + ';\n' +
    '}\n' +
-    '.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n' +
+    '.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {\n' +
    'border-color: ' + mdDarkDisabled2 + ';\n' +
    '}\n' +
-    '.mat-table .mat-header-row {\n' +
+    '.mat-mdc-table .mat-mdc-header-row {\n' +
    'background-color: ' + origBackgroundColor + ';\n' +
    '}\n' +
-    '.mat-table .mat-header-cell {\n' +
+    '.mat-mdc-table .mat-mdc-header-cell {\n' +
    'color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-table .mat-header-cell .mat-sort-header-arrow {\n' +
+    '.mat-mdc-table .mat-mdc-header-cell .mat-sort-header-arrow {\n' +
    'color: ' + mdDarkDisabled + ';\n' +
    '}\n' +
-    '.mat-table .mat-cell, .mat-table .mat-header-cell {\n' +
+    '.mat-mdc-table .mat-mdc-cell, .mat-mdc-table .mat-mdc-header-cell {\n' +
    'border-bottom-color: ' + mdDarkDivider + ';\n' +
    '}\n' +
-    '.mat-table .mat-cell .mat-checkbox-frame, .mat-table .mat-header-cell .mat-checkbox-frame {\n' +
+    '.mat-mdc-table .mat-mdc-cell .mat-mdc-checkbox ' +
    '.mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])'+
    '~.mdc-checkbox__background, ' +
    '.mat-table .mat-header-cell .mat-mdc-checkbox ' +
    '.mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])'+
    '~.mdc-checkbox__background {\n' +
    'border-color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-table .mat-row .mat-cell.mat-table-sticky {\n' +
+    '.mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky {\n' +
    'transition: background-color .2s;\n' +
    '}\n' +
-    '.mat-table .mat-row.tb-current-entity {\n' +
+    '.mat-mdc-table .mat-mdc-row.tb-current-entity {\n' +
    'background-color: ' + currentEntityColor + ';\n' +
    '}\n' +
-    '.mat-table .mat-row.tb-current-entity .mat-cell.mat-table-sticky {\n' +
+    '.mat-mdc-table .mat-mdc-row.tb-current-entity .mat-mdc-cell.mat-mdc-table-sticky {\n' +
    'background-color: ' + currentEntityStickyColor + ';\n' +
    '}\n' +
-    '.mat-table .mat-row:hover:not(.tb-current-entity) {\n' +
+    '.mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) {\n' +
    'background-color: ' + hoverColor + ';\n' +
    '}\n' +
-    '.mat-table .mat-row:hover:not(.tb-current-entity) .mat-cell.mat-table-sticky {\n' +
+    '.mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky {\n' +
    'background-color: ' + hoverStickyColor + ';\n' +
    '}\n' +
-    '.mat-table .mat-row.mat-row-select.mat-selected:not(.tb-current-entity) {\n' +
+    '.mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) {\n' +
    'background-color: ' + selectedColor + ';\n' +
    '}\n' +
-    '.mat-table .mat-row.mat-row-select.mat-selected:not(.tb-current-entity) .mat-cell.mat-table-sticky {\n' +
+    '.mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky {\n' +
    'background-color: ' + selectedStickyColor + ';\n' +
    '}\n' +
-    '.mat-table .mat-row .mat-cell.mat-table-sticky, .mat-table .mat-header-cell.mat-table-sticky {\n' +
+    '.mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky, .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky {\n' +
    'background-color: ' + origBackgroundColor + ';\n' +
    '}\n' +
-    '.mat-table .mat-cell {\n' +
+    '.mat-mdc-table .mat-mdc-cell {\n' +
    'color: ' + mdDark + ';\n' +
    '}\n' +
-    '.mat-table .mat-cell button.mat-icon-button mat-icon {\n' +
+    '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button mat-icon {\n' +
    'color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-table .mat-cell button.mat-icon-button[disabled][disabled] mat-icon {\n' +
+    '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button[disabled][disabled] mat-icon {\n' +
    'color: ' + mdDarkDisabled + ';\n' +
    '}\n' +
    '.mat-divider {\n' +
    'border-top-color: ' + mdDarkDivider + ';\n' +
    '}\n' +
-    '.mat-paginator {\n' +
+    '.mat-mdc-paginator {\n' +
    'color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-paginator button.mat-icon-button {\n' +
+    '.mat-mdc-paginator button.mat-mdc-icon-button {\n' +
    'color: ' + mdDarkSecondary + ';\n' +
    '}\n' +
-    '.mat-paginator button.mat-icon-button[disabled][disabled] {\n' +
+    '.mat-mdc-paginator button.mat-mdc-icon-button[disabled][disabled] {\n' +
    'color: ' + mdDarkDisabled + ';\n' +
    '}\n' +
-    '.mat-paginator .mat-select-value {\n' +
+    '.mat-mdc-paginator .mat-mdc-select-value {\n' +
    'color: ' + mdDarkSecondary + ';\n' +
    '}';
  return cssString;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@ -38,6 +38,7 @@
      </div>
    </mat-toolbar>
    <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex
                   mat-stretch-tabs="false"
                   [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
      <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex; let index = index;" [label]="getTabLabel(source)">
        <ng-template [ngIf]="isActiveTab(index)">
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@ -55,8 +55,7 @@
             fxFlex [activeComponent]="activeComponent" class="mat-toolbar-tools">
        </tb-breadcrumb>
        <div [fxShow]="displaySearchMode()" fxFlex fxLayout="row" class="tb-dark">
-          <mat-form-field fxFlex floatLabel="always">
+          <mat-form-field fxFlex class="tb-appearance-transparent">
            <mat-label></mat-label>
            <input #searchInput matInput
                   [(ngModel)]="searchText"
                   placeholder="{{ 'common.enter-search' | translate }}"/>
--- a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
@ -17,11 +17,11 @@
 -->
 <div>
  <mat-card appearance="outlined" class="settings-card">
-    <mat-card-title>
+    <mat-card-header>
-      <div fxLayout="row">
+      <mat-card-title>
        <span class="mat-headline-5" translate>admin.home-settings</span>
-      </div>
+      </mat-card-title>
-    </mat-card-title>
+    </mat-card-header>
    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
    </mat-progress-bar>
    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
@ -32,7 +32,7 @@
            <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
              <tb-dashboard-autocomplete
                fxFlex
-                placeholder="{{ 'dashboard.home-dashboard' | translate }}"
+                label="{{ 'dashboard.home-dashboard' | translate }}"
                formControlName="dashboardId"
                [dashboardsScope]="'tenant'"
                [selectFirstDashboard]="false"
--- a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.scss
@ -26,9 +26,7 @@
        padding-bottom: 12px;
      }
    }
-    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
+    .mat-mdc-checkbox {
 */
    mat-checkbox {
      @media #{$mat-gt-sm} {
        margin-top: 16px;
      }
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
+++ b/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
@ -92,7 +92,7 @@
          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
            <tb-dashboard-autocomplete
              fxFlex
-              placeholder="{{ 'dashboard.home-dashboard' | translate }}"
+              label="{{ 'dashboard.home-dashboard' | translate }}"
              formControlName="homeDashboardId"
              [dashboardsScope]="'customer'"
              [customerId]="entity?.id.id"
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.scss
@ -26,9 +26,7 @@
        padding-bottom: 12px;
      }
    }
-    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
+    .mat-mdc-checkbox {
 */
    mat-checkbox {
      @media #{$mat-gt-sm} {
        margin-top: 16px;
      }
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts
@ -73,6 +73,7 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot
          name: this.translate.instant('ota-update.copy-direct-url'),
          icon: 'content_paste',
          style: {
            padding: '4px',
            'font-size': '16px',
            color: 'rgba(0,0,0,.87)'
          },
@ -91,6 +92,7 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot
        name: this.translate.instant('ota-update.copy-checksum'),
        icon: 'content_paste',
        style: {
          padding: '4px',
          'font-size': '16px',
          color: 'rgba(0,0,0,.87)'
        },
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
@ -65,7 +65,7 @@
          <section class="tb-home-dashboard" fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="!isSysAdmin()">
            <tb-dashboard-autocomplete
              fxFlex
-              placeholder="{{ 'dashboard.home-dashboard' | translate }}"
+              label="{{ 'dashboard.home-dashboard' | translate }}"
              formControlName="homeDashboardId"
              [dashboardsScope]="user?.authority === authorities.TENANT_ADMIN ? 'tenant' : 'customer'"
              [tenantId]="user?.tenantId?.id"
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@ -23,8 +23,9 @@
    <div class="tb-rulechain-layout" fxFlex fxLayout="row">
      <section fxLayout="row"
               class="tb-header-buttons tb-library-open" [fxShow]="!isLibraryOpen">
-        <button mat-icon-button color="primary"
+        <button color="primary"
-                class="tb-btn-header tb-btn-open-library mat-fab"
+                mat-mini-fab
                class="tb-btn-header tb-btn-open-library"
                (click)="isLibraryOpen = true"
                matTooltip="{{ 'rulenode.open-node-library' | translate }}"
                matTooltipPosition="above">
@ -45,8 +46,7 @@
                matTooltipPosition="above">
                <mat-icon>search</mat-icon>
              </button>
-              <mat-form-field fxFlex floatLabel="always">
+              <mat-form-field fxFlex class="tb-appearance-transparent">
                <mat-label></mat-label>
                <input #ruleNodeSearchInput matInput
                       [(ngModel)]="ruleNodeTypeSearch"
                       placeholder="{{'rulenode.search' | translate}}"/>
@ -111,7 +111,7 @@
            <div class="details-buttons">
              <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
            </div>
-            <mat-tab-group fxFlex class="tb-absolute-fill tb-rulenode-details" [(selectedIndex)]="selectedRuleNodeTabIndex">
+            <mat-tab-group fxFlex mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details" [(selectedIndex)]="selectedRuleNodeTabIndex">
              <mat-tab label="{{ 'rulenode.details' | translate }}">
                <tb-rule-node #tbRuleNode
                              [ruleNode]="editingRuleNode"
@ -166,18 +166,16 @@
        <mat-drawer-content class="tb-rulechain-graph-content">
          <button #versionControlButton
                  *ngIf="!isImport"
                  mat-button
                  color="primary"
                  type="button"
-                  mat-icon-button class="mat-fab version-control-button"
+                  mat-mini-fab class="version-control-button"
                  (click)="toggleVersionControl($event, versionControlButton)"
                  matTooltip="{{'version-control.version-control' | translate}}"
                  matTooltipPosition="above">
            <mat-icon>history</mat-icon>
          </button>
-          <button mat-button
+          <button type="button"
-                  type="button"
+                  mat-icon-button class="tb-fullscreen-button tb-mat-40"
                  mat-icon-button class="tb-fullscreen-button"
                  (click)="isFullscreen = !isFullscreen"
                  matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                  matTooltipPosition="above">
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
@ -34,7 +34,7 @@
    }
  }
-  button.mat-mdc-button.mat-mdc-icon-button.tb-fullscreen-button {
+  button.mdc-icon-button.tb-fullscreen-button {
    position: absolute;
    top: 10px;
    right: 10px;
@ -45,20 +45,13 @@
    z-index: 2;
  }
-  button.mat-mdc-button.mat-mdc-icon-button.version-control-button {
+  button.mdc-fab.version-control-button {
    position: absolute;
    top: 10px;
    right: 60px;
    opacity: .85;
    margin: 0 6px;
    z-index: 2;
    &.mat-mdc-fab {
      /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
 */
      .mat-button-wrapper {
        padding: 0;
      }
    }
  }
  section.tb-header-buttons.tb-library-open {
@ -67,16 +60,7 @@
    left: 0;
    z-index: 2;
    pointer-events: none;
-
+    .mdc-fab.tb-btn-open-library {
    .mat-mdc-fab {
      /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
 */
      .mat-button-wrapper {
        padding: 0;
      }
    }
    .mat-mdc-button.tb-btn-open-library {
      top: 0;
      left: 0;
      width: 36px;
@ -102,15 +86,7 @@
        padding: 0 6px;
        font-size: 14px;
-        .mat-mdc-form-field {
+        .mat-mdc-icon-button {
          /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
          .mat-form-field-infix {
            width: auto;
          }
        }
        .mat-mdc-button.mat-mdc-icon-button {
          margin: 0;
          &.tb-small {
@ -345,13 +321,11 @@
  }
 }
-.tb-rule-chain-context-menu {
+.tb-rule-chain-context-menu.mat-mdc-menu-panel.mdc-menu-surface {
  min-width: 320px;
  max-height: 404px;
  border-radius: 8px;
  margin-left: -20px;
  /*TODO(mdc-migration): The following rule targets internal classes of menu that may no longer apply for the MDC version.
 */
  &.mat-menu-below {
    margin-top: -60px;
  }
@ -389,17 +363,17 @@
    }
    .mat-icon {
-      padding-right: 10px;
+      margin: auto 10px auto 2px;
      padding-left: 2px;
      margin: auto;
    }
    .tb-context-menu-title {
      font-weight: 500;
      line-height: normal;
    }
    .tb-context-menu-subtitle {
      font-size: 12px;
      line-height: normal;
    }
  }
 }
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
@ -17,21 +17,31 @@
 import {
  AfterViewInit,
  Component,
-  ElementRef, EventEmitter,
+  ElementRef,
  EventEmitter,
  HostBinding,
  Inject,
  OnDestroy,
  OnInit,
-  QueryList, Renderer2,
+  QueryList,
  Renderer2,
  SkipSelf,
  ViewChild,
-  ViewChildren, ViewContainerRef,
+  ViewChildren,
  ViewContainerRef,
  ViewEncapsulation
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import {
  FormGroupDirective,
  NgForm,
  UntypedFormBuilder,
  UntypedFormControl,
  UntypedFormGroup,
  Validators
 } from '@angular/forms';
 import { HasDirtyFlag } from '@core/guards/confirm-on-exit.guard';
 import { TranslateService } from '@ngx-translate/core';
 import { ErrorStateMatcher } from '@angular/material/core';
@ -54,7 +64,9 @@ import {
  FcRuleNode,
  FcRuleNodeType,
  getRuleNodeHelpLink,
-  LinkLabel, outputNodeClazz, ruleChainNodeClazz,
+  LinkLabel,
  outputNodeClazz,
  ruleChainNodeClazz,
  RuleNode,
  RuleNodeComponentDescriptor,
  RuleNodeType,
@ -74,12 +86,10 @@ import { MatMenuTrigger } from '@angular/material/menu';
 import { ItemBufferService, RuleNodeConnection } from '@core/services/item-buffer.service';
 import { Hotkey } from 'angular2-hotkeys';
 import { DebugEventType, EventType } from '@shared/models/event.models';
-import Timeout = NodeJS.Timeout;
+import { MatMiniFabButton } from '@angular/material/button';
 import { MatButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { EntityVersionCreateComponent } from '@home/components/vc/entity-version-create.component';
 import { VersionCreationResult } from '@shared/models/vc.models';
 import { VersionControlComponent } from '@home/components/vc/version-control.component';
 import Timeout = NodeJS.Timeout;
@Component({
  selector: 'tb-rulechain-page',
@ -1534,7 +1544,7 @@ export class RuleChainPageComponent extends PageComponent
    }).afterClosed();
  }
-  toggleVersionControl($event: Event, versionControlButton: MatButton) {
+  toggleVersionControl($event: Event, versionControlButton: MatMiniFabButton) {
    if ($event) {
      $event.stopPropagation();
    }
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
@ -74,7 +74,7 @@
          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
            <tb-dashboard-autocomplete
              fxFlex
-              placeholder="{{ 'dashboard.home-dashboard' | translate }}"
+              label="{{ 'dashboard.home-dashboard' | translate }}"
              formControlName="homeDashboardId"
              [dashboardsScope]="'tenant'"
              [tenantId]="entity?.id.id"
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.scss
@ -26,9 +26,7 @@
        padding-bottom: 12px;
      }
    }
-    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
+    .mat-mdc-checkbox {
 */
    mat-checkbox {
      @media #{$mat-gt-sm} {
        margin-top: 16px;
      }
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@ -101,7 +101,7 @@
          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
            <tb-dashboard-autocomplete
              fxFlex
-              placeholder="{{ 'user.default-dashboard' | translate }}"
+              label="{{ 'user.default-dashboard' | translate }}"
              formControlName="defaultDashboardId"
              [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
              [tenantId]="entity?.tenantId?.id"
@ -115,7 +115,7 @@
          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
            <tb-dashboard-autocomplete
              fxFlex
-              placeholder="{{ 'dashboard.home-dashboard' | translate }}"
+              label="{{ 'dashboard.home-dashboard' | translate }}"
              formControlName="homeDashboardId"
              [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
              [tenantId]="entity?.tenantId?.id"
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.scss
@ -26,9 +26,7 @@
        padding-bottom: 12px;
      }
    }
-    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
+    .mat-mdc-checkbox {
 */
    mat-checkbox {
      @media #{$mat-gt-sm} {
        margin-top: 16px;
      }
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.scss
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
@ -19,6 +19,7 @@
    width: 32px;
    line-height: 32px;
    padding: 4px;
    vertical-align: middle;
    .mat-icon.copied{
      color: #00C851 !important;
    }
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.ts
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
@ -18,6 +18,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angu
 import { ClipboardService } from 'ngx-clipboard';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { TranslateService } from '@ngx-translate/core';
 import { ThemePalette } from '@angular/material/core';
@Component({
  selector: 'tb-copy-button',
@ -52,7 +53,7 @@ export class CopyButtonComponent {
  style: {[key: string]: any} = {};
  @Input()
-  color: string;
+  color: ThemePalette;
  @Output()
  successCopied = new EventEmitter<string>();
--- a/ui-ngx/src/app/shared/components/css.component.scss
+++ b/ui-ngx/src/app/shared/components/css.component.scss
@ -45,7 +45,7 @@
        margin-right: 4px;
      }
    }
-    button.mat-mdc-button, button.mat-mdc-icon-button, button.mat-icon-button.tb-mat-32 {
+    button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
      background: rgba(220, 220, 220, .35);
      align-items: center;
      vertical-align: middle;
@ -58,6 +58,9 @@
        color: #7b7b7b;
      }
    }
    button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
      height: 23px;
    }
    .tb-help-popup-button-loading {
      background: #f3f3f3;
    }
--- a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
@ -16,9 +16,10 @@
 -->
 <mat-form-field [formGroup]="selectDashboardFormGroup" class="mat-block" [floatLabel]="floatLabel">
-  <mat-label>{{ placeholder || ('dashboard.dashboard' | translate) }}</mat-label>
+  <mat-label *ngIf="label">{{ label }}</mat-label>
  <input matInput type="text"
         #dashboardInput
         placeholder="{{ placeholder }}"
         formControlName="dashboard"
         (focusin)="onFocus()"
         [required]="required"
--- a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts
@ -55,6 +55,9 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
  @Input()
  selectFirstDashboard = false;
  @Input()
  label = this.translate.instant('dashboard.dashboard');
  @Input()
  placeholder: string;
--- a/ui-ngx/src/app/shared/components/dashboard-select.component.scss
+++ b/ui-ngx/src/app/shared/components/dashboard-select.component.scss
@ -16,9 +16,7 @@
 :host {
  width: min-content; //for Safari
  min-width: 52px;
-  /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
+  .mat-mdc-select {
 */
  mat-select {
    max-width: 300px;
    pointer-events: all;
  }
@ -34,15 +32,12 @@
 }
 :host ::ng-deep {
-  /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
+  .mat-mdc-select {
- */
+    .mat-mdc-select-value {
  /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
 */
  mat-select {
    /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
 */
    .mat-select-value {
      max-width: 282px;
    }
    .mat-mdc-select-arrow {
      width: 24px;
    }
  }
 }
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
@ -16,7 +16,8 @@
 -->
 <mat-form-field [formGroup]="selectEntityFormGroup" class="mat-block" [appearance]="appearance">
-  <input matInput type="text" placeholder="{{ entityText | translate }}"
+  <mat-label>{{ entityText | translate }}</mat-label>
  <input matInput type="text"
         #entityInput
         formControlName="entity"
         (focusin)="onFocus()"
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
@ -15,7 +15,7 @@
    limitations under the License.
 -->
-<mat-form-field [formGroup]="keysListFormGroup" class="mat-block">
+<mat-form-field [formGroup]="keysListFormGroup" class="mat-block tb-chip-list">
  <mat-chip-grid #chipList>
    <mat-chip-row
      *ngFor="let key of modelValue"
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.scss
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.scss
@ -1,33 +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 {
  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
  .mat-form-field-flex {
    padding-top: 0;
    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
    .mat-form-field-infix {
      border-top: 0;
    }
  }
 }
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.ts
@ -33,7 +33,7 @@ import { isEqual } from '@core/utils';
@Component({
  selector: 'tb-entity-keys-list',
  templateUrl: './entity-keys-list.component.html',
-  styleUrls: ['./entity-keys-list.component.scss'],
+  styleUrls: [],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
--- a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.scss
+++ b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.scss
@ -19,9 +19,7 @@
 :host ::ng-deep {
  tb-entity-list {
    &.tb-not-empty {
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
+      .mat-mdc-form-field-flex {
 */
      .mat-form-field-flex {
        padding-top: 0;
      }
    }
--- a/ui-ngx/src/app/shared/components/entity/entity-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-list.component.html
@ -15,7 +15,7 @@
    limitations under the License.
 -->
-<mat-form-field [formGroup]="entityListFormGroup" class="mat-block">
+<mat-form-field [formGroup]="entityListFormGroup" class="mat-block tb-chip-list">
  <mat-chip-grid #chipList formControlName="entities">
    <mat-chip-row
      *ngFor="let entity of entities"
--- a/ui-ngx/src/app/shared/components/entity/entity-list.component.scss
+++ b/ui-ngx/src/app/shared/components/entity/entity-list.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 ::ng-deep {
  .mat-mdc-form-field {
    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
    .mat-form-field-infix {
      border-top: none;
    }
  }
 }
--- a/ui-ngx/src/app/shared/components/entity/entity-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-list.component.ts
@ -42,7 +42,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
@Component({
  selector: 'tb-entity-list',
  templateUrl: './entity-list.component.html',
-  styleUrls: ['./entity-list.component.scss'],
+  styleUrls: [],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
@ -15,7 +15,7 @@
    limitations under the License.
 -->
-<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block">
+<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block tb-chip-list">
  <mat-chip-grid #chipList formControlName="entitySubtypeList">
    <mat-chip-row
      *ngFor="let entitySubtype of entitySubtypeList"
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.scss
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.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 ::ng-deep {
  .mat-mdc-form-field {
    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
    .mat-form-field-infix {
      border-top: none;
    }
  }
 }
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
@ -35,7 +35,7 @@ import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
@Component({
  selector: 'tb-entity-subtype-list',
  templateUrl: './entity-subtype-list.component.html',
-  styleUrls: ['./entity-subtype-list.component.scss'],
+  styleUrls: [],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
--- a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.scss
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.scss
@ -20,15 +20,10 @@
 }
 :host ::ng-deep {
-  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
+  .mat-mdc-form-field-infix {
 */
  .mat-form-field-infix {
     width: 100%;
  }
-  /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
+  .mat-mdc-select-value {
 */
  .mat-select-value {
    max-width: 200px;
    min-width: 100px;
  }
 }
--- a/ui-ngx/src/app/shared/components/fab-toolbar.component.scss
+++ b/ui-ngx/src/app/shared/components/fab-toolbar.component.scss
@ -64,7 +64,6 @@ mat-fab-toolbar {
    display: block;
    position: relative;
    overflow: hidden;
    height: $button-fab-width + ($icon-button-margin * 2);
  }
@ -72,9 +71,14 @@ mat-fab-toolbar {
    position: absolute;
    z-index: $z-index-fab;
-    button {
+    button.mat-mdc-fab {
      overflow: visible !important;
      opacity: .5;
      mat-icon {
        position: relative;
        z-index: $z-index-fab + 2;
        opacity: 1;
      }
    }
    .mat-fab-toolbar-background {
@ -83,15 +87,6 @@ mat-fab-toolbar {
      z-index: $z-index-fab + 1;
      opacity: 1;
    }
    mat-icon {
      position: relative;
      z-index: $z-index-fab + 2;
      opacity: 1;
    }
  }
  &.mat-left {
@ -128,7 +123,7 @@ mat-fab-toolbar {
    }
  }
-  mat-toolbar {
+  .mat-toolbar.mat-toolbar-single-row {
    padding: 0 !important;
    background-color: transparent !important;
    pointer-events: none;
@ -147,7 +142,7 @@ mat-fab-toolbar {
  }
  &.mat-is-open {
-    mat-fab-trigger > button {
+    mat-fab-trigger > button.mat-mdc-fab {
      box-shadow: none;
      opacity: 1;
@ -156,32 +151,34 @@ mat-fab-toolbar {
      }
    }
-    .mat-fab-action-item {
+    .mat-toolbar.mat-toolbar-single-row {
-      opacity: 1;
+      .mat-fab-action-item {
-      transform: scale(1);
+        opacity: 1;
        transform: scale(1);
      }
    }
  }
  &.mat-animation {
    mat-fab-trigger {
-      button {
+      button.mat-mdc-fab {
        transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s;
        mat-icon {
          transition: all $icon-delay ease-in;
        }
      }
      .mat-fab-toolbar-background {
        transition: $swift-ease-in;
      }
      mat-icon {
        transition: all $icon-delay ease-in;
      }
    }
-    mat-toolbar {
+    .mat-toolbar.mat-toolbar-single-row {
      .mat-fab-action-item {
        transition: $swift-ease-in;
        transition-duration: math.div($swift-ease-in-duration, 2);
      }
    }
    &.mat-is-open {
-      mat-fab-trigger > button {
+      mat-fab-trigger > button.mat-mdc-fab {
        transition: opacity .3s cubic-bezier(.55, 0, .55, .2);
      }
    }
--- a/ui-ngx/src/app/shared/components/html.component.scss
+++ b/ui-ngx/src/app/shared/components/html.component.scss
@ -45,7 +45,7 @@
        margin-right: 4px;
      }
    }
-    button.mat-mdc-button, button.mat-mdc-icon-button, button.mat-icon-button.tb-mat-32 {
+    button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
      background: rgba(220, 220, 220, .35);
      align-items: center;
      vertical-align: middle;
@ -58,6 +58,9 @@
        color: #7b7b7b;
      }
    }
    button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
      height: 23px;
    }
    .tb-help-popup-button-loading {
      background: #f3f3f3;
    }
--- a/ui-ngx/src/app/shared/components/js-func.component.scss
+++ b/ui-ngx/src/app/shared/components/js-func.component.scss
@ -59,7 +59,7 @@
        margin-right: 4px;
      }
    }
-    button.mat-mdc-button, button.mat-mdc-icon-button, button.mat-icon-button.tb-mat-32 {
+    button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
      background: rgba(220, 220, 220, .35);
      align-items: center;
      vertical-align: middle;
@ -72,6 +72,9 @@
        color: #7b7b7b;
      }
    }
    button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
      height: 23px;
    }
    .tb-help-popup-button-loading {
      background: #f3f3f3;
    }
--- a/ui-ngx/src/app/shared/components/json-content.component.scss
+++ b/ui-ngx/src/app/shared/components/json-content.component.scss
@ -25,7 +25,7 @@
  }
  .tb-json-content-toolbar {
-    button.mat-mdc-button, button.mat-mdc-icon-button, button.mat-icon-button.tb-mat-32 {
+    button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
      align-items: center;
      vertical-align: middle;
      min-width: 32px;
@ -40,6 +40,9 @@
        margin-right: 4px;
      }
    }
    button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
      height: 23px;
    }
  }
  .tb-json-content-panel {
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html
@ -32,7 +32,7 @@
            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="minifyJSON()">
      {{'js-func.mini' | translate }}
    </button>
-    <button mat-icon-button (click)="fullscreen = !fullscreen"
+    <button mat-icon-button class="tb-mat-32" (click)="fullscreen = !fullscreen"
            matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
            matTooltipPosition="above">
      <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.scss
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.scss
@ -22,7 +22,7 @@
 }
 .tb-json-object-toolbar {
-  button.mat-mdc-button, button.mat-mdc-icon-button, button.mat-icon-button.tb-mat-32 {
+  button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
    align-items: center;
    vertical-align: middle;
    min-width: 32px;
@ -38,6 +38,9 @@
      margin-right: 4px;
    }
  }
  button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
    height: 23px;
  }
 }
 .tb-json-object-panel {
--- a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
@ -16,7 +16,8 @@
 -->
 <mat-form-field [formGroup]="otaPackageFormGroup" class="mat-block">
-  <input matInput type="text" placeholder="{{ placeholderText | translate }}"
+  <mat-label>{{ placeholderText | translate }}</mat-label>
  <input matInput type="text"
         #packageInput
         formControlName="packageId"
         (focusin)="onFocus()"
--- a/ui-ngx/src/app/shared/components/protobuf-content.component.scss
+++ b/ui-ngx/src/app/shared/components/protobuf-content.component.scss
@ -22,7 +22,7 @@
 }
 .tb-protobuf-content-toolbar {
-  button.mat-mdc-button, button.mat-mdc-icon-button, button.mat-icon-button.tb-mat-32 {
+  button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
    align-items: center;
    vertical-align: middle;
    min-width: 32px;
@ -37,6 +37,9 @@
      margin-right: 4px;
    }
  }
  button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
    height: 23px;
  }
 }
 .tb-protobuf-content-panel {
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
@ -17,7 +17,8 @@
 -->
 <mat-form-field [formGroup]="selectQueueFormGroup"
                class="mat-block autocomplete-queue">
-  <input matInput type="text" placeholder="{{ 'queue.queue-name' | translate }}"
+  <mat-label>{{ 'queue.queue-name' | translate }}</mat-label>
  <input matInput type="text"
         #queueInput
         formControlName="queueName"
         (focusin)="onFocus()"
--- a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
@ -16,7 +16,8 @@
 -->
 <mat-form-field [formGroup]="relationTypeFormGroup" class="mat-block">
-  <input matInput type="text" placeholder="{{ required  ? ('relation.relation-type' | translate) : ( !modelValue ? ('relation.any-relation-type' | translate) : ' ') }}"
+  <mat-label>{{ required  ? ('relation.relation-type' | translate) : ( !modelValue ? ('relation.any-relation-type' | translate) : ' ') }}</mat-label>
  <input matInput type="text"
         #relationTypeInput
         formControlName="relationType"
         (focusin)="onFocus()"
--- a/ui-ngx/src/app/shared/components/socialshare-panel.component.html
+++ b/ui-ngx/src/app/shared/components/socialshare-panel.component.html
@ -16,7 +16,7 @@
 -->
 <div fxLayout="row" fxLayoutGap="12px" [fxHide]="isShareLinkLocal()">
-  <button mat-icon-button mat-raised-button class="mat-primary"
+  <button mat-mini-fab color="primary"
          shareButton="facebook"
          title="{{ shareTitle }}"
          description="{{ shareText }}"
@ -25,7 +25,7 @@
          matTooltip="{{ 'action.share-via' | translate:{provider:'Facebook'} }}">
    <mat-icon svgIcon="mdi:facebook"></mat-icon>
  </button>
-  <button mat-icon-button mat-raised-button class="mat-primary"
+  <button mat-mini-fab color="primary"
          shareButton="twitter"
          title="{{ shareTitle }}"
          tags="{{ shareHashTags }}"
@ -34,7 +34,7 @@
          matTooltip="{{ 'action.share-via' | translate:{provider:'Twitter'} }}">
    <mat-icon svgIcon="mdi:twitter"></mat-icon>
  </button>
-  <button mat-icon-button mat-raised-button class="mat-primary"
+  <button mat-mini-fab color="primary"
          shareButton="linkedin"
          title="{{ shareTitle }}"
          url="{{ shareLink }}"
@ -42,7 +42,7 @@
          matTooltip="{{ 'action.share-via' | translate:{provider:'Linkedin'} }}">
    <mat-icon svgIcon="mdi:linkedin"></mat-icon>
  </button>
-  <button mat-icon-button mat-raised-button class="mat-primary"
+  <button mat-mini-fab color="primary"
          shareButton="reddit"
          title="{{ shareTitle }}"
          url="{{ shareLink }}"
--- a/ui-ngx/src/app/shared/components/value-input.component.html
+++ b/ui-ngx/src/app/shared/components/value-input.component.html
@ -55,7 +55,7 @@
      </mat-error>
    </mat-form-field>
    <div fxLayout="column" fxLayoutAlign="center" fxFlex="60" *ngIf="valueType === valueTypeEnum.BOOLEAN">
-      <mat-checkbox [disabled]="disabled" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()" style="margin-bottom: 0;">
+      <mat-checkbox [disabled]="disabled" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()" style="min-width: 180px;">
        {{ (modelValue ? 'value.true' : 'value.false') | translate }}
      </mat-checkbox>
    </div>
--- a/ui-ngx/src/app/shared/components/value-input.component.scss
+++ b/ui-ngx/src/app/shared/components/value-input.component.scss
@ -14,18 +14,14 @@
 * limitations under the License.
 */
 :host ::ng-deep {
-  mat-form-field.tb-value-type {
+  .mat-mdc-form-field.tb-value-type {
    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
 */
    .mat-form-field-infix {
      padding-bottom: 1px;
    }
    /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
 */
    mat-select-trigger {
      .mat-icon {
-        vertical-align: middle;
+        vertical-align: bottom;
        margin-right: 16px;
        svg {
          vertical-align: initial;
        }
      }
    }
  }
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
@ -19,6 +19,7 @@
  <mat-label>{{ 'version-control.branch' | translate }}</mat-label>
  <input matInput type="text" placeholder="{{emptyPlaceholder || ((loading ? 'common.loading' : 'version-control.select-branch') | translate)}}"
         #branchInput
         #branchMatInput="matInput"
         formControlName="branch"
         (keydown.enter)="branchInput.blur(); autoCompleteTrigger.closePanel();"
         (focusin)="onFocus()"
@ -33,7 +34,7 @@
  </button>
  <mat-autocomplete
    class="tb-autocomplete"
-    (closed)="onPanelClosed()"
+    (closed)="!branchMatInput.focused ? onPanelClosed() : false"
    #branchAutocomplete="matAutocomplete"
    [displayWith]="displayBranchFn">
    <mat-option *ngFor="let branch of filteredBranches | async" [value]="branch" class="branch-option">
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.scss
+++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.scss
@ -21,9 +21,7 @@
    width: 18px;
    display: inline-block;
  }
-  /*TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version.
+  .mdc-list-item__primary-text {
 */
  .mat-option-text {
    width: 100%;
    .default-branch {
      float: right;
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
@ -91,7 +91,7 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
  @ViewChild('branchAutocomplete') matAutocomplete: MatAutocomplete;
  @ViewChild('branchInput', { read: MatAutocompleteTrigger, static: true }) autoCompleteTrigger: MatAutocompleteTrigger;
-  @ViewChild('branchInput', {static: true}) branchInput: ElementRef;
+  @ViewChild('branchInput', {static: true}) branchInput: ElementRef<HTMLInputElement>;
  filteredBranches: Observable<Array<BranchInfo>>;
@ -264,9 +264,7 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
    this.searchText = searchText;
    return this.getBranches().pipe(
      map(branches => {
-          let res = branches.filter(branch => {
+          let res = branches.filter(branch => searchText ? branch.name.toUpperCase().startsWith(searchText.toUpperCase()) : true);
            return searchText ? branch.name.toUpperCase().startsWith(searchText.toUpperCase()) : true;
          });
          if (!this.selectionMode && isNotEmptyStr(searchText) && !res.find(b => b.name === searchText)) {
            res = [{name: searchText, default: false}, ...res];
          }
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@ -402,18 +402,8 @@ mat-label {
 .tb-autocomplete {
  .mat-mdc-option {
    display: block;
    line-height: 24px;
    height: auto !important;
    min-height: inherit;
    padding-top: 8px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    .mdc-list-item__primary-text {
      display: inline-block;
      line-height: 24px;
      height: auto !important;
      white-space: normal !important;
      overflow: hidden;
      text-overflow: ellipsis;
    }
@ -929,8 +919,11 @@ mat-label {
  button.mat-mdc-menu-item {
    overflow: hidden;
    fill: #737373;
-    .tb-alt-text {
+    .mdc-list-item__primary-text {
-      float: right;
+      width: 100%;
      .tb-alt-text {
        float: right;
      }
    }
  }
@ -983,6 +976,9 @@ mat-label {
        color: white;
      }
    }
    .mat-mdc-select-value, .mat-mdc-select-arrow {
      color: white;
    }
  }
  .mat-toolbar.mat-mdc-table-toolbar {
@ -1020,19 +1016,19 @@ mat-label {
    margin: 0;
  }
-  mat-footer-row::after, mat-header-row::after, mat-row::after {
+  .mat-mdc-footer-row::after, .mat-mdc-header-row::after, .mat-mdc-row::after {
    content: none;
  }
-  mat-header-row {
+  .mat-mdc-header-row {
    height: 60px;
  }
-  mat-footer-row, mat-row {
+  .mat-mdc-footer-row, .mat-mdc-row {
    height: 52px;
  }
-  mat-header-row, mat-footer-row, mat-row {
+  .mat-mdc-header-row, .mat-mdc-footer-row, .mat-mdc-row {
    min-height: auto;
  }
@ -1041,25 +1037,12 @@ mat-label {
    display: table-row;
  }
-
+  .mat-mdc-header-cell, .mat-mdc-cell {
-  .mat-mdc-header-row.mat-mdc-table-sticky {
+    &.mat-mdc-table-sticky {
    background-clip: padding-box;
    .mat-mdc-header-cell {
      position: sticky;
      top: 0;
      z-index: 10;
      background: inherit;
      background-clip: padding-box;
      &.mat-mdc-table-sticky {
        z-index: 11 !important;
      }
    }
  }
  .mat-mdc-cell.mat-mdc-table-sticky {
    background-clip: padding-box;
  }
  .mat-mdc-row {
    transition: background-color .2s;
    &:hover:not(.tb-current-entity) {
@ -1074,23 +1057,23 @@ mat-label {
  }
  .mat-mdc-row:not(.mat-row-select), .mat-mdc-header-row:not(.mat-row-select) {
-    mat-cell:first-child, mat-footer-cell:first-child, mat-header-cell:first-child {
+    .mat-mdc-cell:first-child, .mat-mdc-footer-cell:first-child, .mat-mdc-header-cell:first-child {
      padding: 0 12px;
    }
-    mat-cell:nth-child(n+2):nth-last-child(n+2), mat-footer-cell:nth-child(n+2):nth-last-child(n+2), mat-header-cell:nth-child(n+2):nth-last-child(n+2) {
+    .mat-mdc-cell:nth-child(n+2):nth-last-child(n+2), .mat-mdc-footer-cell:nth-child(n+2):nth-last-child(n+2), .mat-mdc-header-cell:nth-child(n+2):nth-last-child(n+2) {
      padding: 0 28px 0 0;
    }
  }
  .mat-mdc-row.mat-row-select, .mat-mdc-header-row.mat-row-select {
-    mat-cell:first-child, mat-footer-cell:first-child, mat-header-cell:first-child {
+    .mat-mdc-cell:first-child, .mat-mdc-footer-cell:first-child, .mat-mdc-header-cell:first-child {
      width: 30px;
      padding: 0 0 0 12px;
    }
-    mat-cell:nth-child(2), mat-footer-cell:nth-child(2), mat-header-cell:nth-child(2) {
+    .mat-mdc-cell:nth-child(2), .mat-mdc-footer-cell:nth-child(2), .mat-mdc-header-cell:nth-child(2) {
      padding: 0 12px;
    }
-    mat-cell:nth-child(n+3):nth-last-child(n+2), mat-footer-cell:nth-child(n+3):nth-last-child(n+2), mat-header-cell:nth-child(n+3):nth-last-child(n+2) {
+    .mat-mdc-cell:nth-child(n+3):nth-last-child(n+2), .mat-mdc-footer-cell:nth-child(n+3):nth-last-child(n+2), .mat-mdc-header-cell:nth-child(n+3):nth-last-child(n+2) {
      padding: 0 28px 0 0;
    }
    &.mat-mdc-selected:not(.tb-current-entity) {
@ -1120,6 +1103,7 @@ mat-label {
    border-style: solid;
    text-overflow: ellipsis;
    touch-action: auto !important;
    letter-spacing: normal;
    &:last-child {
      padding: 0 12px 0 0;
    }
@ -1169,7 +1153,6 @@ mat-label {
  }
  .mat-mdc-cell, .mat-mdc-footer-cell, .mat-mdc-header-cell {
    // fix for ie11 'align-items: center'
    height: 20px;
  }
@ -1223,6 +1206,9 @@ mat-label {
    &.tb-mat-32 {
      @include tb-mat-icon-button-size(32);
    }
    &.tb-mat-40 {
      @include tb-mat-icon-button-size(40);
    }
    &.tb-mat-96 {
      @include tb-mat-icon-button-size(96);
    }
@ -1539,4 +1525,19 @@ mat-label {
      pointer-events: none;
    }
  }
  .tb-chip-list {
    &.mat-mdc-form-field {
      .mdc-text-field {
        .mat-mdc-form-field-infix {
          padding-top: 8px;
          padding-bottom: 8px;
          .mat-mdc-chip-grid {
            min-height: 40px;
          }
        }
      }
    }
  }
 }