feat: breadcrumb service manual breadcrumbs as topic (#353)

* feat: breadcrumb service manual breadcrumbs as topic

* refactor: make breadcrumb topic extendable

libs/angular-accelerator/src/lib/services/breadcrumb.service.ts

@@ -2,19 +2,37 @@ import { Injectable } from '@angular/core'
 import { ActivatedRoute, ActivatedRouteSnapshot, Data, NavigationEnd, ParamMap, Router } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
-import { BehaviorSubject, filter } from 'rxjs'
+import { BehaviorSubject, filter, map } from 'rxjs'
 import { MenuItem } from 'primeng/api'
 import { BreadCrumbMenuItem } from '../model/breadcrumb-menu-item.model'
+import { SyncableTopic } from '@onecx/accelerator'
+
+interface ManualBreadcrumbs {
+  menuItems: MenuItem[]
+}
+
+// This topic is defined here and not in integration-interface, because
+// it is not used as framework independent integration but for improving
+// angular specific things
+class ManualBreadcrumbsTopic extends SyncableTopic<ManualBreadcrumbs> {
+  constructor() {
+    super('manualBreadcrumbs', 1)
+  }
+}
 
 @Injectable({ providedIn: 'any' })
 @UntilDestroy()
 export class BreadcrumbService {
-  private itemsSource = new BehaviorSubject<MenuItem[]>([])
+  private itemsSource$ = new ManualBreadcrumbsTopic()
   generatedItemsSource = new BehaviorSubject<MenuItem[]>([])
 
-  itemsHandler = this.itemsSource.asObservable()
+  itemsHandler = this.itemsSource$.pipe(map((manualBreadcrumbs) => manualBreadcrumbs.menuItems))
 
-  constructor(private router: Router, private activeRoute: ActivatedRoute, private translateService: TranslateService) {
+  constructor(
+    private router: Router,
+    private activeRoute: ActivatedRoute,
+    private translateService: TranslateService
+  ) {
     this.generateBreadcrumbs(this.activeRoute.snapshot)
     this.router.events
       .pipe(
@@ -93,16 +111,18 @@ export class BreadcrumbService {
     ]
     if (translationKeys.length) {
       this.translateService.get(translationKeys).subscribe((translations: any) => {
-        this.itemsSource.next(
-          items.map((i) => ({
+        this.itemsSource$.publish({
+          menuItems: items.map((i) => ({
             ...i,
             label: translations[i.labelKey || ''] || i.label,
             title: translations[i.titleKey || ''] || i.title,
-          }))
-        )
+          })),
+        })
       })
     } else {
-      this.itemsSource.next(items)
+      this.itemsSource$.publish({
+        menuItems: items,
+      })
     }
   }
 }