UI: Angular 15 migration

ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.scss

@@ -79,7 +79,6 @@
     .tb-header-button {
       .tb-btn-header {
         position: relative !important;
-        display: inline-block !important;
         animation: tbMoveFromTopFade .3s ease both;
 
         &.tb-hide {

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

@@ -14,23 +14,17 @@
  * 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-mdc-form-field-infix {
- */
-  .mat-form-field-infix {
     width: 100% !important;
   }
 
   .mat-mdc-checkbox{
     &.hinted-checkbox {
-      /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
+      .mdc-checkbox {
- */
+        margin-top: -28px;
-      .mat-checkbox-inner-container {
-        margin-top: 4px;
       }
     }
-    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.
+    .mdc-form-field {
- */
-    .mat-checkbox-layout{
       white-space: normal;
     }
   }
@@ -47,6 +41,9 @@
 
   .mat-expansion-panel-header {
     height: 48px;
+    &.mat-expanded {
+      height: 48px;
+    }
   }
   .expansion-panel-block {
     padding-bottom: 16px;

ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html

@@ -58,8 +58,7 @@
                 (click)="beautifyCss()">
           {{ 'widget.tidy' | translate }}
         </button>
-        <button mat-button
+        <button type="button"
-                type="button"
                 mat-icon-button class="tb-mat-32"
                 (click)="cssFullscreen = !cssFullscreen"
                 matTooltip="{{(cssFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
@@ -77,8 +76,7 @@
                 type="button" (click)="beautifyHtml()">
           {{ 'widget.tidy' | translate }}
         </button>
-        <button mat-button
+        <button type="button"
-                type="button"
                 mat-icon-button class="tb-mat-32"
                 (click)="htmlFullscreen = !htmlFullscreen"
                 matTooltip="{{(htmlFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"

ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html

@@ -17,11 +17,13 @@
 -->
 <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.general-settings</span>
+        <div fxLayout="row">
-      </div>
+          <span class="mat-headline-5" translate>admin.general-settings</span>
-    </mat-card-title>
+        </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>
@@ -35,10 +37,10 @@
               {{ 'admin.base-url-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <tb-checkbox formControlName="prohibitDifferentUrl" style="display: block; padding-bottom: 16px;">
+          <tb-checkbox formControlName="prohibitDifferentUrl" style="display: block;">
             {{ 'admin.prohibit-different-url' | translate }}
           </tb-checkbox>
-          <div class="tb-hint" translate>admin.prohibit-different-url-hint</div>
+          <div class="tb-hint" style="padding-left: 10px;" translate>admin.prohibit-different-url-hint</div>
           <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
             <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || generalSettings.invalid || !generalSettings.dirty"
                     type="submit">{{'action.save' | translate}}

ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html

@@ -17,13 +17,13 @@
 -->
 <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.outgoing-mail-settings</span>
-        <span fxFlex></span>
+      </mat-card-title>
-        <div tb-help="outgoingMailSettings"></div>
+      <span fxFlex></span>
-      </div>
+      <div tb-help="outgoingMailSettings"></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>

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

@@ -17,13 +17,13 @@
 -->
 <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.oauth2.oauth2</span>
-        <span fxFlex></span>
+      </mat-card-title>
-        <div tb-help="oauth2Settings"></div>
+      <span fxFlex></span>
-      </div>
+      <div tb-help="oauth2Settings"></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>

ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html

@@ -16,17 +16,17 @@
 
 -->
 <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.security-settings</span>
-      <span fxFlex></span>
+    </mat-card-title>
-      <div tb-help="securitySettings"></div>
+    <span fxFlex></span>
-    </div>
+    <div tb-help="securitySettings"></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>
-  <mat-card-content style="padding-top: 16px;">
+  <mat-card-content>
     <form [formGroup]="securitySettingsFormGroup" (ngSubmit)="save()" autocomplete="off">
       <fieldset [disabled]="isLoading$ | async">
         <fieldset class="fields-group">
@@ -160,11 +160,11 @@
   </mat-card-content>
 </mat-card>
 <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.jwt.security-settings</span>
-    </div>
+    </mat-card-title>
-  </mat-card-title>
+  </mat-card-header>
   <mat-card-content style="padding-top: 16px;">
     <form [formGroup]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off">
       <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">

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

@@ -22,10 +22,6 @@
     margin: 0;
   }
 
-  .mat-mdc-card-content {
-    padding: 0 !important;
-  }
-
   .fields-group {
     padding: 8px 16px 0;
     margin: 10px 0;

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

@@ -16,9 +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.
+ .mat-mdc-card.settings-card {
- */
- mat-card.settings-card {
    margin: 8px;
 
    @media #{$mat-md} {

ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html

@@ -17,13 +17,13 @@
 -->
 <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.sms-provider-settings</span>
-        <span fxFlex></span>
+      </mat-card-title>
-        <div tb-help="smsProviderSettings"></div>
+      <span fxFlex></span>
-      </div>
+      <div tb-help="smsProviderSettings"></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>

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

@@ -17,13 +17,13 @@
 -->
 <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.2fa.2fa</span>
-        <span fxFlex></span>
+      </mat-card-title>
-        <div tb-help="twoFactorAuthentication"></div>
+      <span fxFlex></span>
-      </div>
+      <div tb-help="twoFactorAuthentication"></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>
@@ -38,7 +38,7 @@
                   <mat-expansion-panel-header>
                     <mat-panel-title fxLayoutAlign="start center">
                       <mat-slide-toggle
-                        (click)="toggleExtensionPanel($event, i, provider.get('enable').value)"
+                        (mousedown)="toggleExtensionPanel($event, i, provider.get('enable').value)"
                         formControlName="enable">
                         {{ twoFactorAuthProvidersData.get(provider.value.providerType).name | translate }}
                       </mat-slide-toggle>
@@ -153,7 +153,7 @@
               <mat-expansion-panel class="provider">
                 <mat-expansion-panel-header>
                   <mat-panel-title fxLayoutAlign="start center">
-                    <mat-slide-toggle (click)="toggleExtensionPanel($event, providersForm.length, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
+                    <mat-slide-toggle (mousedown)="toggleExtensionPanel($event, providersForm.length, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
                                       formControlName="verificationCodeCheckRateLimitEnable">
                     </mat-slide-toggle>
                     {{ 'admin.2fa.verification-code-check-rate-limit' | translate }}

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

@@ -99,9 +99,9 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
       $event.stopPropagation();
     }
     if (currentState) {
-      this.getByIndexPanel(index).close();
-    } else {
       this.getByIndexPanel(index).open();
+    } else {
+      this.getByIndexPanel(index).close();
     }
   }
 

ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss

@@ -52,8 +52,6 @@
       &:focus {
         border-bottom: none;
       }
-      /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
       display: flex;
       flex-direction: column;
       align-items: center;

ui-ngx/src/app/modules/home/pages/profile/profile.component.html

@@ -17,21 +17,19 @@
 -->
 <div>
   <mat-card appearance="outlined" class="profile-card">
-    <mat-card-title>
+    <mat-card-header>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
+      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
            fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start">
         <div fxFlex fxLayout="column">
           <span class="mat-headline-5" translate>profile.profile</span>
           <span class="profile-email" style='opacity: 0.7;'>{{ profile ? profile.get('email').value : '' }}</span>
         </div>
         <div fxLayout="column">
-          <span class="mat-subheader" translate>profile.last-login-time</span>
+          <span class="mat-mdc-subheader" translate>profile.last-login-time</span>
           <span class="profile-last-login-ts" style='opacity: 0.7;'>{{ user?.additionalInfo?.lastLoginTs | date:'yyyy-MM-dd HH:mm:ss'  }}</span>
         </div>
       </div>
-    </mat-card-title>
+    </mat-card-header>
-    <mat-card-title>
-    </mat-card-title>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>

ui-ngx/src/app/modules/home/pages/profile/profile.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.
+  .mat-mdc-card.profile-card {
- */
-  /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.
- */
-  mat-card.profile-card {
     margin: 8px;
     @media #{$mat-gt-sm} {
       width: 60%;
@@ -52,9 +48,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;
         }

ui-ngx/src/app/modules/home/pages/security/security.component.html

@@ -20,20 +20,18 @@
     <mat-card-title style="margin-bottom: 8px;">
       <span class="mat-headline-5 card-title" translate>profile.jwt-token</span>
     </mat-card-title>
-    <mat-card-content>
+    <div fxLayout="row" fxLayoutAlign="space-between center">
-      <div fxLayout="row" fxLayoutAlign="space-between center">
+      <div class="token-text">{{ 'profile.token-valid-till' | translate }} <span class="date">{{ jwtTokenExpiration | date: 'yyyy-MM-dd HH:mm:ss' }}</span></div>
-        <div class="token-text">{{ 'profile.token-valid-till' | translate }} <span class="date">{{ jwtTokenExpiration | date: 'yyyy-MM-dd HH:mm:ss' }}</span></div>
+      <button mat-raised-button
-        <button mat-raised-button
+              color="primary"
-                color="primary"
+              type="button"
-                type="button"
+              (click)="copyToken()">
-                (click)="copyToken()">
+        <span>{{ 'profile.copy-jwt-token' | translate }}</span>
-          <span>{{ 'profile.copy-jwt-token' | translate }}</span>
+      </button>
-        </button>
+    </div>
-      </div>
-    </mat-card-content>
   </mat-card>
   <mat-card appearance="outlined" class="profile-card" fxLayout="column">
-    <mat-card-content class="change-password" tb-toast toastTarget="changePassword">
+    <div class="change-password" tb-toast toastTarget="changePassword">
       <form #changePasswordForm="ngForm" [formGroup]="changePassword" (ngSubmit)="onChangePassword(changePasswordForm)">
         <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="25px" fxLayoutGap.xs="0">
           <div fxFlex="290px" fxFlex.sm="250px"  fxFlex.xs="100">
@@ -123,7 +121,7 @@
           </button>
         </div>
       </form>
-    </mat-card-content>
+    </div>
   </mat-card>
   <mat-card appearance="outlined" class="profile-card" *ngIf="allowTwoFactorProviders.length">
     <mat-card-title style="margin-bottom: 20px;">
@@ -132,42 +130,40 @@
     <mat-card-subtitle style="margin-bottom: 40px;">
       <div class="mat-body-2 description" translate>security.2fa.2fa-description</div>
     </mat-card-subtitle>
-    <mat-card-content>
+    <h3 class="mat-h3 auth-title" translate>security.2fa.authenticate-with</h3>
-      <h3 class="mat-h3 auth-title" translate>security.2fa.authenticate-with</h3>
+    <form [formGroup]="twoFactorAuth">
-      <form [formGroup]="twoFactorAuth">
+      <ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider">
-        <ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider">
+        <div class="provider">
-          <div class="provider">
+          <h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
-            <h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
+          <div fxLayout="row" fxLayoutAlign="space-between start">
-            <div fxLayout="row" fxLayoutAlign="space-between start">
+            <div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo">
-              <div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo">
+              {{ providersData.get(provider).description | translate }}
-                {{ providersData.get(provider).description | translate }}
-              </div>
-              <ng-template #providerInfo>
-                <div class="mat-body-2 description">
-                  {{ providersData.get(provider).activatedHint | translate: providerDataInfo(provider) }}
-                </div>
-              </ng-template>
-              <mat-slide-toggle [formControlName]="provider"
-                                (click)="confirm2FAChange($event, provider)">
-              </mat-slide-toggle>
             </div>
-            <mat-checkbox [value]="provider"
+            <ng-template #providerInfo>
-                          [checked]="useByDefault === provider"
+              <div class="mat-body-2 description">
-                          (click)="changeDefaultProvider($event, provider)"
+                {{ providersData.get(provider).activatedHint | translate: providerDataInfo(provider) }}
-                          [disabled]="(isLoading$ | async)"
+              </div>
-                           *ngIf="twoFactorAuth.get(provider).value && provider !== twoFactorAuthProviderType.BACKUP_CODE && !activeSingleProvider">
+            </ng-template>
-              <span class="checkbox-label" translate>security.2fa.main-2fa-method</span>
+            <mat-slide-toggle [formControlName]="provider"
-            </mat-checkbox>
+                              (mousedown)="confirm2FAChange($event, provider)">
-            <button type="button"
+            </mat-slide-toggle>
-             mat-stroked-button color="primary"
-             (click)="generateNewBackupCode()"
-             *ngIf="twoFactorAuth.get(provider).value && provider === twoFactorAuthProviderType.BACKUP_CODE">
-              {{ 'security.2fa.get-new-code' | translate }}
-            </button>
           </div>
-          <mat-divider *ngIf="!$last"></mat-divider>
+          <mat-checkbox [value]="provider"
-        </ng-container>
+                        [checked]="useByDefault === provider"
-      </form>
+                        (click)="changeDefaultProvider($event, provider)"
-    </mat-card-content>
+                        [disabled]="(isLoading$ | async)"
+                         *ngIf="twoFactorAuth.get(provider).value && provider !== twoFactorAuthProviderType.BACKUP_CODE && !activeSingleProvider">
+            <span class="checkbox-label" translate>security.2fa.main-2fa-method</span>
+          </mat-checkbox>
+          <button type="button"
+           mat-stroked-button color="primary"
+           (click)="generateNewBackupCode()"
+           *ngIf="twoFactorAuth.get(provider).value && provider === twoFactorAuthProviderType.BACKUP_CODE">
+            {{ 'security.2fa.get-new-code' | translate }}
+          </button>
+        </div>
+        <mat-divider *ngIf="!$last"></mat-divider>
+      </ng-container>
+    </form>
   </mat-card>
 </div>

ui-ngx/src/app/modules/home/pages/security/security.component.scss

@@ -19,11 +19,7 @@
   .profile-container {
     padding: 8px;
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.
+  .mat-mdc-card.profile-card {
- */
-  /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.
- */
-  mat-card.profile-card {
     padding: 24px;
     @media #{$mat-gt-sm} {
       width: 80%;
@@ -126,10 +122,3 @@
     }
   }
 }
-: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-appearance-fill .mat-form-field-underline::before {
-    background-color: transparent;
-  }
-}

ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.scss

@@ -14,31 +14,25 @@
  * limitations under the License.
  */
 :host ::ng-deep {
-  button.tb-card-button {
+  .mat-mdc-button-base.tb-card-button {
     width: 100%;
     height: 100%;
     max-width: 240px;
-    /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
+    display: flex;
- */
+    flex-direction: column;
-    .mat-button-wrapper {
+    align-items: center;
-      width: 100%;
+    mat-icon {
-      height: 100%;
+      margin: auto;
-      display: flex;
+    }
-      flex-direction: column;
+    span.mdc-button__label {
-      align-items: center;
+      height: 18px;
-      mat-icon {
+      min-height: 18px;
-        margin: auto;
+      max-height: 18px;
-      }
+      margin: 0 0 20px 0;
-      span {
+      font-size: 18px;
-        height: 18px;
+      font-weight: 400;
-        min-height: 18px;
+      line-height: 18px;
-        max-height: 18px;
+      white-space: normal;
-        margin: 0 0 20px 0;
-        font-size: 18px;
-        font-weight: 400;
-        line-height: 18px;
-        white-space: normal;
-      }
     }
     &.mat-mdc-raised-button.mat-primary {
       .mat-ripple-element {

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html

@@ -19,13 +19,13 @@
   <div fxFlex fxLayout="column" tb-fullscreen [fullscreen]="fullscreen" tb-hotkeys [hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
     <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
     <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3" fxLayoutGap="16px" fxLayoutGap.lt-xl="8px">
-      <mat-form-field floatLabel="always" hideRequiredMarker class="tb-widget-title">
+      <mat-form-field floatLabel="always" hideRequiredMarker class="tb-widget-title tb-appearance-transparent">
         <mat-label></mat-label>
         <input [disabled]="isReadOnly" matInput required maxlength="255"
                [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
                placeholder="{{ 'widget.title' | translate }}"/>
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field class="tb-appearance-transparent">
         <mat-select [disabled]="isReadOnly" matInput placeholder="{{ 'widget.type' | translate }}"
                     [(ngModel)]="widget.type" (ngModelChange)="widetTypeChanged()">
           <mat-option *ngFor="let type of allWidgetTypes" [value]="type">
@@ -116,14 +116,14 @@
       <div class="tb-editor tb-absolute-fill">
         <div #topPanel class="tb-split tb-split-vertical">
           <div #topLeftPanel class="tb-split tb-content">
-            <mat-tab-group selectedIndex="1" dynamicHeight="true" style="width: 100%; height: 100%;">
+            <mat-tab-group mat-stretch-tabs="false" selectedIndex="1" dynamicHeight="true" style="width: 100%; height: 100%;">
               <mat-tab label="{{ 'widget.resources' | translate }}">
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
                     <div fxFlex fxLayout="row" style="max-height: 40px;"
                          fxLayoutAlign="start center"
                          *ngFor="let resource of widget.resources; let i = index" >
-                      <mat-form-field fxFlex class="mat-block resource-field" floatLabel="never"
+                      <mat-form-field fxFlex class="mat-block resource-field" hideRequiredMarker="false"
                                       style="margin: 10px 0 0 0; max-height: 40px;">
                         <input required matInput [(ngModel)]="resource.url"
                                (ngModelChange)="isDirty = true"
@@ -188,7 +188,7 @@
             </mat-tab-group>
           </div>
           <div #topRightPanel class="tb-split tb-content">
-            <mat-tab-group dynamicHeight="true" style="width: 100%; height: 100%;">
+            <mat-tab-group mat-stretch-tabs="false" dynamicHeight="true" style="width: 100%; height: 100%;">
               <mat-tab label="{{ 'widget.settings-schema' | translate }}">
                 <div class="tb-resize-container" tb-fullscreen [fullscreen]="jsonSettingsFullscreen">
                   <div class="tb-editor-area-title-panel">

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss

@@ -34,31 +34,17 @@ tb-widget-editor {
   mat-form-field.resource-field {
     max-height: 40px;
     margin: 10px 0 0;
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
+    .mat-mdc-text-field-wrapper {
- */
-    /*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-mdc-form-field-flex {
- */
-      /*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 {
         max-height: 40px;
-        /*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 {
           border: 0;
+          padding-top: 7px;
+          padding-bottom: 7px;
+          min-height: 32px;
         }
       }
-      /*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;
-      }
     }
   }
 
@@ -105,12 +91,11 @@ tb-widget-editor {
     width: 100%;
     height: 100%;
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.
+  .mdc-tab[aria-labelledby='hidden'] {
- */
+    width: 0 !important;
-  .mat-tab-label[aria-labelledby='hidden'] {
+    min-width: 0;
-    width: 0px !important;
+    padding:  0;
-    min-width: 0px;
+    overflow: hidden;
-    padding:  0px;
   }
 
 }
@@ -151,7 +136,7 @@ div.tb-editor-area-title-panel {
     border-radius: 5px;
   }
 
-  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;
@@ -164,6 +149,9 @@ div.tb-editor-area-title-panel {
       color: #7b7b7b;
     }
   }
+  button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
+    height: 23px;
+  }
   .tb-help-popup-button-loading {
     background: #f3f3f3;
   }
@@ -192,6 +180,7 @@ mat-toolbar.tb-edit-toolbar {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    height: 28px;
 
     mat-icon {
       height: 20px;
@@ -200,24 +189,19 @@ mat-toolbar.tb-edit-toolbar {
     }
   }
 
-  mat-form-field {
+  .mat-mdc-form-field {
-    input, mat-select {
+    input, .mat-mdc-select {
       font-size: 1.1rem;
       font-weight: 400;
       letter-spacing: .005em;
     }
-    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.
- */
-    div.mat-form-field-infix {
-      padding-bottom: 5px;
-    }
     &.tb-widget-title {
       min-width: 250px;
     }
   }
 
   @media #{$mat-lt-lg} {
-    mat-form-field.tb-widget-title {
+    .mat-mdc-form-field.tb-widget-title {
       min-width: 0;
     }
   }

ui-ngx/src/app/modules/login/pages/login/create-password.component.html

@@ -30,13 +30,13 @@
         <fieldset [disabled]="isLoading$ | async">
           <div tb-toast fxLayout="column" class="layout-padding">
             <span style="height: 50px;"></span>
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block tb-appearance-transparent">
               <mat-label translate>common.password</mat-label>
               <input matInput type="password" autofocus formControlName="password"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block tb-appearance-transparent">
               <mat-label translate>login.password-again</mat-label>
               <input matInput type="password" formControlName="password2"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>

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

@@ -41,7 +41,7 @@
                 <div class="line"><mat-divider></mat-divider></div>
               </div>
             </div>
-            <mat-form-field>
+            <mat-form-field class="tb-appearance-transparent">
               <mat-label translate>login.username</mat-label>
               <input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
               <mat-icon matPrefix>email</mat-icon>
@@ -49,7 +49,7 @@
                 {{ 'user.invalid-email-format' | translate }}
               </mat-error>
             </mat-form-field>
-            <mat-form-field>
+            <mat-form-field class="tb-appearance-transparent">
               <mat-label translate>common.password</mat-label>
               <input id="password-input" matInput type="password" formControlName="password"/>
               <tb-toggle-password matSuffix></tb-toggle-password>

ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html

@@ -31,7 +31,7 @@
         <fieldset [disabled]="isLoading$ | async">
           <div tb-toast fxLayout="column" class="layout-padding">
             <span style="height: 50px;"></span>
-            <mat-form-field class="mat-block" hideRequiredMarker>
+            <mat-form-field class="mat-block tb-appearance-transparent" hideRequiredMarker>
               <mat-label translate>login.email</mat-label>
               <input matInput type="email" autofocus formControlName="email" email required/>
               <mat-icon class="material-icons" matPrefix>email</mat-icon>

ui-ngx/src/app/modules/login/pages/login/reset-password.component.html

@@ -33,13 +33,13 @@
         <fieldset [disabled]="isLoading$ | async">
           <div tb-toast fxLayout="column" class="layout-padding">
             <span style="height: 50px;"></span>
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block tb-appearance-transparent">
               <mat-label translate>login.new-password</mat-label>
               <input matInput type="password" autofocus formControlName="newPassword"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block tb-appearance-transparent">
               <mat-label translate>login.new-password-again</mat-label>
               <input matInput type="password" formControlName="newPassword2"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>

ui-ngx/src/app/shared/components/button/copy-button.component.scss

@@ -18,6 +18,7 @@
     height: 32px;
     width: 32px;
     line-height: 32px;
+    padding: 4px;
     .mat-icon.copied{
       color: #00C851 !important;
     }

ui-ngx/src/app/shared/components/file-input.component.scss

@@ -87,15 +87,10 @@ $previewSize: 100px !default;
   button.browse-file {
     padding: 0;
     font-size: 16px;
-    /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
+    span.mdc-button__label {
- */
-    span.mat-button-wrapper {
       display: block;
-      label {
+      cursor: pointer;
-        display: block;
+      padding: 0 16px;
-        cursor: pointer;
-        padding: 0 16px;
-      }
     }
   }
 }

ui-ngx/src/app/shared/components/footer-fab-buttons.component.scss

@@ -43,7 +43,6 @@
         margin-top: 0;
       }
       position: relative !important;
-      display: inline-block !important;
       animation: tbMoveFromBottomFade .3s ease both;
 
       &.tb-hide {

ui-ngx/src/app/shared/components/help-popup.component.html

@@ -37,11 +37,13 @@
             color="primary"
             class="tb-help-popup-text-button"
             [ngClass]="{'mat-stroked-button': popoverVisible && popoverReady}">
-      <ng-container *ngIf="triggerSafeHtml">
+      <span>
-        <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
+        <ng-container *ngIf="triggerSafeHtml">
-      </ng-container>
+          <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
-      <mat-icon *ngIf="!popoverVisible || popoverReady" class="tb-mat-16">open_in_new</mat-icon>
+        </ng-container>
-      <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" diameter="16" strokeWidth="2"></mat-spinner>
+        <mat-icon *ngIf="!popoverVisible || popoverReady" class="tb-mat-16">open_in_new</mat-icon>
+        <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" diameter="16" strokeWidth="2"></mat-spinner>
+      </span>
     </button>
   </div>
 </fieldset>

ui-ngx/src/app/shared/components/help-popup.component.scss

@@ -29,27 +29,39 @@
     border-radius: 50%;
     width: 32px !important;
     height: 32px !important;
-    svg {
+    .mdc-circular-progress__indeterminate-container {
+      width: 20px;
+      height: 20px;
       top: 6px;
       left: 6px;
     }
+    svg {
+      width: 20px;
+      height: 20px;
+    }
   }
 }
 
-.tb-help-popup-text-button {
+.tb-help-popup-text-button.mat-mdc-button.mat-mdc-button-base {
   position: relative;
   padding: 0 2px 0 8px;
   line-height: 28px;
+  height: auto;
   &.mat-mdc-outlined-button {
     padding: 0 1px 0 7px;
     line-height: 26px;
   }
-  .mat-icon {
+  .mdc-button__label > span {
-    padding-left: 4px;
+    .mat-icon {
-  }
+      vertical-align: middle;
-  .mat-mdc-progress-spinner {
+      padding-left: 4px;
-    display: inline-block;
+      box-sizing: initial;
-    margin-left: 4px;
+    }
-    margin-right: 5px;
+    .mat-mdc-progress-spinner {
+      display: inline-block;
+      margin-left: 4px;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
   }
 }

ui-ngx/src/app/shared/components/image-input.component.scss

@@ -140,15 +140,10 @@ $previewSize: 96px !default;
   button.browse-file {
     padding: 0;
     font-size: 16px;
-    /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
+    span.mdc-button__label {
- */
-    span.mat-button-wrapper {
       display: block;
-      label {
+      cursor: pointer;
-        display: block;
+      padding: 0 16px;
-        cursor: pointer;
-        padding: 0 16px;
-      }
     }
   }
 }

ui-ngx/src/app/shared/components/snack-bar-component.scss

@@ -56,6 +56,7 @@
     }
     button {
       margin: 6px 0 6px 12px;
+      color: inherit;
     }
     &.info-toast {
       background: #323232;

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

@@ -16,7 +16,7 @@
 
 -->
 <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px">
-  <section fxLayout="column" [fxShow]="isEdit">
+  <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
     <label class="tb-small hide-label" translate>timewindow.hide</label>
     <mat-checkbox [(ngModel)]="hideFlag" (ngModelChange)="onHideFlagChange()"></mat-checkbox>
   </section>

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

@@ -22,7 +22,7 @@
                      (selectedIndexChange)="timewindowForm.markAsDirty()" [(selectedIndex)]="timewindow.selectedTab">
         <mat-tab label="{{ 'timewindow.realtime' | translate }}">
           <section fxLayout="row">
-            <section *ngIf="isEdit" fxLayout="column" style="padding-top: 8px; padding-left: 16px;">
+            <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-top: 8px; padding-left: 16px;">
               <label class="tb-small hide-label" translate>timewindow.hide</label>
               <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
                             (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
@@ -33,7 +33,7 @@
                                  formControlName="realtimeType">
                   <mat-radio-button [value]="realtimeTypes.LAST_INTERVAL" color="primary">
                     <section fxLayout="row">
-                      <section *ngIf="isEdit" fxLayout="column" style="padding-right: 8px;">
+                      <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
                         <label class="tb-small hide-label" translate>timewindow.hide</label>
                         <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideLastInterval"
                                       (ngModelChange)="onHideLastIntervalChanged()"></mat-checkbox>
@@ -52,7 +52,7 @@
                   </mat-radio-button>
                   <mat-radio-button [value]="realtimeTypes.INTERVAL" color="primary">
                     <section fxLayout="row">
-                      <section *ngIf="isEdit" fxLayout="column" style="padding-right: 8px;">
+                      <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
                         <label class="tb-small hide-label" translate>timewindow.hide</label>
                         <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideQuickInterval"
                                       (ngModelChange)="onHideQuickIntervalChanged()"></mat-checkbox>
@@ -86,7 +86,7 @@
         </mat-tab>
         <mat-tab label="{{ 'timewindow.history' | translate }}">
           <section fxLayout="row">
-            <section *ngIf="isEdit" fxLayout="column" style="padding-top: 8px; padding-left: 16px;">
+            <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-top: 8px; padding-left: 16px;">
               <label class="tb-small hide-label" translate>timewindow.hide</label>
               <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
                             (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
@@ -139,7 +139,7 @@
       </mat-tab-group>
       <div *ngIf="aggregation" formGroupName="aggregation" class="mat-content mat-padding" fxLayout="column">
         <section fxLayout="row">
-          <section fxLayout="column" [fxShow]="isEdit">
+          <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
             <label class="tb-small hide-label" translate>timewindow.hide</label>
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggregation"
                           (ngModelChange)="onHideAggregationChanged()"></mat-checkbox>
@@ -156,7 +156,7 @@
           </section>
         </section>
         <section fxLayout="row" *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
-          <section fxLayout="column" [fxShow]="isEdit">
+          <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
             <label class="tb-small hide-label" translate>timewindow.hide</label>
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval"
                           (ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox>
@@ -166,10 +166,10 @@
                                                 fxLayout.xs="column"  fxLayoutAlign.xs="stretch">
               <label translate>aggregation.limit</label>
               <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
-                <mat-slider fxFlex formControlName="limit"
+                <mat-slider fxFlex
-                            thumbLabel
+                            discrete
                             min="{{minDatapointsLimit()}}"
-                            max="{{maxDatapointsLimit()}}"><input matSliderThumb [value]="timewindowForm.get('aggregation.limit').value" />
+                            max="{{maxDatapointsLimit()}}"><input matSliderThumb formControlName="limit" />
                 </mat-slider>
                 <mat-form-field class="limit-slider-value">
                   <input matInput formControlName="limit" type="number" step="1"
@@ -207,7 +207,7 @@
         </tb-timeinterval>
       </div>
       <div *ngIf="timezone" class="mat-content mat-padding" fxLayout="row">
-        <section fxLayout="column" [fxShow]="isEdit">
+        <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
           <label class="tb-small hide-label" translate>timewindow.hide</label>
           <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideTimezone"
                         (ngModelChange)="onHideTimezoneChanged()"></mat-checkbox>

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

@@ -45,7 +45,7 @@
     .limit-slider-value {
       margin-left: 16px;
       min-width: 25px;
-      max-width: 80px;
+      max-width: 100px;
     }
     mat-form-field input[type=number] {
       text-align: center;
@@ -78,12 +78,4 @@
       }
     }
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version.
- */
-  .mat-slider-horizontal .mat-slider-thumb-label {
-    width: 38px;
-    height: 38px;
-    top: -46px;
-    right: -19px;
-  }
 }

ui-ngx/src/app/shared/components/toast.directive.ts

@@ -312,7 +312,7 @@ export class TbSnackBarComponent implements AfterViewInit, OnDestroy {
   ngAfterViewInit() {
     if (this.snackBarRef) {
       this.parentEl = this.data.parent.nativeElement;
-      this.snackBarContainerEl = $(this.elementRef.nativeElement).closest('snack-bar-container')[0];
+      this.snackBarContainerEl = $(this.elementRef.nativeElement).closest('.mat-mdc-snack-bar-container')[0];
       this.snackBarContainerEl.style.position = 'absolute';
       this.updateContainerRect();
       this.updatePosition(this.snackBarRef.containerInstance.snackBarConfig);

ui-ngx/src/styles.scss

@@ -196,7 +196,6 @@ section.tb-footer-buttons {
   .tb-btn-footer {
     margin: 6px 8px;
     position: relative !important;
-    display: inline-block !important;
     animation: tbMoveFromBottomFade .3s ease both;
     &.tb-hide {
       animation: tbMoveToBottomFade .3s ease both;
@@ -947,6 +946,22 @@ mat-label {
     .mat-mdc-select-arrow-wrapper {
       transform: none;
     }
+    .mdc-text-field {
+      .mdc-floating-label:not(.mdc-floating-label--float-above) {
+        transform: translateY(-10%);
+      }
+    }
+    .mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-suffix {
+      align-self: end;
+      > .mat-icon {
+        padding-bottom: 4px;
+      }
+      .mat-mdc-icon-button.mat-mdc-button-base {
+        width: 36px;
+        height: 36px;
+        padding: 6px;
+      }
+    }
     .mat-mdc-text-field-wrapper {
       .mat-mdc-form-field-flex {
         .mat-mdc-floating-label {
@@ -1225,18 +1240,14 @@ mat-label {
     min-width: inherit;
     pointer-events: none;
     display: flex;
-  }
+    .mdc-snackbar__surface {
-
+      padding: 0;
-  .mat-mdc-snack-bar-handset {
+      border: none;
-    .mat-mdc-snack-bar-container {
+      background: none;
-      position: relative !important;
+      box-shadow: none;
-      width: 100% !important;
+    }
-      top: 0 !important;
+    .mdc-snackbar__label {
-      left: 0 !important;
+      padding: 0;
-      height: inherit !important;
-      tb-snack-bar-component {
-        width: 100%;
-      }
     }
   }
 
@@ -1405,8 +1416,13 @@ mat-label {
     text-align: center;
   }
 
-  .mat-mdc-tab-group.tb-headless {
+  .mat-mdc-tab-group {
-    margin-top: -50px;
+    &.tb-headless {
+      margin-top: -50px;
+    }
+    .mat-mdc-tab-header {
+      border-bottom: 1px solid #0000001f;
+    }
   }
 
   .tb-primary-background {