diff --git a/angular.json b/angular.json index 4ef09e8..74be285 100644 --- a/angular.json +++ b/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": [ - "src/styles.scss" - ] + "styles": ["node_modules/@swisscom/sdx/dist/css/webcomponents.css"] }, "configurations": { "production": { diff --git a/package-lock.json b/package-lock.json index 061ecb6..e772600 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3f33f4a..a074308 100644 --- a/package.json +++ b/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" }, @@ -40,4 +41,4 @@ "typescript": "~5.9.2", "vitest": "^4.0.8" } -} \ No newline at end of file +} diff --git a/src/app/app.ts b/src/app/app.ts index a6b2e39..d75d60f 100644 --- a/src/app/app.ts +++ b/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'); diff --git a/src/main.ts b/src/main.ts index 5df75f9..a88970d 100644 --- a/src/main.ts +++ b/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) - .catch((err) => console.error(err)); +bootstrapApplication(App, appConfig).catch((err) => console.error(err));