Add Swisscom SDX integration and update project configuration

- Updated angular.json to include new asset paths and styles for Swisscom SDX.
- Modified package.json and package-lock.json to add @swisscom/sdx dependency.
- Enhanced app.ts to include CUSTOM_ELEMENTS_SCHEMA for custom elements.
- Updated main.ts to define custom elements from Swisscom SDX.

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm"
+    "packageManager": "npm",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -26,12 +27,11 @@
             "assets": [
               {
                 "glob": "**/*",
-                "input": "public"
+                "input": "node_modules/@swisscom/sdx/dist/js/webcomponents/webcomponents/assets",
+                "output": "assets"
               }
             ],
-            "styles": [
+            "styles": ["node_modules/@swisscom/sdx/dist/css/webcomponents.css"]
-              "src/styles.scss"
-            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -14,6 +14,7 @@
         "@angular/forms": "^21.0.0",
         "@angular/platform-browser": "^21.0.0",
         "@angular/router": "^21.0.0",
+        "@swisscom/sdx": "^3.3.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
       },
@@ -691,6 +692,7 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -905,6 +907,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -3957,6 +3968,38 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@stencil/core": {
+      "version": "4.25.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.25.1.tgz",
+      "integrity": "sha512-SJhAAN6nHj7l2n2F7H6NoOUFhXC5tYXSvOpAaNFi5As6c2jOvaDOvAH+om4OKmw8U2kHI9yihEqpZrtY1J20dQ==",
+      "license": "MIT",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
+      }
+    },
+    "node_modules/@swisscom/sdx": {
+      "version": "3.3.0",
+      "resolved": "https://bin.swisscom.com/artifactory/api/npm/swisscom-npm-virtual/@swisscom/sdx/-/@swisscom/sdx-3.3.0.tgz",
+      "integrity": "sha512-1a+a2GTgHN4uZE3zZpkF3thYxpljF0+Ed83zl6sJ630hoFr5JP+ls/sL0mzMgAcBUD0Xojj2OT0u5F4cGLsdLA==",
+      "license": "UNLICENSED",
+      "dependencies": {
+        "@stencil/core": "4.25.1",
+        "body-scroll-lock": "2.7.1",
+        "date-fns": "2.30.0",
+        "flatpickr": "4.6.13",
+        "immer": "10.2.0",
+        "lodash-es": "4.17.21",
+        "redux": "4.2.1"
+      },
+      "engines": {
+        "node": ">=18.17.0",
+        "npm": ">=9.0.0"
+      }
+    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -4412,6 +4455,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/body-scroll-lock": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.7.1.tgz",
+      "integrity": "sha512-hS53SQ8RhM0e4DsQ3PKz6Gr2O7Kpdh59TWU98GHjaQznL7y4dFycEPk7pFQAikqBaUSCArkc5E3pe7CWIt2fZA==",
+      "license": "MIT"
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -4968,6 +5017,22 @@
         "node": ">=20"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -5501,6 +5566,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+      "license": "MIT"
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -5886,6 +5957,16 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/immutable": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
@@ -6212,6 +6293,7 @@
       "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cli-truncate": "^5.0.0",
         "colorette": "^2.0.20",
@@ -6295,6 +6377,12 @@
         "@lmdb/lmdb-win32-x64": "3.4.3"
       }
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/log-symbols": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-7.0.1.tgz",
@@ -7526,6 +7614,15 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/reflect-metadata": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",

package.json

@@ -29,6 +29,7 @@
     "@angular/forms": "^21.0.0",
     "@angular/platform-browser": "^21.0.0",
     "@angular/router": "^21.0.0",
+    "@swisscom/sdx": "^3.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

src/app/app.ts

@@ -1,11 +1,12 @@
-import { Component, signal } from '@angular/core';
+import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './app.html',
-  styleUrl: './app.scss'
+  styleUrl: './app.scss',
 })
 export class App {
   protected readonly title = signal('core');

src/main.ts

@@ -1,6 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { App } from './app/app';
+import { defineCustomElements } from '@swisscom/sdx/dist/js/webcomponents/loader';
+defineCustomElements(window);
 
-bootstrapApplication(App, appConfig)
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));
-  .catch((err) => console.error(err));