RED-5875: Upgrade to new Angular Material components (tooltip)

src/assets/styles/common-tooltips.scss

@@ -1,29 +1,31 @@
-.mat-tooltip {
-    background-color: var(--iqser-accent);
-    border-radius: 3px !important;
-    padding: 10px;
-    margin: 12px !important;
-    font-size: 11px;
-    line-height: 14px;
-    color: var(--iqser-white) !important;
-    position: relative;
-    overflow: visible !important;
-    text-align: center;
+.mdc-tooltip {
+    .mdc-tooltip__surface {
+        background-color: var(--iqser-accent);
+        border-radius: 3px !important;
+        padding: 10px;
+        margin: 12px !important;
+        font-size: 11px;
+        line-height: 14px;
+        color: var(--iqser-white) !important;
+        position: relative;
+        overflow: visible !important;
+        text-align: center;
+    }
 
-    &.multiline {
+    &.small .mdc-tooltip__surface {
+        max-width: 160px;
+    }
+
+    &.multiline .mdc-tooltip__surface {
         white-space: pre-line;
         text-align: left;
     }
 
-    &.break-all {
+    &.break-all .mdc-tooltip__surface {
         word-break: break-all;
     }
 
-    &.small {
-        max-width: 160px;
-    }
-
-    &.warn {
+    &.warn .mdc-tooltip__surface {
         background-color: var(--iqser-yellow-2);
         color: var(--iqser-accent) !important;
     }

src/lib/buttons/buttons.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { ChevronButtonComponent } from './chevron-button/chevron-button.component';
 import { CircleButtonComponent } from './circle-button/circle-button.component';
@@ -16,4 +16,5 @@ const components = [ChevronButtonComponent, CircleButtonComponent, IconButtonCom
     imports: [CommonModule, IqserIconsModule, TranslateModule, ...matModules],
     exports: [...components],
 })
-export class IqserButtonsModule {}
+export class IqserButtonsModule {
+}

src/lib/buttons/circle-button/circle-button.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatLegacyTooltip as MatTooltip } from '@angular/material/legacy-tooltip';
+import { MatTooltip } from '@angular/material/tooltip';
 import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
 import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
 

src/lib/common-ui.module.ts

@@ -19,7 +19,7 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { ConfirmationDialogComponent } from './dialog';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { IqserSkeletonModule } from './skeleton/skeleton.module';

src/lib/listing/listing.module.ts

@@ -4,7 +4,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { TableHeaderComponent } from './table-header/table-header.component';
 import { IqserFiltersModule } from '../filtering';
 import { IqserInputsModule } from '../inputs';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TableColumnNameComponent } from './table-column-name/table-column-name.component';
 import { ScrollButtonComponent } from './scroll-button/scroll-button.component';
 import { TableComponent } from './table/table.component';

src/lib/shared/shared.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { LogoComponent, SideNavComponent, SmallChipComponent, StatusBarComponent } from './index';
 import { CommonModule } from '@angular/common';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { IqserIconsModule } from '../icons';
 
 const components = [SmallChipComponent, StatusBarComponent, SideNavComponent, LogoComponent];

src/lib/users/iqser-users.module.ts

@@ -12,7 +12,7 @@ import { IqserAuthGuard } from './guards/iqser-auth-guard.service';
 import { IqserConfigService } from '../services';
 import { NamePipe } from './name.pipe';
 import { InitialsAvatarComponent } from './components/initials-avatar/initials-avatar.component';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { CommonModule } from '@angular/common';
 import { UserButtonComponent } from './components/user-button/user-button.component';
 import { MatIconModule } from '@angular/material/icon';