Update console dependencies (#2659)

console-webapp/package.json

@@ -16,31 +16,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.2",
+    "@angular/animations": "^19.1.4",
-    "@angular/cdk": "^18.0.2",
+    "@angular/cdk": "^19.1.2",
-    "@angular/common": "^18.0.2",
+    "@angular/common": "^19.1.4",
-    "@angular/compiler": "^18.0.2",
+    "@angular/compiler": "^19.1.4",
-    "@angular/core": "^18.0.2",
+    "@angular/core": "^19.1.4",
-    "@angular/forms": "^18.0.2",
+    "@angular/forms": "^19.1.4",
-    "@angular/material": "^18.0.2",
+    "@angular/material": "^19.1.2",
-    "@angular/platform-browser": "^18.0.2",
+    "@angular/platform-browser": "^19.1.4",
-    "@angular/platform-browser-dynamic": "^18.0.2",
+    "@angular/platform-browser-dynamic": "^19.1.4",
-    "@angular/router": "^18.0.2",
+    "@angular/router": "^19.1.4",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.3",
+    "@angular-devkit/build-angular": "^19.1.5",
-    "@angular-eslint/builder": "18.0.1",
+    "@angular-eslint/builder": "19.0.2",
-    "@angular-eslint/eslint-plugin": "18.0.1",
+    "@angular-eslint/eslint-plugin": "19.0.2",
-    "@angular-eslint/eslint-plugin-template": "18.0.1",
+    "@angular-eslint/eslint-plugin-template": "19.0.2",
-    "@angular-eslint/schematics": "18.0.1",
+    "@angular-eslint/schematics": "19.0.2",
-    "@angular-eslint/template-parser": "18.0.1",
+    "@angular-eslint/template-parser": "19.0.2",
-    "@angular/cli": "~18.0.3",
+    "@angular/cli": "~19.1.5",
-    "@angular/compiler-cli": "^18.0.2",
+    "@angular/compiler-cli": "^19.1.4",
     "@types/jasmine": "~4.0.0",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.19.74",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "concurrently": "^7.6.0",
@@ -52,6 +52,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "prettier": "2.8.7",
-    "typescript": "~5.4.5"
+    "typescript": "^5.7.3"
   }
 }

console-webapp/src/app/app.component.ts

