UI: Angular 15 migration

ui-ngx/src/app/modules/common/modules-map.ts

@@ -33,40 +33,40 @@ import * as AngularCdkOverlay from '@angular/cdk/overlay';
 import * as AngularCdkPortal from '@angular/cdk/portal';
 import * as AngularCdkBidi from '@angular/cdk/bidi';
 import * as AngularCdkPlatform from '@angular/cdk/platform';
-import * as AngularMaterialAutocomplete from '@angular/material/legacy-autocomplete';
+import * as AngularMaterialAutocomplete from '@angular/material/autocomplete';
 import * as AngularMaterialBadge from '@angular/material/badge';
 import * as AngularMaterialBottomSheet from '@angular/material/bottom-sheet';
-import * as AngularMaterialButton from '@angular/material/legacy-button';
+import * as AngularMaterialButton from '@angular/material/button';
 import * as AngularMaterialButtonToggle from '@angular/material/button-toggle';
-import * as AngularMaterialCard from '@angular/material/legacy-card';
-import * as AngularMaterialCheckbox from '@angular/material/legacy-checkbox';
-import * as AngularMaterialChips from '@angular/material/legacy-chips';
-import * as AngularMaterialCore from '@angular/material/legacy-core';
+import * as AngularMaterialCard from '@angular/material/card';
+import * as AngularMaterialCheckbox from '@angular/material/checkbox';
+import * as AngularMaterialChips from '@angular/material/chips';
+import * as AngularMaterialCore from '@angular/material/core';
 import * as AngularMaterialDatepicker from '@angular/material/datepicker';
-import * as AngularMaterialDialog from '@angular/material/legacy-dialog';
+import * as AngularMaterialDialog from '@angular/material/dialog';
 import * as AngularMaterialDivider from '@angular/material/divider';
 import * as AngularMaterialExpansion from '@angular/material/expansion';
-import * as AngularMaterialFormField from '@angular/material/legacy-form-field';
+import * as AngularMaterialFormField from '@angular/material/form-field';
 import * as AngularMaterialGridList from '@angular/material/grid-list';
 import * as AngularMaterialIcon from '@angular/material/icon';
-import * as AngularMaterialInput from '@angular/material/legacy-input';
-import * as AngularMaterialList from '@angular/material/legacy-list';
-import * as AngularMaterialMenu from '@angular/material/legacy-menu';
-import * as AngularMaterialPaginator from '@angular/material/legacy-paginator';
-import * as AngularMaterialProgressBar from '@angular/material/legacy-progress-bar';
-import * as AngularMaterialProgressSpinner from '@angular/material/legacy-progress-spinner';
-import * as AngularMaterialRadio from '@angular/material/legacy-radio';
-import * as AngularMaterialSelect from '@angular/material/legacy-select';
+import * as AngularMaterialInput from '@angular/material/input';
+import * as AngularMaterialList from '@angular/material/list';
+import * as AngularMaterialMenu from '@angular/material/menu';
+import * as AngularMaterialPaginator from '@angular/material/paginator';
+import * as AngularMaterialProgressBar from '@angular/material/progress-bar';
+import * as AngularMaterialProgressSpinner from '@angular/material/progress-spinner';
+import * as AngularMaterialRadio from '@angular/material/radio';
+import * as AngularMaterialSelect from '@angular/material/select';
 import * as AngularMaterialSidenav from '@angular/material/sidenav';
-import * as AngularMaterialSlideToggle from '@angular/material/legacy-slide-toggle';
-import * as AngularMaterialSlider from '@angular/material/legacy-slider';
-import * as AngularMaterialSnackBar from '@angular/material/legacy-snack-bar';
+import * as AngularMaterialSlideToggle from '@angular/material/slide-toggle';
+import * as AngularMaterialSlider from '@angular/material/slider';
+import * as AngularMaterialSnackBar from '@angular/material/snack-bar';
 import * as AngularMaterialSort from '@angular/material/sort';
 import * as AngularMaterialStepper from '@angular/material/stepper';
-import * as AngularMaterialTable from '@angular/material/legacy-table';
-import * as AngularMaterialTabs from '@angular/material/legacy-tabs';
+import * as AngularMaterialTable from '@angular/material/table';
+import * as AngularMaterialTabs from '@angular/material/tabs';
 import * as AngularMaterialToolbar from '@angular/material/toolbar';
