deps(solace-message-client): update @solace-community/angular-solace-…

…message-client to Angular 18 BREAKING CHANGE: Updating `@solace-community/angular-solace-message-client` to Angular 18 introduced a breaking change. To migrate: - Update your application to Angular 18; for detailed migration instructions, refer to https://v18.angular.dev/update-guide; - Update `solclientjs` to version 10.16.0;
solacecommunity · Jun 3, 2024 · dbc87ed · dbc87ed
1 parent 0b87db2
commit dbc87ed
Show file tree

Hide file tree

Showing 16 changed files with 5,254 additions and 5,771 deletions.
diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -1,7 +1,7 @@
 name: Continuous Integration and Delivery
 on: [push, pull_request]
 env:
-  NODE_VERSION: 20.9.0
+  NODE_VERSION: 20.14.0
   PUPPETEER_CACHE_DIR: ${{ github.workspace }}/node_modules/.cache/puppeteer
 jobs:
   install:
@@ -13,7 +13,7 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: 'Running npm ci (if node_modules not cached)'
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: node-modules-cache
         with:
           path: ./node_modules
@@ -30,7 +30,7 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: 'Restoring NPM modules from cache'
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./node_modules
           key: node_modules-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
@@ -52,7 +52,7 @@ jobs:
         with:
           path: projects/solace-message-client/package.json
       - name: 'Restoring NPM modules from cache'
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./node_modules
           key: node_modules-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
@@ -78,7 +78,7 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: 'Restoring NPM modules from cache'
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./node_modules
           key: node_modules-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
@@ -103,7 +103,7 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: 'Restoring NPM modules from cache'
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./node_modules
           key: node_modules-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -34,7 +34,7 @@ This section explains how to submit a pull request.
   <summary><strong>Development</strong></summary>
   <br>
 
-Make sure to use Node.js version 20.9.0 for contributing to this library. We suggest using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
+Make sure to use Node.js version 20.14.0 for contributing to this library. We suggest using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
 
 For development, you can uncomment the section `PATH-OVERRIDE-FOR-DEVELOPMENT` in `tsconfig.json`. This allows running tests or serving applications without having to build dependent modules first.
 

diff --git a/angular.json b/angular.json
@@ -70,7 +70,10 @@
             "tsConfig": "apps/solace-message-client-testing-app/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "apps/solace-message-client-testing-app/src/assets",
+              {
+                "glob": "**/*",
+                "input": "apps/solace-message-client-testing-app/public"
+              },
               {
                 "glob": "favicon.ico",
                 "input": "resources/branding",
@@ -92,13 +95,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "2mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
                 }
               ],
               "outputHashing": "all",

diff --git a/...ge-client-testing-app/src/assets/.gitkeep → ...essage-client-testing-app/public/.gitkeep b/...ge-client-testing-app/src/assets/.gitkeep → ...essage-client-testing-app/public/.gitkeep
diff --git a/apps/solace-message-client-testing-app/src/app/publisher/publisher.component.scss b/apps/solace-message-client-testing-app/src/app/publisher/publisher.component.scss
@@ -16,14 +16,14 @@
 
       > header {
         flex: none;
-        font-size: mat.font-size(app-theme.$typography, headline-6);
+        font-size: mat.m2-font-size(app-theme.$typography, headline-6);
         margin-bottom: .25em;
       }
 
       > span.sub-title {
         flex: none;
-        font-size: mat.font-size(app-theme.$typography, subtitle-2);
-        color: mat.get-color-from-palette(app-theme.$foreground, secondary-text);
+        font-size: mat.m2-font-size(app-theme.$typography, subtitle-2);
+        color: mat.m2-get-color-from-palette(app-theme.$foreground, secondary-text);
       }
 
       > sci-viewport {
@@ -65,7 +65,7 @@
           display: flex;
           flex-direction: column;
           padding: 1em;
-          border: 1px solid mat.get-color-from-palette(app-theme.$foreground, divider);
+          border: 1px solid mat.m2-get-color-from-palette(app-theme.$foreground, divider);
           border-radius: 5px;
 
           > sci-viewport {
@@ -79,7 +79,7 @@
             }
 
             app-message-list-item {
-              border-bottom: 1px solid mat.get-color-from-palette(app-theme.$foreground, divider);
+              border-bottom: 1px solid mat.m2-get-color-from-palette(app-theme.$foreground, divider);
             }
           }
 