@@ -24,6 +24,7 @@ import { UserDataService } from './shared/services/userData.service';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: false,
 })
 export class AppComponent implements AfterViewInit {
   @ViewChild(MatSidenav)

console-webapp/src/app/billingInfo/billingInfo.component.ts

@@ -20,6 +20,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
   selector: 'app-billingInfo',
   templateUrl: './billingInfo.component.html',
   styleUrls: ['./billingInfo.component.scss'],
+  standalone: false,
 })
 export class BillingInfoComponent {
   public static PATH = 'billingInfo';

console-webapp/src/app/domains/domainList.component.ts

@@ -48,6 +48,7 @@ interface DomainData {
       <button mat-button (click)="onClose()">Close</button>
     </mat-dialog-actions>
   `,
+  standalone: false,
 })
 export class ResponseDialogComponent {
   constructor(
@@ -79,6 +80,7 @@ export class ResponseDialogComponent {
       </button>
     </mat-dialog-actions>
   `,
+  standalone: false,
 })
 export class ReasonDialogComponent {
   reason: string = '';
@@ -102,6 +104,7 @@ export class ReasonDialogComponent {
   selector: 'app-domain-list',
   templateUrl: './domainList.component.html',
   styleUrls: ['./domainList.component.scss'],
+  standalone: false,
 })
 export class DomainListComponent {
   public static PATH = 'domain-list';

console-webapp/src/app/domains/registryLock.component.ts

@@ -25,6 +25,7 @@ import { RegistryLockService } from './registryLock.service';
   selector: 'app-registry-lock',
   templateUrl: './registryLock.component.html',
   styleUrls: ['./registryLock.component.scss'],
+  standalone: false,
 })
 export class RegistryLockComponent {
   readonly isLocked = computed(() =>

console-webapp/src/app/header/header.component.ts

@@ -19,6 +19,7 @@ import { BreakPointObserverService } from '../shared/services/breakPoint.service
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
+  standalone: false,
 })
 export class HeaderComponent {
   private isNavOpen = false;

console-webapp/src/app/home/home.component.ts

@@ -25,6 +25,7 @@ import { BreakPointObserverService } from '../shared/services/breakPoint.service
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
+  standalone: false,
 })
 export class HomeComponent {
   constructor(

console-webapp/src/app/lock/registryLockVerify.component.ts

@@ -25,6 +25,7 @@ import { DomainListComponent } from '../domains/domainList.component';
   templateUrl: './registryLockVerify.component.html',
   styleUrls: ['./registryLockVerify.component.scss'],
   providers: [RegistryLockVerifyService],
+  standalone: false,
 })
 export class RegistryLockVerifyComponent {
   public static PATH = 'registry-lock-verify';

console-webapp/src/app/navigation/navigation.component.ts

@@ -33,6 +33,7 @@ interface NavMenuNode extends RouteWithIcon {
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss'],
+  standalone: false,
 })
 export class NavigationComponent {
   renderRouter: boolean = true;

console-webapp/src/app/ote/newOte.component.ts

@@ -26,7 +26,6 @@ export interface OteCreateResponse extends Map<string, string> {
 
 @Component({
   selector: 'app-ote',
-  standalone: true,
   imports: [MaterialModule, SnackBarModule],
   templateUrl: './newOte.component.html',
   styleUrls: ['./newOte.component.scss'],

console-webapp/src/app/ote/oteStatus.component.ts

@@ -31,7 +31,6 @@ export interface OteStatusResponse {
 
 @Component({
   selector: 'app-ote-status',
-  standalone: true,
   imports: [MaterialModule, SnackBarModule, CommonModule],
   templateUrl: './oteStatus.component.html',
   styleUrls: ['./oteStatus.component.scss'],

console-webapp/src/app/registrar/newRegistrar.component.ts

@@ -33,6 +33,7 @@ interface LocalizedAddressStreet {
   templateUrl: './newRegistrar.component.html',
   styleUrls: ['./newRegistrar.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export default class NewRegistrarComponent {
   protected newRegistrar: Registrar;

console-webapp/src/app/registrar/registrarDetails.component.ts

@@ -27,6 +27,7 @@ import { environment } from '../../environments/environment';
   selector: 'app-registrar-details',
   templateUrl: './registrarDetails.component.html',
   styleUrls: ['./registrarDetails.component.scss'],
+  standalone: false,
 })
 export class RegistrarDetailsComponent implements OnInit {
   public static PATH = 'registrars/:id';

console-webapp/src/app/registrar/registrarSelector.component.ts

@@ -19,6 +19,7 @@ import { RegistrarService } from './registrar.service';
   selector: 'app-registrar-selector',
   templateUrl: './registrarSelector.component.html',
   styleUrls: ['./registrarSelector.component.scss'],
+  standalone: false,
 })
 export class RegistrarSelectorComponent {
   registrarInput = signal<string>(this.registrarService.registrarId());

console-webapp/src/app/registrar/registrarsTable.component.ts

@@ -78,6 +78,7 @@ export const columns = [
   templateUrl: './registrarsTable.component.html',
   styleUrls: ['./registrarsTable.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class RegistrarComponent {
   public static PATH = 'registrars';

console-webapp/src/app/resources/resources.component.ts

@@ -19,6 +19,7 @@ import { UserDataService } from '../shared/services/userData.service';
   selector: 'app-resources',
   templateUrl: './resources.component.html',
   styleUrls: ['./resources.component.scss'],
+  standalone: false,
 })
 export class ResourcesComponent {
   public static PATH = 'resources';

console-webapp/src/app/settings/contact/contact.component.ts

@@ -27,6 +27,7 @@ import {
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export default class ContactComponent {
   public static PATH = 'contact';

console-webapp/src/app/settings/contact/contactDetails.component.ts

@@ -27,6 +27,7 @@ import {
   selector: 'app-contact-details',
   templateUrl: './contactDetails.component.html',
   styleUrls: ['./contactDetails.component.scss'],
+  standalone: false,
 })
 export class ContactDetailsComponent {
   protected contactTypeToTextMap = contactTypeToTextMap;

console-webapp/src/app/settings/security/eppPasswordEdit.component.ts

@@ -33,6 +33,7 @@ type errorFriendlyText = { [type in errorCode]: String };
   selector: 'app-epp-password-edit',
   templateUrl: './eppPasswordEdit.component.html',
   styleUrls: ['./eppPasswordEdit.component.scss'],
+  standalone: false,
 })
 export default class EppPasswordEditComponent {
   MIN_MAX_LENGHT = new String(

console-webapp/src/app/settings/security/security.component.ts

@@ -23,6 +23,7 @@ import { SecurityService, apiToUiConverter } from './security.service';
   selector: 'app-security',
   templateUrl: './security.component.html',
   styleUrls: ['./security.component.scss'],
+  standalone: false,
 })
 export default class SecurityComponent {
   public static PATH = 'security';

console-webapp/src/app/settings/security/securityEdit.component.ts

@@ -26,6 +26,7 @@ import { SecurityService, apiToUiConverter } from './security.service';
   selector: 'app-security-edit',
   templateUrl: './securityEdit.component.html',
   styleUrls: ['./securityEdit.component.scss'],
+  standalone: false,
 })
 export default class SecurityEditComponent {
   dataSource: SecuritySettings = {};

console-webapp/src/app/settings/settings.component.ts

@@ -19,6 +19,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class SettingsComponent {
   public static PATH = 'settings';

console-webapp/src/app/settings/whois/whois.component.ts

@@ -21,6 +21,7 @@ import { WhoisService } from './whois.service';
   selector: 'app-whois',
   templateUrl: './whois.component.html',
   styleUrls: ['./whois.component.scss'],
+  standalone: false,
 })
 export default class WhoisComponent {
   public static PATH = 'whois';

console-webapp/src/app/settings/whois/whoisEdit.component.ts

@@ -26,6 +26,7 @@ import { WhoisService } from './whois.service';
   selector: 'app-whois-edit',
   templateUrl: './whoisEdit.component.html',
   styleUrls: ['./whoisEdit.component.scss'],
+  standalone: false,
 })
 export default class WhoisEditComponent {
   registrarInEdit: Registrar | undefined;

console-webapp/src/app/shared/components/notifications/notifications.component.ts

@@ -24,6 +24,7 @@ interface Notification {
   selector: 'app-notifications',
   templateUrl: './notifications.component.html',
   styleUrls: ['./notifications.component.scss'],
+  standalone: false,
 })
 export class NotificationsComponent {
   protected mockNotifications: Notification[] = [

console-webapp/src/app/shared/components/selectedRegistrarWrapper/selectedRegistrarWrapper.component.ts

@@ -31,6 +31,7 @@ import { RegistrarService } from 'src/app/registrar/registrar.service';
     </div>
     }
   `,
+  standalone: false,
 })
 export class SelectedRegistrarWrapper {
   constructor(protected registrarService: RegistrarService) {}

console-webapp/src/app/shared/directives/forceFocus.directive.ts

@@ -16,6 +16,7 @@ import { Directive, ElementRef, effect } from '@angular/core';
 
 @Directive({
   selector: '[forceFocus]',
+  standalone: false,
 })
 export class ForceFocusDirective {
   constructor(private el: ElementRef) {

console-webapp/src/app/shared/directives/locationBack.directive.ts

@@ -17,6 +17,7 @@ import { Directive, HostListener } from '@angular/core';
 
 @Directive({
   selector: '[backButton]',
+  standalone: false,
 })
 export class LocationBackDirective {
   constructor(private location: Location) {}

console-webapp/src/app/shared/directives/userLevelVisiblity.directive.ts

@@ -35,6 +35,7 @@ export const DISABLED_ELEMENTS_PER_ROLE = {
 
 @Directive({
   selector: '[elementId]',
+  standalone: false,
 })
 export class UserLevelVisibility {
   @Input() elementId!: RESTRICTED_ELEMENTS | null;

console-webapp/src/app/support/support.component.ts

@@ -19,6 +19,7 @@ import { UserDataService } from '../shared/services/userData.service';
   selector: 'app-support',
   templateUrl: './support.component.html',
   styleUrls: ['./support.component.scss'],
+  standalone: false,
 })
 export class SupportComponent {
   public static PATH = 'support';

console-webapp/src/app/tlds/tlds.component.ts

@@ -18,5 +18,6 @@ import { Component } from '@angular/core';
   selector: 'app-tlds',
   templateUrl: './tlds.component.html',
   styleUrls: ['./tlds.component.scss'],
+  standalone: false,
 })
 export class TldsComponent {}

console-webapp/src/app/users/userDetails.component.scss

@@ -14,6 +14,7 @@
 
 .console-app {
   &__user-details {
+    max-width: 616px;
     &-controls {
       display: flex;
       align-items: center;
@@ -34,6 +35,5 @@
       border: 1px solid #ddd;
       border-radius: 10px;
     }
-    max-width: 616px;
   }
 }

console-webapp/src/app/users/userDetails.component.ts

@@ -27,7 +27,6 @@ import { UserEditFormComponent } from './userEditForm.component';
   selector: 'app-user-edit',
   templateUrl: './userDetails.component.html',
   styleUrls: ['./userDetails.component.scss'],
-  standalone: true,
   imports: [
     FormsModule,
     MaterialModule,

console-webapp/src/app/users/userEditForm.component.ts

@@ -29,19 +29,17 @@ import { User } from './users.service';
   selector: 'app-user-edit-form',
   templateUrl: './userEditForm.component.html',
   styleUrls: ['./userEditForm.component.scss'],
-  standalone: true,
   imports: [FormsModule, MaterialModule, CommonModule],
   providers: [],
 })
 export class UserEditFormComponent {
   @ViewChild('form') form!: ElementRef;
   isNew = input<boolean>(false);
-  user = input<User>(
+  user = input<User, User>(
     {
       emailAddress: '',
       role: 'ACCOUNT_MANAGER',
     },
-    // @ts-ignore - legit option, typescript fails to match it to a proper type
     { transform: (user: User) => structuredClone(user) }
   );
 

console-webapp/src/app/users/users.component.ts

@@ -32,7 +32,6 @@ import { UserEditFormComponent } from './userEditForm.component';
   selector: 'app-users',
   templateUrl: './users.component.html',
   styleUrls: ['./users.component.scss'],
-  standalone: true,
   imports: [
     FormsModule,
     MaterialModule,

console-webapp/src/app/users/usersList.component.ts

@@ -43,7 +43,6 @@ export const columns = [
   selector: 'app-users-list',
   templateUrl: './usersList.component.html',
   styleUrls: ['./usersList.component.scss'],
-  standalone: true,
   imports: [MaterialModule, CommonModule],
   providers: [],
 })

console-webapp/src/styles.scss

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 @use "@angular/material" as mat;
-@import "app/registrar/registrarSelector.component.scss";
+@use "app/registrar/registrarSelector.component.scss";
 
 html,
 body {

console-webapp/src/theme.scss

@@ -1,7 +1,6 @@
 @use "sass:map";
 @use "sass:math";
 @use "@angular/material" as mat;
-@use "@material/textfield";
 
 $secondary-color: #80868b;
 $border-color: #dadce0;
@@ -13,7 +12,8 @@ $border-color: #dadce0;
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 $typographyConfig: mat.m2-define-typography-config(
   $headline-1: