Feat/angular 18 upgrade

.eslintrc.json

@@ -35,13 +35,18 @@
       },
       "rules": {
         "rxjs/no-unsafe-takeuntil": "error",
-        "rxjs-angular/prefer-takeuntil": "warn"
+        "rxjs-angular/prefer-takeuntil": "warn",
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
       }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     }
   ]
 }

.github/workflows/chromatic.yml

@@ -25,10 +25,10 @@ jobs:
         uses: actions/checkout@v2
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
-      - name: Use Node.js 16
+      - name: Use Node.js 18
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
           cache: npm
       - run: npm ci
       # 👇 Adds Chromatic as a step in the workflow

.prettierignore

@@ -5,3 +5,5 @@
 
 /.nx/cache
 .angular
+
+/.nx/workspace-data

apps/docs-app/src/app/app.module.ts

@@ -1,7 +1,11 @@
 import { NgModule, LOCALE_ID } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import {
+  HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -53,13 +57,13 @@ import { HomeComponent } from './components/home/home.component';
 import { ToolbarModule } from './components/toolbar/toolbar.module';
 
 @NgModule({
-  declarations: [DocsAppComponent, HomeComponent], // directives, components, and pipes owned by this NgModule
+  declarations: [DocsAppComponent, HomeComponent], // additional providers needed for this module
+  bootstrap: [DocsAppComponent],
   imports: [
     BrowserAnimationsModule,
     CommonModule,
     FormsModule,
     BrowserModule,
-    HttpClientModule,
     /** Material Modules */
     MatButtonModule,
     MatListModule,
@@ -89,7 +93,7 @@ import { ToolbarModule } from './components/toolbar/toolbar.module';
     ContentContainerModule,
     appRoutes,
     CovalentFileModule,
-  ], // modules needed to run this module
+  ],
   providers: [
     appRoutingProviders,
     GitHubService,
@@ -101,7 +105,7 @@ import { ToolbarModule } from './components/toolbar/toolbar.module';
       deps: [TranslateService],
     },
     SelectivePreloadingStrategyService,
-  ], // additional providers needed for this module
-  bootstrap: [DocsAppComponent],
+    provideHttpClient(withInterceptorsFromDi()),
+  ],
 })
 export class AppModule {}

apps/docs-app/src/app/components/shared/demo-tools/demo.module.ts

@@ -6,7 +6,10 @@ import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { CovalentHighlightModule } from '@covalent/highlight';
-import { HttpClientModule } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatDividerModule } from '@angular/material/divider';
 
@@ -23,8 +26,8 @@ import { MatDividerModule } from '@angular/material/divider';
     MatCardModule,
     MatIconModule,
     MatButtonModule,
-    HttpClientModule,
     MatDividerModule,
   ],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class DemoModule {}

apps/docs-app/src/app/content/components/component-demos/flavored-markdown/demos/flavored-markdown-demo-basic/flavored-markdown-demo-basic.component.ts

