Migrate to webcomponent (#148)

* fix: slot search tests

* fix: prod detail and img container tests

* fix: prod search app search tests

* fix: all tests

* fix: last bit

* fix: delete comment in mixins css

* feat: migrate ps ui

* fix: use correct lib version

* fix: remove config from shared, correct webpack entry

* fix: finish migration to webcomponent and raise libs

---------

Co-authored-by: Christian Badura <[email protected]>
Co-authored-by: Henry Täschner <[email protected]>

angular.json

@@ -35,7 +35,7 @@
               "node_modules/@onecx/portal-integration-angular/assets/output.css",
               "src/styles.scss"
             ],
-            "scripts": [],
+            "scripts": ["node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"],
             "extraWebpackConfig": "webpack.config.js",
             "commonChunk": false
           },

helm/values.yaml

@@ -16,6 +16,9 @@ app:
           description: "OneCX Product Store UI"
           note: "OneCX Product Store UI module auto import via MF operator"
           type: MODULE
+          technology: WEBCOMPONENTMODULE
+          remoteName: onecx-product-store
+          tagName: ocx-product-store-component
     # Permission
     permission:
       enabled: true

package.json

@@ -41,6 +41,7 @@
     "@angular/common": "15.2.7",
     "@angular/compiler": "15.2.7",
     "@angular/core": "15.2.7",
+    "@angular/elements": "15.2.7",
     "@angular/forms": "15.2.7",
     "@angular/platform-browser": "15.2.7",
     "@angular/platform-browser-dynamic": "15.2.7",
@@ -51,13 +52,16 @@
     "@ngrx/router-store": "^15.4.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@onecx/accelerator": "^4.30.1",
-    "@onecx/angular-accelerator": "^4.30.1",
-    "@onecx/integration-interface": "^4.30.1",
-    "@onecx/angular-integration-interface": "^4.30.1",
-    "@onecx/keycloak-auth": "^4.30.1",
-    "@onecx/portal-integration-angular": "^4.30.1",
-    "@onecx/portal-layout-styles": "^4.30.1",
+    "@onecx/accelerator": "^4.42.0",
+    "@onecx/angular-accelerator": "^4.42.0",
+    "@onecx/angular-auth": "^4.42.0",
+    "@onecx/angular-webcomponents": "^4.42.0",
+    "@onecx/integration-interface": "^4.42.0",
+    "@onecx/angular-integration-interface": "^4.42.0",
+    "@onecx/keycloak-auth": "^4.42.0",
+    "@onecx/portal-integration-angular": "^4.42.0",
+    "@onecx/portal-layout-styles": "^4.42.0",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
     "keycloak-angular": "^13.1.0",
     "file-saver": "^2.0.5",
     "ngx-color": "^8.0.3",

src/app/app-entrypoint.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/app-entrypoint.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app-entrypoint.component.html'
+})
+export class AppEntrypointComponent {}