added wlo-user-configurable web-component as Angular module (necessar…

…y symlinks to edu-sharing-ui not committed here)

angular.json

@@ -254,6 +254,79 @@
           }
         }
       }
+    },
+    "edu-sharing-ui": {
+      "projectType": "library",
+      "root": "projects/edu-sharing-ui",
+      "sourceRoot": "projects/edu-sharing-ui/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/edu-sharing-ui/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/edu-sharing-ui/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/edu-sharing-ui/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/edu-sharing-ui/src/test.ts",
+            "tsConfig": "projects/edu-sharing-ui/tsconfig.spec.json",
+            "karmaConfig": "projects/edu-sharing-ui/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/edu-sharing-ui/**/*.ts",
+              "projects/edu-sharing-ui/**/*.html"
+            ]
+          }
+        }
+      }
+    },
+    "wlo-pages-lib": {
+      "projectType": "library",
+      "root": "projects/wlo-pages-lib",
+      "sourceRoot": "projects/wlo-pages-lib/src",
+      "prefix": "wlo",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/wlo-pages-lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/wlo-pages-lib/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/wlo-pages-lib/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/wlo-pages-lib/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
     }
   },
   "cli": {

package.json

@@ -24,6 +24,7 @@
   },
   "private": true,
   "dependencies": {
+    "@ngx-translate/core": "^15.0.0",
     "@angular/animations": "^16.2.12",
     "@angular/cdk": "^16.2.14",
     "@angular/common": "^16.2.12",
@@ -43,6 +44,7 @@
     "material-icons": "^1.12.1",
     "ngx-edu-sharing-api": "^9.1.0",
     "ngx-slick-carousel": "15.0.0",
+    "ngx-colors": "^3.5.3",
     "rxjs": "^6.6.3",
     "slick-carousel": "^1.8.1",
     "tslib": "^2.0.0",
@@ -98,4 +100,4 @@
     "*.{js,ts,md,html,css,scss}": "prettier --write",
     "*.ts": "eslint --fix"
   }
-}
+}

src/app/app.module.ts

@@ -7,6 +7,8 @@ import {
     HttpHandler,
     HttpRequest,
     HTTP_INTERCEPTORS,
+    withInterceptorsFromDi,
+    provideHttpClient,
 } from '@angular/common/http';
 import { inject, NgModule, Provider } from '@angular/core';
 import { MAT_LEGACY_DIALOG_SCROLL_STRATEGY as MAT_DIALOG_SCROLL_STRATEGY } from '@angular/material/legacy-dialog';
@@ -15,7 +17,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { InMemoryCache } from '@apollo/client/core';
 import { ApolloModule, APOLLO_NAMED_OPTIONS } from 'apollo-angular';
 import { HttpLink } from 'apollo-angular/http';
-import { EduSharingApiModule } from 'ngx-edu-sharing-api';
+import { ConfigService, EduSharingApiModule } from 'ngx-edu-sharing-api';
 import { Observable, of, throwError } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import {
@@ -31,6 +33,20 @@ import { LanguageHeaderInterceptor } from './language-header.interceptor';
 import { TelemetryApiWrapper } from './telemetry-api-wrapper';
 import { TELEMETRY_API } from './wlo-search/telemetry-api';
 import { WloSearchConfig, WLO_SEARCH_CONFIG } from './wlo-search/wlo-search-config';
+import {
+    MissingTranslationHandler,
+    TranslateLoader,
+    TranslateModule,
+    TranslateService, TranslateStore
+} from "@ngx-translate/core";
+import {
+    EduSharingUiConfiguration,
+    EduSharingUiModule,
+    FallbackTranslationHandler,
+    TranslationLoader,
+    Toast as ToastAbstract,
+} from "ngx-edu-sharing-ui";
+import {TicketAuthInterceptor, TicketService, ToastService} from "wlo-pages-lib";
 
 const wloSearchConfig: WloSearchConfig = {
     routerPath: ROOT_PATH + WLO_SEARCH_PATH_COMPONENT,
@@ -95,14 +111,16 @@ const httpLinkBeacon = (() => {
     return new HttpLink(httpClient);
 })();
 
+const eduSharingApiModuleWithProviders = EduSharingApiModule.forRoot({ rootUrl: environment.eduSharingApiUrl })
+
 @NgModule({
     declarations: [AppComponent],
     imports: [
         AppRoutingModule,
         BrowserAnimationsModule,
         BrowserModule,
         HttpClientModule,
-        EduSharingApiModule.forRoot({ rootUrl: environment.eduSharingApiUrl }),
+        eduSharingApiModuleWithProviders,
         ApolloModule,
     ],
     providers: [
@@ -130,6 +148,32 @@ const httpLinkBeacon = (() => {
                 return [];
             }
         })(),
+        // from here on dependencies of wlo-pages (edu-sharing web-components)
+        eduSharingApiModuleWithProviders.providers,
+        EduSharingUiModule.forRoot({
+            production: true,
+        }).providers,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: TranslationLoader.create,
+                deps: [HttpClient, ConfigService, EduSharingUiConfiguration],
+            },
+            missingTranslationHandler: {
+                provide: MissingTranslationHandler,
+                useClass: FallbackTranslationHandler,
+            },
+        }).providers,
+        { provide: ToastAbstract, useClass: ToastService },
+        TicketService,
+        provideHttpClient(withInterceptorsFromDi()), // see https://stackoverflow.com/a/76028543
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: TicketAuthInterceptor,
+            multi: true
+        },
+        TranslateStore,
+        TranslateService
     ],
     bootstrap: [AppComponent],
 })

src/app/wlo-search/template/template.component.html

@@ -15,6 +15,7 @@ <h1 i18n>Template</h1>
   <div class="portal-wrapper">
     <div class="portal-wrapper-left">
       <div class="fachportal-header-accordion">
+        <wlo-user-configurable></wlo-user-configurable>
       </div>
     </div>
   </div>

src/app/wlo-search/template/template.component.ts

@@ -1,9 +1,12 @@
 import {Component} from '@angular/core';
 import {SharedModule} from "../shared/shared.module";
+import {
+    UserConfigurableComponent
+} from "wlo-pages-lib";
 
 @Component({
     standalone: true,
-    imports: [SharedModule],
+    imports: [SharedModule, UserConfigurableComponent],
     selector: 'app-template',
     templateUrl: './template.component.html',
     styleUrls: ['./template.component.scss'],

tsconfig.json

@@ -31,6 +31,12 @@
       ],
       "@angular/*": [
         "./node_modules/@angular/*"
+      ],
+      "wlo-pages-lib": [
+        "projects/wlo-pages-lib"
+      ],
+      "ngx-edu-sharing-ui": [
+        "projects/edu-sharing-ui"
       ]
     },
     "useDefineForClassFields": false