@@ -16,17 +16,16 @@ export class FlavoredMarkdownDemoBasicComponent {
     ## List
 
     + One
-      + subline
+        + subline
     + Two
     + Three
-      + subline
-      + second subline
-
-
-    | Tables        | Are           | Cool  |
-    | ------------- |:-------------:| -----:|
-    | **col 3 is**  | right-aligned | $1600 |
-    | col 2 is      | *centered*    |   $12 |
-    | zebra stripes | are neat      |    $1 |  
+        + subline
+        + second subline
+    + Table in a list:
+      | Tables        | Are           | Cool  |
+      | ------------- |:-------------:| -----:|
+      | **col 3 is**  | right-aligned | $1600 |
+      | col 2 is      | *centered*    |   $12 |
+      | zebra stripes | are neat      |    $1 |   
   `;
 }

apps/docs-app/src/app/content/docs/angular-material/angular-material.component.html

@@ -31,14 +31,14 @@ <h3>New &amp; Custom Components</h3>
     mat-button
     color="accent"
     target="_blank"
-    href="https://v17.material.angular.io/components/categories"
+    href="https://v18.material.angular.io/components/categories"
   >
     Components
   </a>
   <a
     mat-button
     target="_blank"
-    href="https://github.com/angular/components/releases/tag/17.3.6"
+    href="https://github.com/angular/components/releases/tag/18.2.14"
     >Github repo</a
   >
 </section>
@@ -55,7 +55,7 @@ <h3>New &amp; Custom Components</h3>
       <span matListItemLine>Why Angular Material?</span>
     </a>
     <mat-divider></mat-divider>
-    <a mat-list-item href="https://v17.material.angular.io/" target="_blank">
+    <a mat-list-item href="https://v18.material.angular.io/" target="_blank">
       <mat-icon matListItemIcon>launch</mat-icon>
       <span matListItemLine>Angular Material Docs Site</span>
     </a>

apps/docs-app/src/app/content/docs/theme/theme.component.html

@@ -28,7 +28,7 @@ <h3 class="push-bottom-sm mat-title">SCSS Variables</h3>
     mat-button
     color="accent"
     target="_blank"
-    href="https://v17.material.angular.io/guide/theming"
+    href="https://v18.material.angular.io/guide/theming"
   >
     Theming docs
   </a>

apps/docs-app/src/app/content/docs/theme/theme.component.ts

@@ -15,36 +15,36 @@ export class ThemeComponent {
   @use '@angular/material' as mat;
 
   // (optional) Additional themes
-  @use '@covalent/markdown/markdown-theme' as markdown;
-  @use '@covalent/highlight/highlight-theme' as highlight;
-  @import '@covalent/flavored-markdown/flavored-markdown-theme';
+  @use "@covalent/markdown/markdown-theme" as markdown;
+  @use "@covalent/highlight/highlight-theme" as highlight;
+  @import "@covalent/flavored-markdown/flavored-markdown-theme";
 
   // Covalent core themes
-  @import '@covalent/core/theming/all-theme';
-  @import '@covalent/core/theming/teradata-theme';
+  @import "@covalent/core/theming/all-theme";
+  @import "@covalent/core/theming/teradata-theme";
 
   // Plus imports for other components in your app.
 
   @include mat.core();
 
   // Define a custom typography config that overrides the font-family
   // or any typography level.
-  $typography: mat.define-typography-config(
-    $font-family: 'Inter, monospace',
-    $headline-1: mat.define-typography-level(32px, 48px, 700),
+  $typography: mat.m2-define-typography-config(
+    $font-family: "Inter, monospace",
+    $headline-1: mat.m2-define-typography-level(32px, 48px, 700),
   );
 
   // Define the palettes for your theme using the Material Design palettes available in palette.scss
   // (imported above). For each palette, you can optionally specify a default, lighter, and darker
   // hue.
-  $primary: mat.define-palette($mat-blue, 700);
-  $accent: mat.define-palette($mat-orange, 800, A100, A400);
+  $primary: mat.m2-define-palette($mat-blue, 700);
+  $accent: mat.m2-define-palette($mat-orange, 800, A100, A400);
 
   // The warn palette is optional (defaults to red).
-  $warn: mat.define-palette($mat-red, 600);
+  $warn: mat.m2-define-palette($mat-red, 600);
 
   // Create the theme object (a Sass map containing all of the palettes).
-  $theme: mat.define-light-theme(
+  $theme: mat.m2-define-light-theme(
     (
       color: (
         primary: $primary,
@@ -55,6 +55,8 @@ export class ThemeComponent {
     )
   );
 
+  @include mat.typography-hierarchy($theme, $back-compat: true);
+
   // Include the Angular Material styles using the custom theme
   @include mat.all-component-themes($theme);
 

apps/docs-app/src/app/content/echarts/echarts.module.ts

@@ -1,6 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 
 import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
@@ -39,7 +42,6 @@ import { moduleRoutes } from './echarts.routes';
     MatTabsModule,
     MatRippleModule,
     MatMenuModule,
-    HttpClientModule,
     MatTooltipModule,
     // Covalent Core
     CovalentLayoutModule,
@@ -49,5 +51,6 @@ import { moduleRoutes } from './echarts.routes';
     SidenavContentModule,
     ComponentOverviewModule,
   ],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class EchartsModule {}

apps/email-generator/project.json

@@ -39,7 +39,7 @@
             {
               "type": "initial",
               "maximumWarning": "5mb",
-              "maximumError": "6mb"
+              "maximumError": "6.5mb"
             },
             {
               "type": "anyComponentStyle",

apps/email-generator/src/app/editor/editor.component.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CovalentCodeEditorModule } from '@covalent/code-editor';
 import { PreviewComponent } from '../preview/preview.component';
-import { editor } from 'monaco-editor';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import { getHtmlTemplate } from '@covalent/email-templates';
 import * as prettier from 'prettier';
 import parserHtml from 'prettier/parser-html'; // Use 'html' parser while working with MJML

docs/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [9.0.0-beta.4](https://github.com/Teradata/covalent/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2024-11-26)
+
+### Bug Fixes
+
+- **styles:** fix badge and card styling issues ([af3dc7b](https://github.com/Teradata/covalent/commit/af3dc7b10ae91bc8af9905be26c0555dc3371f25))
+
+# [9.0.0-beta.3](https://github.com/Teradata/covalent/compare/v9.0.0-beta.2...v9.0.0-beta.3) (2024-11-26)
+
+### Features
+
+- **react-components:** create react web components ([34ae0ef](https://github.com/Teradata/covalent/commit/34ae0efdb73daf84935d8713b51cd7bd0ac86f36))
+
+# [9.0.0-beta.2](https://github.com/Teradata/covalent/compare/v9.0.0-beta.1...v9.0.0-beta.2) (2024-11-18)
+
+### Bug Fixes
+
+- **package:** fix angular versioning issues ([ea6330c](https://github.com/Teradata/covalent/commit/ea6330c7cddabbe7841cdfe88ff09fb9091cdbb8))
+
+# [9.0.0-beta.1](https://github.com/Teradata/covalent/compare/v8.23.2...v9.0.0-beta.1) (2024-11-18)
+
+### Features
+
+- **covalent:** upgrade to Angular 18 ([6587aba](https://github.com/Teradata/covalent/commit/6587abaea7892108be4b18ef81042b50d193df03))
+
+### BREAKING CHANGES
+
+- **covalent:** Upgrade covalent to Angular 18
+
 # [8.24.0](https://github.com/Teradata/covalent/compare/v8.23.2...v8.24.0) (2024-12-03)
 
 ### Features