@@ -95,9 +95,9 @@
 
       > section.sending {
         margin: .75em;
-        color: mat.get-color-from-palette(app-theme.$foreground, secondary-text);
-        background-color: mat.get-color-from-palette(app-theme.$foreground, secondary-text, .0125);
-        border: 1px solid mat.get-color-from-palette(app-theme.$foreground, secondary-text, .12);
+        color: mat.m2-get-color-from-palette(app-theme.$foreground, secondary-text);
+        background-color: mat.m2-get-color-from-palette(app-theme.$foreground, secondary-text, .0125);
+        border: 1px solid mat.m2-get-color-from-palette(app-theme.$foreground, secondary-text, .12);
         border-radius: 3px;
         padding: 1em;
         font-style: italic;
@@ -106,9 +106,9 @@
 
       > section.error {
         margin: .75em;
-        border: 1px solid mat.get-color-from-palette(app-theme.$warn);
+        border: 1px solid mat.m2-get-color-from-palette(app-theme.$warn);
         border-radius: 3px;
-        background-color: mat.get-color-from-palette(app-theme.$warn, 100);
+        background-color: mat.m2-get-color-from-palette(app-theme.$warn, 100);
         padding: 1em;
       }
     }

diff --git a/...e-message-client-testing-app/src/app/session-properties/session-properties.component.scss b/...e-message-client-testing-app/src/app/session-properties/session-properties.component.scss
@@ -8,17 +8,17 @@
 
   > header {
     grid-column: 1/-1;
-    font-size: mat.font-size(app-theme.$typography, subtitle-1);
+    font-size: mat.m2-font-size(app-theme.$typography, subtitle-1);
     font-weight: bold;
     margin-bottom: 1em;
   }
 
   > div.buttons {
-    border-top: 1px solid mat.get-color-from-palette(app-theme.$foreground, light-secondary-text);
+    border-top: 1px solid mat.m2-get-color-from-palette(app-theme.$foreground, light-secondary-text);
     margin-top: 3em;
     padding-top: .75em;
     grid-column: 1/-1;
-    color: mat.get-color-from-palette(app-theme.$foreground, light-dividers);
+    color: mat.m2-get-color-from-palette(app-theme.$foreground, light-dividers);
     display: flex;
     justify-content: space-between;
   }

diff --git a/apps/solace-message-client-testing-app/src/app/subscriber/subscriber.component.scss b/apps/solace-message-client-testing-app/src/app/subscriber/subscriber.component.scss
@@ -28,7 +28,7 @@
     }
 
     app-message-list-item {
-      border-bottom: 1px solid mat.get-color-from-palette(app-theme.$foreground, divider);
+      border-bottom: 1px solid mat.m2-get-color-from-palette(app-theme.$foreground, divider);
     }
   }
 
@@ -52,8 +52,8 @@
     }
 
     > section.error {
-      border: 1px solid mat.get-color-from-palette(app-theme.$warn);
-      background-color: mat.get-color-from-palette(app-theme.$warn, 100);
+      border: 1px solid mat.m2-get-color-from-palette(app-theme.$warn);
+      background-color: mat.m2-get-color-from-palette(app-theme.$warn, 100);
       border-radius: 3px;
       padding: 1em;
     }