-import * as AngularMaterialTooltip from '@angular/material/legacy-tooltip';
+import * as AngularMaterialTooltip from '@angular/material/tooltip';
 import * as AngularMaterialTree from '@angular/material/tree';
 import * as DragDropModule from '@angular/cdk/drag-drop';
 import * as HttpClientModule from '@angular/common/http';

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html

@@ -17,7 +17,7 @@
 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="alarmDurationPredicateValueFormGroup">
   <div fxFlex fxLayout="column" [fxShow]="!dynamicMode">
-    <mat-form-field class="mat-block">
+    <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <input required type="number" matInput
              step="1" min="1" max="2147483647"
              formControlName="defaultValue"
@@ -39,7 +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 class="mat-block">
+        <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}}
@@ -51,7 +51,7 @@
         </mat-form-field>
       </div>
       <div fxFlex fxLayout="column">
-        <mat-form-field class="mat-block source-attribute">
+        <mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
       </div>

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.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 {
-  .source-attribute {
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-infix{
-      width: 100%;
-    }
-  }
-}

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,

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,7 +56,7 @@
             >
             </tb-alarm-duration-predicate-value>
             <div fxFlex="23" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
-              <mat-form-field class="mat-block">
+              <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">

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"

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>

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);
     }
   }
 

ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss

@@ -24,9 +24,7 @@
 
 :host ::ng-deep {
   .mat-mdc-form-field.severity {
-    /*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 {
+    .mat-mdc-form-field-infix {
       width: 160px;
     }
   }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.scss

@@ -34,37 +34,5 @@
 
   .resource-list {
     padding-bottom: 8px;
-    height: 42px;
-  }
-}
-
-:host ::ng-deep {
-  .resource-list {
-    mat-form-field {
-      /*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-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;
-        }
-        /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-        .mat-form-field-subscript-wrapper{
-          margin-top: 1.8em;
-        }
-      }
-    }
   }
 }

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.scss

@@ -32,9 +32,7 @@
 
 :host ::ng-deep {
   .mat-mdc-form-field.spec {
-    /*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 {
+    .mat-mdc-form-field-infix {
       width: 160px;
     }
   }

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.scss

@@ -44,18 +44,3 @@
     margin-top: 0.5em;
   }
 }
-
-:host ::ng-deep {
-  mat-form-field {
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-wrapper {
-      padding-bottom: 1em;
-    }
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-infix {
-      width: 100%;
-    }
-  }
-}

ui-ngx/src/app/modules/home/components/queue/queue-form.component.html

@@ -37,7 +37,7 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px" formGroupName="submitStrategy" style="padding-bottom: 15px;">
+        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px" formGroupName="submitStrategy">
           <div fxFlex>
             <label class="group-label" translate>queue.submit-strategy</label>
             <mat-radio-group fxFlex fxLayout="column" fxLayoutGap="15px" formControlName="type" required>
@@ -75,7 +75,7 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px" formGroupName="processingStrategy" style="padding-bottom: 15px;">
+        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px" formGroupName="processingStrategy">
           <div fxFlex>
             <label class="group-label" translate>queue.processing-strategy</label>
               <mat-radio-group fxFlex fxLayout="column" fxLayoutGap="15px" formControlName="type" required>
@@ -152,7 +152,7 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="column" fxLayoutGap="10px" style="padding-bottom: 15px;">
+        <div fxFlex fxLayout="column" fxLayoutGap="10px">
           <div fxFlex>
             <label class="group-label" translate>queue.batch-processing</label>
             <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">

ui-ngx/src/app/modules/home/components/queue/queue-form.component.scss

@@ -34,19 +34,10 @@
   }
 
   ::ng-deep {
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-infix {
-      width: 100% !important;
-    }
     .queue-strategy {
       .mat-expansion-panel-header {
         height: 50px;
       }
-
-      .mat-expansion-panel-body {
-        padding-bottom: 0 !important;
-      }
     }
   }
 }

ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss

@@ -67,32 +67,3 @@
     }
   }
 }
-
-:host ::ng-deep {
-  .mat-sort-header-sorted .mat-sort-header-arrow {
-    opacity: 1 !important;
-  }
-  mat-form-field.tb-relation-direction {
-    font-size: 16px;
-    width: 200px;
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-underline {
-      bottom: 0;
-    }
-
-    @media #{$mat-xs} {
-      width: 100%;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-infix {
-        width: auto !important;
-      }
-    }
-  }
-}

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.scss

@@ -77,34 +77,3 @@
     }
   }
 }
-
-:host ::ng-deep {
-  .mat-sort-header-sorted .mat-sort-header-arrow {
-    opacity: 1 !important;
-  }
-  tb-branch-autocomplete {
-    mat-form-field {
-      font-size: 16px;
-      width: 250px;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-underline {
-        bottom: 0;
-      }
-
-      @media #{$mat-xs} {
-        width: 100%;
-        /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-        .mat-form-field-infix {
-          width: auto !important;
-        }
-      }
-    }
-  }
-}

ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.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 {
-  /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
- */
-  .mat-checkbox-label {
-    white-space: normal;
-  }
-}

ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts

@@ -79,7 +79,7 @@ const stateDisplayTypesTranslations = new Map<stateDisplayType, string>(
   selector: 'tb-widget-action-dialog',
   templateUrl: './widget-action-dialog.component.html',
   providers: [{provide: ErrorStateMatcher, useExisting: WidgetActionDialogComponent}],
-  styleUrls: ['./widget-action-dialog.component.scss']
+  styleUrls: []
 })
 export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDialogComponent,
                                                  WidgetActionDescriptorInfo> implements OnInit, ErrorStateMatcher {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.scss

@@ -33,9 +33,4 @@
       }
     }
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-  ::ng-deep .mat-form-field-infix {
-    width: auto !important;
-  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss

@@ -44,25 +44,15 @@
         margin-bottom: 5px;
       }
     }
-    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
- */
-    mat-checkbox,
-    mat-slide-toggle {
+
+    .mat-mdc-slide-toggle {
       display: block;
-      margin-top: 20px;
-      margin-bottom: 16px;
-      .label-wrapper {
-        white-space: normal;
-      }
-    }
-    /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-    mat-slide-toggle {
-      height: auto;
+      margin-top: 10px;
+      margin-bottom: 8px;
     }
 
     .date-time-input {
-      mat-form-field {
+      .mat-mdc-form-field {
         width: 100%;
         margin: 2px 0;
       }
@@ -76,14 +66,12 @@
 
 :host ::ng-deep {
   .tb-multiple-input {
-    /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-    .mat-slide-toggle-content {
-      width: 100%;
+    .mat-mdc-slide-toggle .mdc-form-field > label {
       display: flex;
       align-items: center;
 
       .mat-icon {
+        margin-left: 8px;
         margin-right: 8px;
       }
     }

ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.scss

@@ -88,71 +88,67 @@ $error-height: 14px !default;
   .tb-switch {
     .switch {
       z-index: 1;
-      /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-      /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-      mat-slide-toggle {
+      .mat-mdc-slide-toggle {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         margin: 0;
-        /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-        .mat-slide-toggle-bar {
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: $thumb-bar-img no-repeat;
-          background-size: contain;
-          border-radius: 0;
-        }
-        /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-        .mat-slide-toggle-thumb-container {
-          top: 5%;
-          left: .25%;
-          width: 50%;
-          height: 90%;
-        }
-        /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-        .mat-slide-toggle-label{
-          height: 100%;
+        &.mat-mdc-slide-toggle-checked {
+          .mdc-form-field {
+            .mdc-switch {
+              .mdc-switch__track {
+                background: $thumb-bar-checked-img no-repeat;
+                background-size: contain;
+              }
+              .mdc-switch__handle-track {
+                .mdc-switch__handle {
+                  background: $thumb-checked-img no-repeat;
+                  background-size: contain;
+                }
+              }
+            }
+          }
         }
-        /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-        .mat-slide-toggle-thumb {
-          top: 0;
-          left: 0;
+        .mdc-form-field {
           width: 100%;
           height: 100%;
-          background: $thumb-img no-repeat;
-          background-size: contain;
-          border-radius: 0;
-          box-shadow: none;
-        }
+          .mdc-switch {
+            width: 100%;
+            height: 100%;
+            .mdc-switch__track {
+              width: 100%;
+              height: 100%;
+              background: $thumb-bar-img no-repeat;
+              background-size: contain;
+              border-radius: 0;
+              &:before, &:after {
+                content: none;
+              }
+            }
+            .mdc-switch__handle-track {
+              top: 5%;
+              left: .25%;
+              width: 50%;
+              height: 90%;
+              .mdc-switch__handle {
+                width: 100%;
+                height: 100%;
+                background: $thumb-img no-repeat;
+                background-size: contain;
+                border-radius: 0;
+                box-shadow: none;
 
-        &.mat-checked {
-          /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-          .mat-slide-toggle-thumb-container {
-            transform: translate3d(100%,0,0);
-          }
-          /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-          .mat-slide-toggle-bar {
-            background: $thumb-bar-checked-img no-repeat;
-            background-size: contain;
-          }
-          /*TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.
- */
-          .mat-slide-toggle-thumb {
-            background: $thumb-checked-img no-repeat;
-            background-size: contain;
+                &:before, &:after {
+                  content: none;
+                }
+
+                & > * {
+                  display: none;
+                }
+              }
+            }
           }
         }
       }

ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.scss

@@ -50,15 +50,9 @@
         min-width: 32px;
         height: 32px;
         min-height: 32px;
-        padding: 0 0 2px;
         margin: 2px;
         line-height: 24px;
         z-index: 999;
-        /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-        &::ng-deep .mat-button-wrapper {
-          padding: 0;
-        }
 
         mat-icon {
           width: 24px;

ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss

@@ -63,14 +63,6 @@
           height: 100%;
         }
       }
-
-      tb-device-profile-autocomplete, tb-queue-autocomplete{
-        /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-        .mat-form-field-wrapper{
-          width: 180px !important;
-        }
-      }
     }
   }
 }

ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss

@@ -57,19 +57,9 @@
       .mat-expansion-panel-body{
         padding: 0 2px 1em;
       }
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-suffix .mat-mdc-icon-button .mat-icon{
-        font-size: 18px;
-      }
     }
   }
   .domains-list, .apps-list {
     margin-bottom: 1.5em;
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-suffix .mat-mdc-icon-button .mat-icon{
-      font-size: 24px;
-    }
   }
 }

ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss

@@ -16,11 +16,7 @@
 @import "../../../../../scss/constants";
 
 :host {
-  /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.
- */
-  /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.
- */
-  mat-card.settings-card {
+  .mat-mdc-card.settings-card {
     @media #{$mat-md} {
       width: 90%;
     }
@@ -75,6 +71,13 @@
 }
 
 :host ::ng-deep {
+
+  .mat-mdc-form-field {
+    .mat-mdc-form-field-infix {
+      width: 100%;
+    }
+  }
+
   .mat-expansion-panel {
     .mat-expansion-panel-content {
       font-size: 16px;

ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.scss

@@ -1,52 +0,0 @@
-/**
- * Copyright © 2016-2023 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@import '../../../../../scss/constants';
-
-:host {
-  flex: 1;
-  display: flex;
-  justify-content: flex-start;
-  min-width: 150px;
-}
-
-:host ::ng-deep {
-  tb-asset-profile-autocomplete {
-    width: 100%;
-
-    mat-form-field {
-      font-size: 16px;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-underline {
-        bottom: 0;
-      }
-
-      @media #{$mat-xs} {
-        width: 100%;
-        /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-        .mat-form-field-infix {
-          width: auto !important;
-        }
-      }
-    }
-  }
-}

ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.ts

@@ -25,7 +25,7 @@ import { AssetProfileId } from '@shared/models/id/asset-profile-id';
 @Component({
   selector: 'tb-asset-table-header',
   templateUrl: './asset-table-header.component.html',
-  styleUrls: ['./asset-table-header.component.scss']
+  styleUrls: []
 })
 export class AssetTableHeaderComponent extends EntityTableHeaderComponent<AssetInfo> {
 

ui-ngx/src/app/modules/home/pages/device/device-table-header.component.scss

@@ -1,52 +0,0 @@
-/**
- * Copyright © 2016-2023 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@import '../../../../../scss/constants';
-
-:host {
-  flex: 1;
-  display: flex;
-  justify-content: flex-start;
-  min-width: 150px;
-}
-
-:host ::ng-deep {
-  tb-device-profile-autocomplete {
-    width: 100%;
-
-    mat-form-field {
-      font-size: 16px;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-underline {
-        bottom: 0;
-      }
-
-      @media #{$mat-xs} {
-        width: 100%;
-        /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-        .mat-form-field-infix {
-          width: auto !important;
-        }
-      }
-    }
-  }
-}

ui-ngx/src/app/modules/home/pages/device/device-table-header.component.ts

@@ -25,7 +25,7 @@ import { DeviceProfileId } from '../../../../shared/models/id/device-profile-id'
 @Component({
   selector: 'tb-device-table-header',
   templateUrl: './device-table-header.component.html',
-  styleUrls: ['./device-table-header.component.scss']
+  styleUrls: []
 })
 export class DeviceTableHeaderComponent extends EntityTableHeaderComponent<DeviceInfo> {
 

ui-ngx/src/app/modules/home/pages/edge/edge-table-header.component.scss

@@ -1,52 +0,0 @@
-/**
- * Copyright © 2016-2023 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@import '../../../../../scss/constants';
-
-:host {
-  flex: 1;
-  display: flex;
-  justify-content: flex-start;
-  min-width: 150px;
-}
-
-:host ::ng-deep {
-  tb-entity-subtype-select {
-    width: 100%;
-
-    mat-form-field {
-      font-size: 16px;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-underline {
-        bottom: 0;
-      }
-
-      @media #{$mat-xs} {
-        width: 100%;
-        /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-        .mat-form-field-infix {
-          width: auto !important;
-        }
-      }
-    }
-  }
-}

ui-ngx/src/app/modules/home/pages/edge/edge-table-header.component.ts

@@ -24,7 +24,7 @@ import { EdgeInfo } from '@shared/models/edge.models';
 @Component({
   selector: 'tb-edge-table-header',
   templateUrl: './edge-table-header.component.html',
-  styleUrls: ['./edge-table-header.component.scss']
+  styleUrls: []
 })
 export class EdgeTableHeaderComponent extends EntityTableHeaderComponent<EdgeInfo> {
 

ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.scss

@@ -1,52 +0,0 @@
-/**
- * Copyright © 2016-2023 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@import '../../../../../scss/constants';
-
-:host {
-  flex: 1;
-  display: flex;
-  justify-content: flex-start;
-  min-width: 150px;
-}
-
-:host ::ng-deep {
-  tb-entity-subtype-select {
-    width: 100%;
-
-    mat-form-field {
-      font-size: 16px;
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-underline {
-        bottom: 0;
-      }
-
-      @media #{$mat-xs} {
-        width: 100%;
-        /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-        .mat-form-field-infix {
-          width: auto !important;
-        }
-      }
-    }
-  }
-}

ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.ts

@@ -24,7 +24,7 @@ import { EntityViewInfo } from '@app/shared/models/entity-view.models';
 @Component({
   selector: 'tb-entity-view-table-header',
   templateUrl: './entity-view-table-header.component.html',
-  styleUrls: ['./entity-view-table-header.component.scss']
+  styleUrls: []
 })
 export class EntityViewTableHeaderComponent extends EntityTableHeaderComponent<EntityViewInfo> {
 

ui-ngx/src/app/modules/login/pages/login/login.component.scss

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 @import '../../../../../scss/constants';
+@import '../../../../../theme';
 
 :host {
   display: flex;
@@ -70,24 +71,17 @@
 
       a.login-with-button {
         color: rgba(black, 0.87);
+        background-color: map-get($tb-dark-theme-background, raised-button);
 
         &:hover {
           border-bottom: 0;
         }
 
-        .icon{
+        .icon {
           height: 20px;
           width: 20px;
-          vertical-align: sub;
         }
       }
-      /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-      .centered ::ng-deep .mat-button-wrapper {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
     }
   }
 }

ui-ngx/src/app/shared/components/dashboard-select-panel.component.scss

@@ -36,28 +36,3 @@
     background-color: #fff;
   }
 }
-
-:host ::ng-deep {
-  mat-form-field {
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    /*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-infix {
-      width: 100%;
-      /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
- */
-      /*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: 100%;
-        }
-      }
-    }
-  }
-}

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.scss

@@ -1,23 +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 {
-  /*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;
-    min-width: 100px;
-  }
-}

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts

@@ -44,7 +44,7 @@ import { isEqual } from '@core/utils';
 @Component({
   selector: 'tb-entity-autocomplete',
   templateUrl: './entity-autocomplete.component.html',
-  styleUrls: ['./entity-autocomplete.component.scss'],
+  styleUrls: [],
   providers: [{
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => EntityAutocompleteComponent),

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html

@@ -16,7 +16,7 @@
 
 -->
 <mat-form-field [formGroup]="selectQueueFormGroup"
-                class="mat-block autocomplete-queue">
+                class="mat-block autocomplete-queue" subscriptSizing="{{subscriptSizing}}">
   <mat-label>{{ 'queue.queue-name' | translate }}</mat-label>
   <input matInput type="text"
          #queueInput

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss

@@ -13,50 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-::ng-deep {
-  .queue-option {
-    /*TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version.
- */
-    .mat-option-text {
-      display: inline;
-    }
-
-    .queue-option-description {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-
-: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.
- */
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    .mat-form-field-wrapper {
-      padding-bottom: 0px;
-      /*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 {
-        position: initial !important;
-        display: block;
-        margin-top: -1px;
-      }
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-subscript-wrapper,
-      .mat-form-field-ripple {
-        position: initial !important;
-        display: table;
-      }
-      /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-      .mat-form-field-subscript-wrapper {
-        min-height: calc(1em + 1px);
-      }
-    }
+.queue-option {
+  .queue-option-description {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts

@@ -31,6 +31,7 @@ import { QueueService } from '@core/http/queue.service';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
 import { emptyPageData } from '@shared/models/page/page-data';
+import { SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-queue-autocomplete',
@@ -57,6 +58,9 @@ export class QueueAutocompleteComponent implements ControlValueAccessor, OnInit
   @Input()
   autocompleteHint: string;
 
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed';
+
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;

ui-ngx/src/app/shared/components/time/datetime.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px">
-  <mat-form-field [floatLabel]="showLabel ? 'auto' : 'always'" [hideRequiredMarker]="!showLabel" [ngClass]="{'no-label': !showLabel}">
+  <mat-form-field>
     <mat-label *ngIf="showLabel">{{ dateText | translate }}</mat-label>
     <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
     <mat-datetimepicker #datePicker type="date" openOnFocus="true"></mat-datetimepicker>
@@ -26,7 +26,7 @@
            matInput [(ngModel)]="date"
            [matDatetimepicker]="datePicker" (ngModelChange)="onDateChange()">
   </mat-form-field>
-  <mat-form-field [floatLabel]="showLabel ? 'auto' : 'always'" [hideRequiredMarker]="!showLabel" [ngClass]="{'no-label': !showLabel}">
+  <mat-form-field>
     <mat-label *ngIf="showLabel">{{ timeText | translate }}</mat-label>
     <mat-datetimepicker-toggle [for]="timePicker" matPrefix></mat-datetimepicker-toggle>
     <mat-datetimepicker #timePicker type="time" openOnFocus="true"></mat-datetimepicker>

ui-ngx/src/app/shared/components/time/datetime.component.scss

@@ -1,42 +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 {
-  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-  .mat-form-field-wrapper {
-    padding-bottom: 8px;
-  }
-  /*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: 8px;
-  }
-  /*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;
-    min-width: 100px;
-  }
-  mat-form-field {
-    &.no-label {
-      /*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;
-      }
-    }
-  }
-}

ui-ngx/src/app/shared/components/time/datetime.component.ts

@@ -21,7 +21,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 @Component({
   selector: 'tb-datetime',
   templateUrl: './datetime.component.html',
-  styleUrls: ['./datetime.component.scss'],
+  styleUrls: [],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.scss

@@ -84,17 +84,6 @@
   width: 100%;
   padding-bottom: 16px;
   padding-left: 10px;
-  /*TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version.
- */
-  /*TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version.
- */
-  mat-slider-container {
-    /*TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version.
- */
-    mat-slider {
-      min-width: 80px;
-    }
-  }
 
   .mat-mdc-icon-button {
     width: 44px;
@@ -114,11 +103,6 @@
         height: inherit;
       }
     }
-    /*TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.
- */
-    mat-select {
-      margin: 0;
-    }
   }
 
   .panel-timer {

ui-ngx/src/theme.scss

@@ -251,4 +251,3 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
 .tb-dark {
   @include mat.all-component-colors($tb-dark-theme);
 }
-