BREAKING: upgrade packages to support angular 17 (#2076)

Co-authored-by: Victor <victor.alcantaragarcia@teradata.com>
Teradata · Jan 3, 2024 · f6206fb · f6206fb
1 parent bd38fc4
commit f6206fb
Show file tree

Hide file tree

Showing 59 changed files with 25,199 additions and 18,453 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,12 +1,12 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx", "rxjs", "rxjs-angular"],
+  "plugins": ["@nx", "rxjs", "rxjs-angular"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": false,
@@ -28,7 +28,7 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "parserOptions": {
         "project": ["tsconfig.*?.json"],
         "warnOnUnsupportedTypeScriptVersion": false
@@ -40,7 +40,7 @@
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     }
   ]

diff --git a/.gitignore b/.gitignore
@@ -39,5 +39,6 @@ testem.log
 Thumbs.db
 
 .angular
+.nx
 storybook-static
 build-storybook.log
diff --git a/.prettierignore b/.prettierignore
@@ -2,3 +2,5 @@
 
 /dist
 /coverage
+
+/.nx/cache
diff --git a/README.md b/README.md
@@ -15,9 +15,7 @@ Covalent is Teradata's design system used to create Teradata branded experiences
 
 ## Setup
 
-- Ensure you have Node 12.20.x+ and NPM 6+ installed.
-- Install Angular CLI `npm i -g @angular/cli`
-- Install Typescript `npm i -g typescript`
+- Ensure you have Node 18.12.0+
 - Install Node packages `npm ci`
 - Run local build `npm run start`
 
@@ -38,14 +36,15 @@ Covalent is Teradata's design system used to create Teradata branded experiences
 
 Certain covalent version are meant for certain angular versions, and here is the matrix:
 
-|     Covalent     |      Angular      |
-| :--------------: | :---------------: |
-|       2.X        |        8.X        |
-|       3.X        | 9.X / 10.X / 11.x |
-|       4.X        |    12.X / 13.X    |
-|       5.X        |       14.X        |
-|       6.X        |       15.X        |
-|       7.X        |       16.X        |
+| Covalent |      Angular      |
+| :------: | :---------------: |
+|   2.X    |        8.X        |
+|   3.X    | 9.X / 10.X / 11.x |
+|   4.X    |    12.X / 13.X    |
+|   5.X    |       14.X        |
+|   6.X    |       15.X        |
+|   7.X    |       16.X        |
+|   8.X    |       17.X        |
 
 ## Browser Support
 

diff --git a/apps/docs-app/.eslintrc.json b/apps/docs-app/.eslintrc.json
@@ -5,14 +5,14 @@
     {
       "files": ["*.ts"],
       "extends": [
-        "plugin:@nrwl/nx/angular",
+        "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {}
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

diff --git a/apps/docs-app/project.json b/apps/docs-app/project.json
@@ -90,22 +90,22 @@
       "executor": "@angular-builders/custom-webpack:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "docs-app:build:production"
+          "buildTarget": "docs-app:build:production"
         },
         "development": {
-          "browserTarget": "docs-app:build:development"
+          "buildTarget": "docs-app:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "docs-app:build"
+        "buildTarget": "docs-app:build"
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "apps/docs-app/src/**/*.ts",

diff --git a/apps/docs-app/src/_teradata-branding.scss b/apps/docs-app/src/_teradata-branding.scss
@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 /**
 * Colors
 */
@@ -250,14 +252,14 @@ $td-light-theme-background: (
 // Foreground palette for light themes.
 $td-light-theme-foreground: (
   base: black,
-  divider: $dark-dividers,
-  dividers: $dark-dividers,
-  disabled: $dark-disabled-text,
+  divider: map-get(mat.$light-theme-foreground-palette, 'divider'),
+  dividers: map-get(mat.$light-theme-foreground-palette, 'dividers'),
+  disabled: map-get(mat.$light-theme-foreground-palette, 'disabled'),
   disabled-button: rgba(black, 0.26),
-  disabled-text: $dark-disabled-text,
+  disabled-text: map-get(mat.$light-theme-foreground-palette, 'disabled-text'),
   elevation: black,
-  hint-text: $dark-disabled-text,
-  secondary-text: $dark-secondary-text,
+  hint-text: map-get(mat.$light-theme-foreground-palette, 'disabled-text'),
+  secondary-text: map-get(mat.$light-theme-foreground-palette, 'secondary-text'),
   icon: rgba(black, 0.54),
   icons: rgba(black, 0.54),
   text: rgba(black, 0.87),
@@ -318,14 +320,14 @@ $td-dark-theme-background: (
 // Foreground palette for dark themes.
 $td-dark-theme-foreground: (
   base: white,
-  divider: $light-dividers,
-  dividers: $light-dividers,
-  disabled: $light-disabled-text,
+  divider: map-get(mat.$dark-theme-foreground-palette, 'divider'),
+  dividers: map-get(mat.$dark-theme-foreground-palette, 'dividers'),
+  disabled: map-get(mat.$dark-theme-foreground-palette, 'disabled'),
   disabled-button: rgba(white, 0.3),
-  disabled-text: $light-disabled-text,
+  disabled-text: map-get(mat.$dark-theme-foreground-palette, 'disabled-text'),
   elevation: black,
-  hint-text: $light-disabled-text,
-  secondary-text: $light-secondary-text,
+  hint-text: map-get(mat.$dark-theme-foreground-palette, 'disabled-text'),
+  secondary-text: map-get(mat.$dark-theme-foreground-palette, 'secondary-text'),
   icon: white,
   icons: white,
   text: white,
@@ -444,7 +446,7 @@ body {
 
   .bgc-td-orange-100,
   .bgc-td-orange-50 {
-    background-color: mat-color($td-orange, 50);
+    background-color: mat-color($td-orange, 100);
   }
 
   .tc-td-orange,
@@ -470,7 +472,7 @@ body {
 
   .tc-td-orange-100,
   .tc-td-orange-50 {
-    color: mat-color($td-orange, 50);
+    color: mat-color($td-orange, 100);
   }
 
   .fill-td-orange,
@@ -496,7 +498,7 @@ body {
 
   .fill-td-orange-100,
   .fill-td-orange-50 {
-    fill: mat-color($td-orange, 50);
+    fill: mat-color($td-orange, 100);
   }
   // Yellow
   .bgc-td-yellow,

diff --git a/.../dynamic-forms-demo-custom-validation/dynamic-forms-demo-custom-validation.component.html b/.../dynamic-forms-demo-custom-validation/dynamic-forms-demo-custom-validation.component.html
@@ -28,7 +28,7 @@ <h4>Multiple Validators</h4>
         >Password needs from 8 - 20 characters.</span
       >
       <span *ngIf="control.hasError('oneSpecialChar')"
-        >Need at least one special character (!, @, #, $, %).</span
+        >Need at least one special character (!, &#64;, #, $, %).</span
       >
     </span>
   </ng-template>

diff --git a/...red-markdown/demos/flavored-markdown-demo-basic/flavored-markdown-demo-basic.component.ts b/...red-markdown/demos/flavored-markdown-demo-basic/flavored-markdown-demo-basic.component.ts
@@ -21,5 +21,12 @@ export class FlavoredMarkdownDemoBasicComponent {
     + Three
       + subline
       + second subline
+
+
+    | Tables        | Are           | Cool  |
+    | ------------- |:-------------:| -----:|
+    | **col 3 is**  | right-aligned | $1600 |
+    | col 2 is      | *centered*    |   $12 |
+    | zebra stripes | are neat      |    $1 |  
   `;
 }
diff --git a/apps/docs-app/src/app/content/components/component-demos/markdown/markdown.component.ts b/apps/docs-app/src/app/content/components/component-demos/markdown/markdown.component.ts
@@ -11,6 +11,12 @@ export class MarkdownDemoComponent {
     # Heading (H1)
     ## Sub Heading (H2)
     ### Steps (H3)
+
+    | Tables        | Are           | Cool  |
+    | ------------- |:-------------:| -----:|
+    | **col 3 is**  | right-aligned | $1600 |
+    | col 2 is      | *centered*    |   $12 |
+    | zebra stripes | are neat      |    $1 |
   `;
 
   jumpToH1(): void {

diff --git a/apps/docs-app/src/app/content/docs/angular-material/angular-material.component.html b/apps/docs-app/src/app/content/docs/angular-material/angular-material.component.html
@@ -7,8 +7,8 @@ <h1 class="push-bottom-sm mat-h1">Angular Material</h1>
 <section>
   <h3>Core Components</h3>
   <p>
-    The UI Platform is built on top of @angular/material components which are
-    the core of Covalent.
+    The UI Platform is built on top of &#64;angular/material components which
+    are the core of Covalent.
   </p>
   <h3>New &amp; Custom Components</h3>
   <p>

diff --git a/apps/docs-app/src/app/content/docs/build-tasks/build-tasks.component.html b/apps/docs-app/src/app/content/docs/build-tasks/build-tasks.component.html
@@ -7,7 +7,7 @@ <h3>Command Line Build Tasks</h3>
     <h4>Important: Make sure you have Node 6.11.1 or greater!</h4>
     <p>First install the CLI</p>
     <td-highlight codeLang="bash"
-      >npm install -g @angular/cli@latest</td-highlight
+      >npm install -g &#64;angular/cli&#64;latest</td-highlight
     >
     <h4>Local server</h4>
     <p>Serve your app locally by navingating to the directory and running:</p>

diff --git a/apps/docs-app/src/app/content/docs/creating/creating.component.html b/apps/docs-app/src/app/content/docs/creating/creating.component.html
@@ -30,7 +30,7 @@ <h3>Generate Component</h3>
     <td-highlight codeLang="typescript">
       {{ newViewRootTypescript }}
     </td-highlight>
-    <p>And define those declarations/imports in @NgModule:</p>
+    <p>And define those declarations/imports in &#64;NgModule:</p>
     <td-highlight codeLang="typescript">
       {{ newViewFeatureTypescript }}
     </td-highlight>

diff --git a/apps/docs-app/src/app/content/docs/mock-data/mock-data.component.html b/apps/docs-app/src/app/content/docs/mock-data/mock-data.component.html
@@ -58,7 +58,7 @@ <h3>Customizing Mock Data Schema</h3>
     <td-highlight codeLang="bash">
       # this is a sample schema file for a user object. --- initial_entries: 10
       randomize: false displayname: _firstname_ _lastname_ id:
-      _firstname_._lastname_ email: _firstname_._lastname_@_company_.com
+      _firstname_._lastname_ email: _firstname_._lastname_&#64;_company_.com
       created: _createdtimestamp_ last_access: _itemtimestamp_ site_admin:
       _admin_ ...
     </td-highlight>

diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html
@@ -340,7 +340,7 @@ <h3>Demos:</h3>
         (click)="bounceState = !bounceState"
         color="accent"
       >
-        @tdBounce
+        &#64;tdBounce
         <mat-icon>mood</mat-icon>
       </button>
 
@@ -351,7 +351,7 @@ <h3>Demos:</h3>
         (click)="flashState = !flashState"
         color="accent"
       >
-        @tdFlash
+        &#64;tdFlash
         <mat-icon>mood</mat-icon>
       </button>
 
@@ -362,7 +362,7 @@ <h3>Demos:</h3>
         (click)="headshakeState = !headshakeState"
         color="accent"
       >
-        @tdHeadshake
+        &#64;tdHeadshake
         <mat-icon>mood</mat-icon>
       </button>
 
@@ -373,7 +373,7 @@ <h3>Demos:</h3>
         (click)="jelloState = !jelloState"
         color="accent"
       >
-        @tdJello
+        &#64;tdJello
         <mat-icon>mood</mat-icon>
       </button>
 
@@ -384,7 +384,7 @@ <h3>Demos:</h3>
         (click)="pulseState = !pulseState"
         color="accent"
       >
-        @tdPulse
+        &#64;tdPulse
         <mat-icon>mood</mat-icon>
       </button>
 

diff --git a/apps/docs-app/src/styles.scss b/apps/docs-app/src/styles.scss
@@ -17,23 +17,22 @@
 // Plus imports for other components in your app.
 
 // Custom typography
-$custom-typography: mat-typography-config(
-  $button: mat-typography-level(14px, 14px, 400),
+$custom-typography: mat.define-typography-config(
+  $button: mat.define-typography-level(14px, 14px, 400),
 );
-$custom-toolbar-typography: mat-typography-config(
-  $title: mat-typography-level(20px, 32px, 400),
+$custom-toolbar-typography: mat.define-typography-config(
+  $headline-6: mat.define-typography-level(20px, 32px, 400),
 );
 
 // Include the base styles for Angular Material core. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 @include mat.core();
 
 // Use the default configuration.
-$my-typography: mat.define-typography-config();
-@include mat.typography-hierarchy($my-typography);
+@include mat.typography-hierarchy($custom-typography);
 
 // Setting the toolbar to the proper spec weight
-@include mat-toolbar-typography($custom-toolbar-typography);
+@include mat.toolbar-typography($custom-toolbar-typography);
 
 // Include the core styles for Covalent
 @include covalent-core();
@@ -69,7 +68,7 @@ $theme: mat.define-light-theme(
       on-secondary: '#ff0000',
       warn: $warn,
     ),
-    typography: $my-typography,
+    typography: $custom-typography,
   )
 );
 $theme: map_merge(
@@ -106,10 +105,10 @@ body .mat-card {
 
 // Dark theme
 @media (prefers-color-scheme: dark) {
-  $primary-dark: mat-palette($td-slate, 800, 200, 900);
-  $accent-dark: mat-palette($td-orange, 500);
-  $warn-dark: mat-palette($mat-red, 600, 200, 900);
-  $theme-dark: mat-dark-theme($primary-dark, $accent-dark, $warn-dark);
+  $primary-dark: mat.define-palette($td-slate, 800, 200, 900);
+  $accent-dark: mat.define-palette($td-orange, 500);
+  $warn-dark: mat.define-palette($mat-red, 600, 200, 900);
+  $theme-dark: mat.define-dark-theme($primary-dark, $accent-dark, $warn-dark);
   $theme-dark: map_merge(
     $theme-dark,
     (

diff --git a/apps/docs-e2e/project.json b/apps/docs-e2e/project.json
@@ -17,7 +17,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/docs-e2e/**/*.{js,ts}"]