diff --git a/apps/solace-message-client-testing-app/src/app/subscribers/subscribers.component.scss b/apps/solace-message-client-testing-app/src/app/subscribers/subscribers.component.scss
@@ -20,13 +20,13 @@
         margin-bottom: 2em;
 
         > span.title {
-          font-size: mat.font-size(app-theme.$typography, headline-6);
+          font-size: mat.m2-font-size(app-theme.$typography, headline-6);
           margin-bottom: .25em;
         }
 
         > span.sub-title {
-          font-size: mat.font-size(app-theme.$typography, subtitle-2);
-          color: mat.get-color-from-palette(app-theme.$foreground, secondary-text);
+          font-size: mat.m2-font-size(app-theme.$typography, subtitle-2);
+          color: mat.m2-get-color-from-palette(app-theme.$foreground, secondary-text);
         }
       }
 
@@ -58,7 +58,7 @@
         min-width: 0; // set min-width to 0 to not overflow flex container horizontally
 
         ::ng-deep mat-tab-header {
-          border-bottom: 1px solid mat.get-color-from-palette(app-theme.$background, status-bar);
+          border-bottom: 1px solid mat.m2-get-color-from-palette(app-theme.$background, status-bar);
         }
 
         div.tab {

diff --git a/apps/solace-message-client-testing-app/src/app/try-me/try-me.component.scss b/apps/solace-message-client-testing-app/src/app/try-me/try-me.component.scss
@@ -20,8 +20,8 @@
       }
 
       &:not(.connected) {
-        border: 1px solid mat.get-color-from-palette(app-theme.$warn);
-        background-color: mat.get-color-from-palette(app-theme.$warn, 100);
+        border: 1px solid mat.m2-get-color-from-palette(app-theme.$warn);
+        background-color: mat.m2-get-color-from-palette(app-theme.$warn, 100);
       }
     }
   }

diff --git a/apps/solace-message-client-testing-app/src/index.html b/apps/solace-message-client-testing-app/src/index.html
@@ -8,6 +8,6 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico">
   </head>
   <body class="mat-app-background">
-    <app-root/>
+    <app-root></app-root>
   </body>
 </html>
diff --git a/apps/solace-message-client-testing-app/src/styles.scss b/apps/solace-message-client-testing-app/src/styles.scss
@@ -1,8 +1,9 @@
 @use '@angular/material' as mat;
 @use '@angular/cdk' as cdk;
 @use 'styles/solace-client-theme' as app-theme;
+@use '@scion/components';
 
-$theme: mat.define-light-theme((
+$theme: mat.m2-define-light-theme((
   color: (
     primary: app-theme.$primary,
     accent: app-theme.$accent,
@@ -18,7 +19,7 @@ $theme: mat.define-light-theme((
 body {
   position: absolute;
   inset: 0;
-  font-size: mat.font-size(app-theme.$typography, body-1);
-  font-family: mat.font-family(app-theme.$typography, body-1);
+  font-size: mat.m2-font-size(app-theme.$typography, body-1);
+  font-family: mat.m2-font-family(app-theme.$typography, body-1);
 }
 
diff --git a/apps/solace-message-client-testing-app/src/styles/solace-client-theme.scss b/apps/solace-message-client-testing-app/src/styles/solace-client-theme.scss
@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
 
-$primary: mat.define-palette(mat.$indigo-palette);
-$accent: mat.define-palette(mat.$light-blue-palette, A200, A100, A400);
-$warn: mat.define-palette(mat.$red-palette);
-$foreground: mat.$light-theme-foreground-palette;
-$background: mat.$light-theme-background-palette;
-$typography: mat.define-typography-config();
+$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$accent: mat.m2-define-palette(mat.$m2-light-blue-palette, A200, A100, A400);
+$warn: mat.m2-define-palette(mat.$m2-red-palette);
+$foreground: mat.$m2-light-theme-foreground-palette;
+$background: mat.$m2-light-theme-background-palette;
+$typography: mat.m2-define-typography-config();