feat(angular-material): Updates the Angular Material to v15 & Angular…

… CDK to v15

upgrade angular-material to 16
fixes: kubernetes#7800

BREAKING CHANGE: ⛵upgrade angular-material to 16
Signed-off-by: romdhanisamir94@gmail.com

modules/web/package.json

@@ -43,18 +43,18 @@
     "src/**/*.html": []
   },
   "dependencies": {
-    "@angular/animations": "14.2.2",
-    "@angular/cdk": "14.2.2",
-    "@angular/common": "16.2.1",
-    "@angular/compiler": "16.2.1",
-    "@angular/core": "16.2.1",
+    "@angular/animations": "16.2.8",
+    "@angular/cdk": "15.2.9",
+    "@angular/common": "16.2.8",
+    "@angular/compiler": "16.2.8",
+    "@angular/core": "16.2.8",
     "@angular/flex-layout": "15.0.0-beta.42",
-    "@angular/forms": "16.2.1",
-    "@angular/localize": "16.2.1",
-    "@angular/material": "14.2.2",
-    "@angular/platform-browser": "16.2.1",
-    "@angular/platform-browser-dynamic": "16.2.1",
-    "@angular/router": "16.2.1",
+    "@angular/forms": "16.2.8",
+    "@angular/localize": "16.2.8",
+    "@angular/material": "15.2.9",
+    "@angular/platform-browser": "16.2.8",
+    "@angular/platform-browser-dynamic": "16.2.8",
+    "@angular/router": "16.2.8",
     "@swimlane/ngx-charts": "20.4.1",
     "ace-builds": "1.28.0",
     "core-js": "3.33.0",
@@ -84,8 +84,8 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "16.2.0",
     "@angular/cli": "16.2.0",
-    "@angular/compiler-cli": "16.2.1",
-    "@angular/language-service": "16.2.1",
+    "@angular/compiler-cli": "16.2.8",
+    "@angular/language-service": "16.2.8",
     "@babel/core": "7.23.0",
     "@babel/preset-env": "7.22.20",
     "@babel/register": "7.22.15",

modules/web/src/chrome/userpanel/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject, OnInit, ViewChild} from '@angular/core';
-import {MatMenuTrigger} from '@angular/material/menu';
+import {MatLegacyMenuTrigger as MatMenuTrigger} from '@angular/material/legacy-menu';
 import {LoginStatus} from '@api/root.api';
 import {IConfig} from '@api/root.ui';
 import {AuthService} from '@common/services/global/authentication';

modules/web/src/common/components/card/component.spec.ts

@@ -14,10 +14,10 @@
 
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MESSAGES, MESSAGES_DI_TOKEN} from '../../../index.messages';

modules/web/src/common/components/chips/chipdialog/dialog.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {Chip} from '../component';
 
 @Component({

modules/web/src/common/components/chips/component.ts

@@ -21,7 +21,7 @@ import {
   OnInit,
   SimpleChanges,
 } from '@angular/core';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig} from '@angular/material/legacy-dialog';
 import {StringMap} from '@api/root.shared';
 // @ts-ignore
 import cropUrl from 'crop-url';

modules/web/src/common/components/condition/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnInit} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {Condition} from 'typings/root.api';
 
 @Component({

modules/web/src/common/components/endpoint/cardlist/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {Endpoint} from '@api/root.api';
 
 @Component({

modules/web/src/common/components/ingressrulelist/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnChanges, OnInit, SimpleChange} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {IngressSpecRule, IngressSpecRuleHttpPath, IngressSpecTLS} from '@api/root.api';
 import {SupportedResources} from '@api/root.shared';
 import isArray from 'lodash-es/isArray';

modules/web/src/common/components/limits/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {LimitRange} from 'typings/root.api';
 
 @Component({

modules/web/src/common/components/module.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {NgModule} from '@angular/core';
-import {MatTableModule} from '@angular/material/table';
+import {MatLegacyTableModule as MatTableModule} from '@angular/material/legacy-table';
 
 import {SharedModule} from '../../shared.module';
 import {DirectivesModule} from '../directives/module';

modules/web/src/common/components/namespace/changedialog/dialog.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 
 @Component({
   selector: 'kd-namespace-change-dialog',

modules/web/src/common/components/namespace/component.ts

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import {Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
-import {MatSelect} from '@angular/material/select';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatLegacySelect as MatSelect} from '@angular/material/legacy-select';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {NamespaceList} from '@api/root.api';
 import {IConfig} from '@api/root.ui';

modules/web/src/common/components/objectmeta/component.spec.ts

@@ -15,12 +15,12 @@
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
-import {MatCardModule} from '@angular/material/card';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatDialogModule} from '@angular/material/dialog';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';

modules/web/src/common/components/policyrule/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnInit} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {PolicyRule} from 'typings/root.api';
 
 @Component({

modules/web/src/common/components/quotas/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {ResourceQuotaDetail} from 'typings/root.api';
 
 @Component({

modules/web/src/common/components/resourcelist/crdversion/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {CRDVersion} from '@api/root.api';
 
 @Component({

modules/web/src/common/components/subject/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {Subject} from 'typings/root.api';
 import {KdStateService} from '../../services/global/state';
 import {Resource} from '../../services/resource/endpoint';

modules/web/src/common/components/uploadfile/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {HTMLInputEvent, KdFile} from '@api/root.ui';
 import {AlertDialog, AlertDialogConfig} from 'common/dialogs/alert/dialog';
 

modules/web/src/common/components/volumemount/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {VolumeMounts} from '@api/root.api';
 import {SupportedResources} from '@api/root.shared';
 import {PersistentVolumeSource} from '@api/volume.api';

modules/web/src/common/components/workloadstatus/component.spec.ts

@@ -16,10 +16,10 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {FlexLayoutModule} from '@angular/flex-layout';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {AppConfig} from '@api/root.api';

modules/web/src/common/dialogs/alert/dialog.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 
 export interface AlertDialogConfig {
   title: string;

modules/web/src/common/dialogs/config/dialog.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA} from '@angular/material/legacy-dialog';
 
 export interface ConfirmDialogConfig {
   title: string;

modules/web/src/common/dialogs/deleteresource/dialog.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {ResourceMeta} from '../../services/global/actionbar';
 
 @Component({

modules/web/src/common/dialogs/download/dialog.ts

@@ -14,7 +14,7 @@
 
 import {HttpClient, HttpEventType, HttpParams, HttpRequest, HttpResponse} from '@angular/common/http';
 import {Component, Inject, OnDestroy} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {LogOptions} from '@api/root.api';
 import {saveAs} from 'file-saver';
 import {Subject} from 'rxjs';

modules/web/src/common/dialogs/editresource/dialog.ts

@@ -15,7 +15,7 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {MatButtonToggleGroup} from '@angular/material/button-toggle';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {dump as toYaml, load as fromYaml} from 'js-yaml';
 import {EditorMode} from '../../components/textinput/component';
 

modules/web/src/common/dialogs/previewdeployment/dialog.ts

@@ -14,7 +14,7 @@
 
 import {Component, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {MatButtonToggleGroup} from '@angular/material/button-toggle';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {dump as toYaml, load as fromYaml} from 'js-yaml';
 import {EditorMode} from '@common/components/textinput/component';
 import {AppDeploymentSpec} from '@api/root.api';

modules/web/src/common/dialogs/restartresource/dialog.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA} from '@angular/material/legacy-dialog';
 import {ResourceMeta} from '../../services/global/actionbar';
 
 @Component({

modules/web/src/common/dialogs/scaleresource/dialog.ts

@@ -14,7 +14,7 @@
 
 import {HttpClient} from '@angular/common/http';
 import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {ReplicaCounts} from '@api/root.api';
 
 import {ResourceMeta} from '../../services/global/actionbar';

modules/web/src/common/dialogs/triggerresource/dialog.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {ResourceMeta} from '../../services/global/actionbar';
 
 @Component({

modules/web/src/common/resources/list.ts

@@ -25,9 +25,9 @@ import {
   Type,
   ViewChild,
 } from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatLegacyPaginator as MatPaginator} from '@angular/material/legacy-paginator';
 import {MatSort} from '@angular/material/sort';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {Router} from '@angular/router';
 import {Event as KdEvent, Resource, ResourceList} from '@api/root.api';
 import {ActionColumn, ActionColumnDef, ColumnWhenCallback, ColumnWhenCondition, OnListChangeEvent} from '@api/root.ui';

modules/web/src/common/services/create/service.ts

@@ -14,7 +14,7 @@
 
 import {HttpClient, HttpErrorResponse} from '@angular/common/http';
 import {Inject, Injectable} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {Router} from '@angular/router';
 import {AppDeploymentContentResponse, AppDeploymentContentSpec, AppDeploymentSpec} from '@api/root.api';
 import {IConfig} from '@api/root.ui';

modules/web/src/common/services/global/pinner.ts

@@ -16,7 +16,7 @@ import {Injectable} from '@angular/core';
 import {PinnedResource} from '@api/root.api';
 import {HttpClient, HttpErrorResponse} from '@angular/common/http';
 import {Subject} from 'rxjs';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig} from '@angular/material/legacy-dialog';
 import {AlertDialog, AlertDialogConfig} from '../../dialogs/alert/dialog';
 import {VerberService} from './verber';
 

modules/web/src/common/services/global/verber.ts

@@ -14,7 +14,7 @@
 
 import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
 import {EventEmitter, Injectable} from '@angular/core';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig} from '@angular/material/legacy-dialog';
 import {ObjectMeta, TypeMeta} from '@api/root.api';
 import {filter, switchMap} from 'rxjs/operators';
 

modules/web/src/common/services/guard/candeactivate.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Injectable} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 
 import {ConfirmDialog, ConfirmDialogConfig} from '@common/dialogs/config/dialog';
 import {ICanDeactivate} from '@common/interfaces/candeactivate';

modules/web/src/create/from/form/component.ts

@@ -15,7 +15,7 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {ActivatedRoute, Router} from '@angular/router';
 import {
   AppDeploymentSpec,

modules/web/src/create/from/form/createnamespace/dialog.ts

@@ -15,7 +15,7 @@
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {Component, Inject, OnInit} from '@angular/core';
 import {AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {IConfig} from '@api/root.ui';
 import {switchMap} from 'rxjs/operators';
 import {AlertDialog, AlertDialogConfig} from '@common/dialogs/alert/dialog';

modules/web/src/create/from/form/createsecret/dialog.ts

@@ -15,7 +15,7 @@
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {Component, Inject, OnInit} from '@angular/core';
 import {AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {IConfig} from '@api/root.ui';
 import {switchMap} from 'rxjs/operators';
 import {AlertDialog, AlertDialogConfig} from '@common/dialogs/alert/dialog';

modules/web/src/index.config.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {InjectionToken} from '@angular/core';
-import {MatTooltipDefaultOptions} from '@angular/material/tooltip';
+import {MatLegacyTooltipDefaultOptions as MatTooltipDefaultOptions} from '@angular/material/legacy-tooltip';
 import {IConfig, LanguageConfig} from '@api/root.ui';
 
 const supportedLanguages: LanguageConfig[] = [