@genesislcap/blank-app-seed 3.27.3 → 3.28.0

package/.genx/configure.js

@@ -21,8 +21,13 @@ module.exports = async (data, utils) => {
   data.versions = versions;
 
   registerPartials(utils, data.framework);
-
-  data.routes = data.routes.filter(validateRoute).map(formatRouteData);
+  const formatRouteDataForFramework = formatRouteData.bind(
+    this,
+    data.framework,
+  );
+  data.routes = data.routes
+    .filter(validateRoute)
+    .map(formatRouteDataForFramework);
 
   const FDC3EventHandlersEnabled = data.routes.find(
     (route) => route.FDC3EventHandlersEnabled,

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "3.27.3",
+  "version": "3.28.0",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/.genx/templates/angular/chart.hbs

@@ -1,21 +1,16 @@
-<section style="height: 100%; width: 100%;">
-  <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
-    <rapid-g2plot-chart
-      type="{{ config.type }}"
-      [config]="chartConfig"
-    >
-      <chart-datasource
-        resourceName="{{ config.resourceName }}"
-        server-fields="{{ config.xField }} {{ config.yField }}"
-      ></chart-datasource>
-    </rapid-g2plot-chart>
-  </ng-container>
+<rapid-g2plot-chart
+  type="{{ config.type }}"
+  [config]="chartConfig"
+  [ngStyle]="hasUserPermission('{{config.permissions.viewRight}}') ? { width: '100%', height: '100%' } : { display: 'none' }"
+>
+  <chart-datasource
+    resourceName="{{ config.resourceName }}"
+    server-fields="{{ config.xField }} {{ config.yField }}"
+  ></chart-datasource>
+</rapid-g2plot-chart>
 
-  <ng-template #notPermitted{{ config.index }}>
-    <app-error-message
-      style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
-      elementType="h3"
-      message="You do not have access to view this component.">
-    </app-error-message>
-  </ng-template>
-</section>
+<app-error-message
+  [ngStyle]="!hasUserPermission('{{config.permissions.viewRight}}') ? { width: '100%', height: '100%', display: 'flex', 'justify-content': 'center', 'align-items': 'center' } : { display: 'none' }"
+  elementType="h3"
+  message="You do not have access to view this component.">
+</app-error-message>

package/.genx/templates/angular/component/component.hbs

@@ -1,8 +1,10 @@
 import { Component, Input, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { getUser } from '@genesislcap/foundation-user';
-import { GridOptionsConfig } from "@genesislcap/rapid-grid-pro";
 import { getViewUpdateRightComponent } from '../../../utils';
+{{#if tile.config.gridOptions}}
+import { GridOptionsConfig } from "@genesislcap/rapid-grid-pro";
+{{/if}}
 {{#if tile.config.createFormUiSchema}}
 import { createFormSchema } from './{{kebabCase tile.title}}.create.form.schema';
 {{/if}}
@@ -37,7 +39,7 @@ export class {{pascalCase tile.componentName}} {
   columnDefs = columnDefs;{{/if}}{{#if tile.config.gridOptions}}
   gridOptions = gridOptions as GridOptionsConfig;{{/if}}{{#if tile.config.reqrep}}
   reqrep = { pollingInterval: 5000 };{{/if}}{{#if tile.config.type}}
-  chartConfig = { {{#ifEquals this.config.type 'pie'}}
+  chartConfig = { {{#ifEquals tile.config.type 'pie'}}
       "radius": 0.75,
       "angleField": "value",
       "colorField": "groupBy",{{else}}

package/.genx/templates/angular/route.template.hbs

@@ -1,7 +1,13 @@
   {{#if route.tiles}}
-  <rapid-layout [auto-save-key]="environment.production ? '{{route.layoutKey}}' : null">
-     {{> (lookup ./route 'layoutType') }}
-  </rapid-layout>
+ <rapid-flex-layout>
+    <rapid-tabs>
+    {{#each route.tiles}}
+      <rapid-tab slot="tab">{{this.title}}</rapid-tab>
+    {{/each}}
+
+    {{> (lookup ./route 'layoutType') }}
+    </rapid-tabs>
+  </rapid-flex-layout>
   {{else}}
   <!-- insert template code here -->
   Welcome to {{sentenceCase route.name}}

package/.genx/templates/angular/tabsPanel.hbs

@@ -0,0 +1,5 @@
+{{#each route.tiles}}
+<rapid-tab-panel slot="tabpanel">
+    <app-{{kebabCase this.componentName}}></app-{{kebabCase this.componentName}}>
+</rapid-tab-panel>
+{{/each}}

package/.genx/utils/formatRouteData.js

@@ -4,11 +4,14 @@ const {
 } = require('./gridSerializers');
 const formatJSONValue = require('./formatJSONValue');
 const getLayoutType = require('./getLayoutType');
-const { COMPONENT_TYPE } = require('../static');
+const { COMPONENT_TYPE, FRAMEWORK_ANGULAR_ALIAS } = require('../static');
 
-const formatRouteData = (route) => {
+const formatRouteData = (framework, route) => {
   const layoutKey = route?.layoutKey || `${route.name}_${Date.now()}`;
-  const layoutType = route?.layoutType || getLayoutType(route);
+  const layoutType =
+    framework === FRAMEWORK_ANGULAR_ALIAS
+      ? 'tabs-panel'
+      : route?.layoutType || getLayoutType(route);
 
   const FDC3ClickCategory = 'fdc3';
   const FDC3EventHandlersEnabled = !!route.tiles?.find(

package/.genx/utils/registerPartials.js

@@ -1,10 +1,19 @@
 const { resolve } = require('node:path');
-const { DIR_TEMPLATE_BY_FRAMEWORK } = require('../static');
+const {
+  DIR_TEMPLATE_BY_FRAMEWORK,
+  FRAMEWORK_ANGULAR_ALIAS,
+} = require('../static');
 
 const registerPartials = ({ registerPartial }, framework) => {
   // It can be reverted after adding changes for angular
   const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
 
+  if (framework === FRAMEWORK_ANGULAR_ALIAS) {
+    registerPartial(
+      'tabs-panel',
+      resolve(__dirname, `${sourceTemplateDir}/tabsPanel.hbs`),
+    );
+  }
   registerPartial(
     'grid-layout',
     resolve(__dirname, `${sourceTemplateDir}/gridLayout.hbs`),

package/.gitignore

@@ -26,6 +26,9 @@ pids
 *.sln
 *.sw?
 .DS_Store
+.idea/gradle.xml
+.idea/misc.xml
+.idea/vcs.xml
 
 # Development
 target/
@@ -36,6 +39,7 @@ build/
 *.ignore
 *~
 .gradle
+client/.angular
 client/bootstrapDone
 .husky/.gitignore
 build-cache/

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.28.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.27.3...v3.28.0) (2024-07-29)
+
+
+### Features
+
+* pbc support in angular [FUI-2065](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/2065) (#289) 7662cde
+
 ## [3.27.3](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.27.2...v3.27.3) (2024-07-29)
 
 

package/client-tmp/angular/angular.json

@@ -66,7 +66,8 @@
               "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
-              "namedChunks": true
+              "namedChunks": true,
+              "preserveSymlinks": true
             }
           },
           "defaultConfiguration": "production"

package/client-tmp/angular/globals.d.ts

@@ -1,6 +1,7 @@
 declare global {
   const API_HOST: string;
   const ENABLE_SSO: boolean;
+  const BUILDER: string;
 }
 
 export {};

package/client-tmp/angular/package.json

@@ -77,20 +77,27 @@
     "@angular/platform-browser": "^18.0.4",
     "@angular/platform-browser-dynamic": "^18.0.4",
     "@angular/router": "^18.0.4",
+    "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
+    "@genesislcap/foundation-events": "{{versions.UI}}",
     {{#if FDC3.includeDependencies}}
     "@genesislcap/foundation-fdc3": "{{versions.UI}}",
     {{/if}}
-    "@genesislcap/foundation-comms": "{{versions.UI}}",
-    "@genesislcap/foundation-login": "{{versions.UI}}",
-    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
+    "@genesislcap/foundation-forms": "{{versions.UI}}",
     "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/foundation-logger": "{{versions.UI}}",
+    "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-shell": "{{versions.UI}}",
+    "@genesislcap/foundation-store": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
     "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/foundation-user": "{{versions.UI}}",
+    "@genesislcap/foundation-zero": "{{versions.UI}}",
+    "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
-    "@genesislcap/foundation-layout": "{{versions.UI}}",
-    "@genesislcap/g2plot-chart": "{{versions.UI}}",
+    "@genesislcap/web-core": "{{versions.UI}}",
     "numeral": "2.0.6",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -105,15 +112,26 @@
     "@angular/platform-browser-dynamic": "^18.0.4",
     "@angular/router": "^18.0.4",
     "@genesislcap/foundation-comms": "{{versions.UI}}",
-    "@genesislcap/foundation-login": "{{versions.UI}}",
     "@genesislcap/foundation-entity-management": "{{versions.UI}}",
+    "@genesislcap/foundation-events": "{{versions.UI}}",
+    {{#if FDC3.includeDependencies}}
+    "@genesislcap/foundation-fdc3": "{{versions.UI}}",
+    {{/if}}
+    "@genesislcap/foundation-forms": "{{versions.UI}}",
     "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/foundation-logger": "{{versions.UI}}",
+    "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-shell": "{{versions.UI}}",
+    "@genesislcap/foundation-store": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/foundation-user": "{{versions.UI}}",
+    "@genesislcap/foundation-zero": "{{versions.UI}}",
+    "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
-    "@genesislcap/foundation-layout": "{{versions.UI}}",
-    "@genesislcap/g2plot-chart": "{{versions.UI}}",
+    "@genesislcap/web-core": "{{versions.UI}}",
     "numeral": "2.0.6",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

package/client-tmp/angular/src/app/app.component.ts

@@ -1,26 +1,28 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import getLayoutNameByRoute from './utils/getLayoutNameByRoute';
 import type { LayoutComponentName } from './types/layout';
 import { configureFoundationLogin } from './share/foundation-login';
+import { registerComponents } from './share/genesis-components';
+import { getStore } from './store';
+import { customEventFactory, registerStylesTarget } from '../pbc/utils';
 {{#if FDC3.channels.length}}
 import { listenToChannel, onFDC3Ready } from './utils';
 {{/if}}
 
-// Genesis Components
-import './share/genesis-components';
-
 @Component({
   selector: '{{rootElement}}',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
   layoutName?: LayoutComponentName;
   title = '{{capitalCase appName}}';
+  store = getStore();
 
   constructor(
-    private router: Router,
+    private el: ElementRef,
+    router: Router,
   ) {
       configureFoundationLogin({ router });
       
@@ -32,6 +34,43 @@ export class AppComponent implements AfterViewInit {
     });
   }
 
+  ngOnInit() {
+    this.addEventListeners();
+    this.readyStore();
+    registerStylesTarget(this.el.nativeElement, 'main');
+    this.loadRemotes();
+  }
+
+  ngOnDestroy() {
+    this.removeEventListeners();
+    this.disconnectStore();
+  }
+
+  async loadRemotes() {
+    await registerComponents();
+  }
+
+  addEventListeners() {
+    this.el.nativeElement.addEventListener('store-connected', this.store.onConnected);
+  }
+
+  removeEventListeners() {
+    this.el.nativeElement.removeEventListener('store-connected', this.store.onConnected);
+  }
+
+  readyStore() {
+    this.dispatchCustomEvent('store-connected', this.el.nativeElement);
+    this.dispatchCustomEvent('store-ready', true);
+  }
+
+  disconnectStore() {
+    this.dispatchCustomEvent('store-disconnected');
+  }
+
+  dispatchCustomEvent(type: string, detail?: any) {
+    this.el.nativeElement.dispatchEvent(customEventFactory(type, detail));
+  }
+
   ngAfterViewInit() {
     {{#if FDC3.channels.length}}
     onFDC3Ready(this.FDC3ReadyHandler);

package/client-tmp/angular/src/app/app.config.ts

@@ -1,4 +1,3 @@
-import type { MainMenu } from './types/menu'
 import type { LayoutComponentName } from './types/layout';
 
 export const AUTH_PATH = 'login'
@@ -19,15 +18,3 @@ export const layoutComponentImportsByName = {
 export const layoutNameByRouteMap: Map<string, LayoutComponentName> = new Map([
   [`/${AUTH_PATH}`, layoutComponentName.blank],
 ]);
-
-export const mainMenu: MainMenu = [
-  {{#each routes}}
-  {
-    index: {{@index}},
-    path: '{{kebabCase this.name}}',
-    title: '{{#if this.title}}{{this.title}}{{else}}{{this.name}}{{/if}}',
-    icon: '{{this.icon}}',
-    variant: 'solid'
-  }{{#unless @last}},{{/unless}}
-  {{/each}}
-];

package/client-tmp/angular/src/app/app.module.ts

@@ -1,11 +1,14 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { AppRoutingModule } from './app-routing.module';
+import { Router, RouterModule } from '@angular/router';
+import { PBCContainer } from '../pbc/container';
+import { PBCElementsRenderer } from '../pbc/elementsRenderer';
 import { AppComponent } from './app.component';
 import { DefaultLayoutComponent } from './layouts/default/default.layout';
 import { BlankLayoutComponent } from './layouts/blank/blank.layout';
 import { LayoutLazyLoadDirective } from './directive/app-lazy-load.directive';
+import { RouteService } from './services/route.service';
 
 @NgModule({
   declarations: [
@@ -15,11 +18,21 @@ import { LayoutLazyLoadDirective } from './directive/app-lazy-load.directive';
     BlankLayoutComponent,
   ],
   imports: [
-    AppRoutingModule,
     BrowserModule,
     FormsModule,
+    RouterModule.forRoot(RouteService.routes),
+    PBCContainer,
+    PBCElementsRenderer,
+  ],
+  providers: [
+    RouteService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (service: RouteService, router: Router) => () => router.resetConfig(service.allRoutes()),
+      deps: [RouteService, Router],
+      multi: true,
+    },
   ],
-  providers: [],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

package/client-tmp/angular/src/app/guards/auth.guard.ts

@@ -1,21 +1,14 @@
 import { Injectable } from '@angular/core';
-import { CanActivate, Router } from '@angular/router';
-import { AuthService } from '../services/auth.service';
 import { AUTH_PATH } from '../app.config';
+import { PermissionsGuard } from './permissions.guard';
 
 @Injectable({
   providedIn: 'root',
 })
-export class AuthGuard implements CanActivate {
-  constructor(
-    private authService: AuthService,
-    private router: Router,
-  ) {}
-
-  canActivate(): boolean {
-    const isUserAuthenticated = this.authService.isUserAuthenticated();
-
-    if (!isUserAuthenticated) {
+export class AuthGuard extends PermissionsGuard {
+  override async canActivate(): Promise<boolean> {
+    if (!this.user.isAuthenticated) {
+      this.user.trackPath();
       this.router.navigate([`/${AUTH_PATH}`]);
       return false;
     }

package/client-tmp/angular/src/app/guards/chained.guard.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { getUser } from '@genesislcap/foundation-user';
+import { AuthGuard } from './auth.guard';
+import { ConnectionGuard } from './connection.guard';
+import { PermissionsGuard } from './permissions.guard';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ChainedGuard implements CanActivate {
+    protected user = getUser();
+
+    constructor(
+        protected router: Router,
+        protected connectionGuard: ConnectionGuard,
+        protected authGuard: AuthGuard,
+        protected permissionsGuard: PermissionsGuard
+    ) {}
+
+    async canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
+        let result = await this.connectionGuard.canActivate();
+        if (!result) {
+            return false;
+        }
+        result = await this.authGuard.canActivate();
+        if (!result) {
+            return false;
+        }
+        result = await this.permissionsGuard.canActivate(route);
+        return result;
+    }
+}

package/client-tmp/angular/src/app/guards/connection.guard.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { CanActivate} from '@angular/router';
+import { getConnect } from '@genesislcap/foundation-comms';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ConnectionGuard implements CanActivate {
+    protected connect = getConnect();
+
+    async canActivate(): Promise<boolean> {
+        if (this.connect.isConnected) {
+            return true;
+        }
+        const hostUrl = sessionStorage.getItem('hostUrl');
+        if (!hostUrl) {
+            return false;
+        }
+        return this.connect.connect(hostUrl);
+    }
+}

package/client-tmp/angular/src/app/guards/permissions.guard.ts

@@ -1,21 +1,19 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
-import { AuthService } from '../services/auth.service';
+import { getUser } from '@genesislcap/foundation-user';
 import { NOT_PERMITTED_PATH } from '../app.config';
 
 @Injectable({
   providedIn: 'root',
 })
 export class PermissionsGuard implements CanActivate {
-  constructor(
-    private authService: AuthService,
-    private router: Router,
-  ) {}
+  protected user = getUser();
 
-  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
-    const isPermitted = await this.authService.hasUserPermission(route.data['permissionCode']);
+  constructor(protected router: Router) {}
 
-    if (!isPermitted) {
+  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
+    const { permissionCode } = route.data;
+    if (permissionCode && !this.user.hasPermission(permissionCode)) {
       await this.router.navigate([`/${NOT_PERMITTED_PATH}`]);
       return false;
     }

package/client-tmp/angular/src/app/layouts/base.layout.ts

@@ -1,11 +1,7 @@
 import { Router } from '@angular/router';
 
 export default class BaseLayout {
-  router: Router;
-
-  constructor(router: Router) {
-    this.router = router;
-  }
+  constructor(protected router: Router) {}
 
   navigate(path: string) {
     this.router.navigate([path]);

package/client-tmp/angular/src/app/layouts/default/default.layout.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  contain: content;
 }
 
 .container {

package/client-tmp/angular/src/app/layouts/default/default.layout.html

@@ -1,19 +1,18 @@
 <rapid-design-system-provider #designSystemProvider>
+  <pbc-elements-renderer [target]="['layout-start']"></pbc-elements-renderer>
   <foundation-header
     #foundationHeader
     show-luminance-toggle-button
     show-misc-toggle-button
     (luminance-icon-clicked)="onLuminanceToogle()"
     [navigateTo]="navigateAngular"
+    [routeNavItems]="navItems"
   >
-    <section class="routes-wrapper" slot="routes">
-      <rapid-button *ngFor="let menuLink of allRoutes" (click)="navigate(menuLink.path)" >
-        <rapid-icon name="\{{ menuLink.icon }}"></rapid-icon>
-        \{{ menuLink.title }}
-      </rapid-button>
-    </section>
   </foundation-header>
   <section class="content">
+    <pbc-elements-renderer [target]="['content-start']"></pbc-elements-renderer>
     <router-outlet></router-outlet>
+    <pbc-elements-renderer [target]="['content', 'content-end']"></pbc-elements-renderer>
   </section>
+  <pbc-elements-renderer [target]="['layout', 'layout-end']"></pbc-elements-renderer>
 </rapid-design-system-provider>

package/client-tmp/angular/src/app/layouts/default/default.layout.ts

@@ -1,10 +1,11 @@
 import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { baseLayerLuminance, StandardLuminance } from '@microsoft/fast-components';
-import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import { configureDesignSystem, FoundationRouteNavItem } from '@genesislcap/foundation-ui';
+import { baseLayerLuminance, StandardLuminance } from '@genesislcap/web-core';
 import * as designTokens from '../../../styles/design-tokens.json';
+import { RouteService } from '../../services/route.service';
 import BaseLayout from '../base.layout';
-import { mainMenu } from '../../app.config';
+import { registerStylesTarget } from '../../../pbc/utils';
 
 @Component({
   selector: 'app-default-layout',
@@ -13,16 +14,20 @@ import { mainMenu } from '../../app.config';
 })
 export class DefaultLayoutComponent extends BaseLayout implements AfterViewInit {
   @ViewChild('designSystemProvider') designSystemProviderElement!: ElementRef;
-  allRoutes = mainMenu;
+  navItems: FoundationRouteNavItem[] = [];
 
   constructor(
+    private el: ElementRef,
     router: Router,
+    routeService: RouteService,
   ) {
     super(router);
+    this.navItems = routeService.getNavItems();
   }
 
   ngAfterViewInit() {
     configureDesignSystem(this.designSystemProviderElement.nativeElement, designTokens);
+    registerStylesTarget(this.el.nativeElement, 'layout');
   }
   
   navigateAngular = (path: string) => {

package/client-tmp/angular/src/app/services/route.service.ts

@@ -0,0 +1,95 @@
+import { Injectable } from '@angular/core';
+import { Route, Routes } from '@angular/router';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import { FoundationRoute, FoundationRouteNavItem, getNavItems } from '@genesislcap/foundation-ui';
+import { PBCContainer } from '../../pbc/container';
+import { AUTH_PATH, NOT_PERMITTED_PATH } from '../app.config';
+import { ChainedGuard } from '../guards/chained.guard';
+import { AuthLoginComponent } from '../pages/auth-login/auth-login.component';
+import { NotPermittedComponent } from '../pages/not-permitted/not-permitted.component';
+{{#each routes}}
+import { {{pascalCase this.name}}Component } from '../pages/{{kebabCase this.name}}/{{kebabCase this.name}}.component';
+{{/each}}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class RouteService {
+    static routes: Routes = [
+        {
+            path: '',
+            redirectTo: `${AUTH_PATH}`,
+            pathMatch: 'full',
+        },
+        {
+            path: `${AUTH_PATH}`,
+            component: AuthLoginComponent,
+        },
+        {
+            path: `${NOT_PERMITTED_PATH}`,
+            component: NotPermittedComponent,
+        },
+        {{#each routes}}
+        {
+            path: '{{kebabCase this.name}}',
+            canActivate: [ChainedGuard],
+            component: {{pascalCase this.name}}Component,
+            data: {
+                permissionCode: '{{this.permissions.viewRight}}',
+                navItems: [
+                    {
+                        navId: 'header',
+                        title: '{{#if this.title}}{{this.title}}{{else}}{{this.name}}{{/if}}',
+                        icon: {
+                            name: '{{this.icon}}',
+                            variant: 'solid',
+                        },
+                    },
+                ],
+            },
+        },
+        {{/each}}
+    ];
+
+    /**
+     * @privateRemarks
+     * The shell has access to context, so it's possible for it to return a pre-mapped framework variant of routes. 
+     * In this iteration we're doing it inline, given the angular version may move and here we know the shape we need.
+     */
+    pbcRoutes(): Routes {
+        return getApp().routes.map((route) => {
+            return <Route>{
+                title: route.title,
+                path: route.path,
+                /**
+                 * Ask about permissions.viewRight in PBC context, as we may need to apply a data.permissionCode here.
+                 * Not sure if they are added to the filesystem prior to handlebars template processing across the files.
+                 */
+                canActivate: [ChainedGuard],
+                component: PBCContainer,
+                data: {
+                    ...route.settings,
+                    pbcElement: route.element,
+                    // @ts-ignore
+                    pbcElementTag: route.elementTag,
+                    navItems: route.navItems
+                },
+            };
+        })
+    }
+
+    allRoutes(): Routes {
+        return [
+            ...RouteService.routes,
+            ...this.pbcRoutes(),
+        ];
+    }
+
+    getNavItems(): FoundationRouteNavItem[] {
+        const allNavItems = this.allRoutes().flatMap(route => (<FoundationRoute>{
+            path: route.path as string,
+            navItems: route.data?.['navItems'],
+        }));
+        return getNavItems(allNavItems);
+    }
+}

package/client-tmp/angular/src/app/share/foundation-login.ts

@@ -1,8 +1,8 @@
 import {configure, define} from '@genesislcap/foundation-login';
 import type { Router } from '@angular/router';
+import { getUser } from '@genesislcap/foundation-user';
+import { css, DI } from '@genesislcap/web-core';
 import { AUTH_PATH } from '../app.config';
-import { css } from '@microsoft/fast-element';
-import { DI } from '@microsoft/fast-foundation';
 import logo from '../../assets/logo.svg';
 
 // eslint-disable-next-line
@@ -28,10 +28,12 @@ export const configureFoundationLogin = ({
   router: Router;
 }) => {
   configure(DI.getOrCreateDOMContainer(), {
+    // autoConnect: true, // < Guard in place to ensure connection. Keeping the connect form in place for now.
+    autoAuth: true, // < Allow users to skip login
     showConnectionIndicator: true,
     hostPath: AUTH_PATH,
     redirectHandler: () => {
-      router.navigate(['{{kebabCase routes.[0].name}}'])
+      router.navigate([getUser().lastPath() ?? '{{kebabCase routes.[0].name}}'])
     },
     ...ssoSettings,
     logo: css `

package/client-tmp/angular/src/app/share/genesis-components.ts

@@ -1,29 +1,56 @@
-import { configure as configureHeader }from '@genesislcap/foundation-header/config';
-import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { EntityManagement } from '@genesislcap/foundation-entity-management';
+import { Form } from '@genesislcap/foundation-forms';
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import * as zeroDesignSystem from '@genesislcap/foundation-zero';
 import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
 import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
 import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
 
+/**
+ * Ensure tree shaking doesn't remove these.
+ */
 EntityManagement;
+Form;
+
+/**
+ * registerComponents.
+ * @public
+ */
+export async function registerComponents() {
+    const { configure: configureHeader } = await import('@genesislcap/foundation-header/config');
+    /**
+    * Register any PBC components with the design system
+    */
+    getApp().registerComponents({
+        designSystem: rapidDesignSystem,
+    });
 
-configureHeader({
- templateOptions: {
-    provider: 'template',
-     icon: 'rapid-icon',
-     button: 'rapid-button',
-     connectionIndicator: 'rapid-connection-indicator',
-     select: 'rapid-select',
-     option: 'rapid-option',
-     flyout: 'rapid-flyout',
- },
-});
+    rapidDesignSystem
+        .provideDesignSystem()
+        .register(
+            rapidDesignSystem.baseComponents,
+            rapidGridComponents,
+            g2plotChartsComponents,
+            foundationLayoutComponents,
+        );
+ 
+    configureHeader({
+        templateOptions: {
+            provider: 'template',
+            icon: 'rapid-icon',
+            button: 'rapid-button',
+            connectionIndicator: 'rapid-connection-indicator',
+            select: 'rapid-select',
+            option: 'rapid-option',
+            flyout: 'rapid-flyout',
+        },
+    });
 
-rapidDesignSystem
- .provideDesignSystem()
- .register(
-     rapidDesignSystem.baseComponents,
-     rapidGridComponents,
-     g2plotChartsComponents,
-     foundationLayoutComponents,
- );
+    /**
+     * May be still required while we transition all PBCs to rapid. Remove when complete.
+     */
+    zeroDesignSystem
+        .provideDesignSystem()
+        .register(zeroDesignSystem.baseComponents, g2plotChartsComponents, foundationLayoutComponents);
+}

package/client-tmp/angular/src/app/store/index.ts

@@ -0,0 +1 @@
+export * from './store';

package/client-tmp/angular/src/app/store/store.ts

@@ -0,0 +1,34 @@
+import { CustomEventMap } from '@genesislcap/foundation-events';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import {
+  AbstractStoreRoot,
+  registerStore,
+  StoreRoot,
+  StoreRootEventDetailMap,
+} from '@genesislcap/foundation-store';
+import { DI } from '@genesislcap/web-core';
+
+export interface Store extends StoreRoot {}
+
+export type StoreEventDetailMap = StoreRootEventDetailMap & {};
+
+declare global {
+  interface HTMLElementEventMap extends CustomEventMap<StoreEventDetailMap> {}
+}
+
+class DefaultStore extends AbstractStoreRoot<Store, StoreEventDetailMap> implements Store {
+  constructor() {
+    super();
+
+    /**
+     * Register the store root
+     */
+    getApp().registerStoreRoot(this);
+  }
+}
+
+export const Store = registerStore(DefaultStore, 'Store');
+
+export function getStore(): Store {
+  return DI.getOrCreateDOMContainer().get(Store) as Store;
+}

package/client-tmp/angular/src/declaration.d.ts

@@ -2,4 +2,10 @@ declare module "*.svg" {
   const content: any;
   export default content;
 }
-  
+
+/**
+ * Temp to unblock testing until we update the types pointer in all PBC packages
+ */
+declare module '@genesislcap/pbc-auth-ui';
+declare module '@genesislcap/pbc-documents-ui';
+declare module '@genesislcap/pbc-reconciliation-ui';

package/client-tmp/angular/src/environments/environment.prod.ts

@@ -4,4 +4,5 @@ export const environment = {
   ENABLE_SSO: {{enableSSO}},
   HOST: 'localhost',
   PROTOCOL: 'http',
+  BUILDER: 'webpack',
 };

package/client-tmp/angular/src/environments/environment.ts

@@ -5,4 +5,5 @@ export const environment = {
   ENABLE_SSO: {{enableSSO}},
   HOST: 'localhost',
   PROTOCOL: 'http',
-};
+  BUILDER: 'webpack'
+};

package/client-tmp/angular/src/main.ts

@@ -1,6 +1,17 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { createLogger } from '@genesislcap/foundation-logger';
 import { AppModule } from './app/app.module';
+import { registerPBCs } from './pbc/utils';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+const logger = createLogger('main');
+
+function bootstrapApp() {
+  platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => logger.error(err));
+}
+
+registerPBCs()
+  .then(hasAssets => logger.debug(hasAssets ? 'PBCs registered' : 'No PBCs detected'))
+  .catch((err) => logger.error(err))
+  .finally(bootstrapApp)

package/client-tmp/angular/src/pbc/README.md

@@ -0,0 +1,7 @@
+# PBC
+
+This directory contains PBC `genx add` output.
+
+The app will reload if you remove, add, or customise a packaged business capability.
+
+See the expanded README.md in `@genesislcap/foundation-shell`.

package/client-tmp/angular/src/pbc/container.ts

@@ -0,0 +1,40 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { deriveElementTag } from './utils';
+
+/**
+ * An app level container for the lazy loading of the web component based PBC routes in angular router.
+ */
+@Component({
+    standalone: true,
+    selector: 'pbc-container',
+    template: `<div #container class="container"></div>`, // todo get rid of the extra div
+    styles: [`
+        .container {
+            width: 100%;
+            height: 100%;
+        }
+    `],
+    schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+    ],
+})
+export class PBCContainer implements OnInit {
+    @ViewChild('container', { static: true }) container!: ElementRef;
+
+    constructor(private route: ActivatedRoute) {}
+
+    async ngOnInit() {
+        const { pbcElement, pbcElementTag } = this.route.snapshot.data ?? {};
+        if (!pbcElement) {
+            return;
+        }
+        /**
+         * Account for PBC elements being a mix of constructors and lazy loading functions
+         */
+        const element = pbcElement.define ? pbcElement : await pbcElement();
+        const tagName = pbcElementTag || deriveElementTag(element.name);
+        const customElement = document.createElement(tagName);
+        this.container.nativeElement.appendChild(customElement);
+    }
+}

package/client-tmp/angular/src/pbc/elementsRenderer.ts

@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { AppElementPredicate, AppTargetId } from '@genesislcap/foundation-shell/app';
+import { createLogger } from '@genesislcap/foundation-logger';
+import type { ViewTemplate } from '@genesislcap/web-core';
+import { customEventFactory, getTargetElements } from './utils';
+
+/**
+ * An app level component for renderering target PBC elements to an angular template.
+ */
+@Component({
+    standalone: true,
+    selector: 'pbc-elements-renderer',
+    template: `<div #container class="container"></div>`, // < can we get rid of the extra div?
+    styles: [`
+        .container {}
+    `],
+    schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+    ],
+    imports: [
+        CommonModule,
+    ]
+})
+export class PBCElementsRenderer implements OnChanges, OnInit {
+    @ViewChild('container', { static: true }) container!: ElementRef;
+    @Input() target: AppTargetId = [];
+    @Input() predicate: AppElementPredicate = () => true;
+    templates: ViewTemplate[] = [];
+    logger = createLogger('pbc-elements-renderer');
+
+    async ngOnInit() {
+        this.setTemplates();
+        this.renderTemplates();
+    }
+
+    $emit(type: string, detail?: any) {
+        this.container.nativeElement.dispatchEvent(customEventFactory(type, detail));
+    };
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['target']) {
+            this.logger.debug('target changed, rendering qualifying elements');
+            this.setTemplates();
+            this.renderTemplates();
+        }
+    }
+
+    setTemplates() {
+        this.templates = getTargetElements(this.target, this.predicate);
+    }
+
+    renderTemplates() {
+        this.container.nativeElement.replaceChildren();
+        this.templates.forEach((template) => template.render(this, this.container.nativeElement));
+    }
+}

package/client-tmp/angular/src/pbc/utils.ts

@@ -0,0 +1,121 @@
+import { createLogger } from '@genesislcap/foundation-logger';
+import {
+    AppContext,
+    AppElement,
+    AppElementPredicate,
+    AppStyle,
+    AppStylePredicate,
+    AppTargetId,
+    assetPredicate,
+    getApp,
+    registrationPredicate,
+    targetIdPredicate
+} from '@genesislcap/foundation-shell/app';
+import { importPBCAssets } from '@genesislcap/foundation-shell/pbc';
+import { toElementStyles } from '@genesislcap/foundation-utils';
+import { ComposableStyles } from '@genesislcap/web-core';
+
+const logger = createLogger('pbc-utils');
+
+/**
+ * Some of this logic already exists in shell, but exists as part of a logic chain that assumes web components.
+ * After testing, we can backport the changes required.
+ */
+
+/**
+ * @public
+ */
+export async function registerPBCs(): Promise<boolean> {
+    const app = getApp();
+    const pbcAssets = await importPBCAssets();
+    app.registerAssets(pbcAssets);
+    return app.hasAssets();
+}
+
+/**
+ * @privateRemarks
+ * Shared across elements and styles.
+ */
+const assetFilter = (
+    asset: AppElement | AppStyle,
+    targetId: AppTargetId,
+    predicate: AppElementPredicate | AppStylePredicate = () => true,
+    context: AppContext,
+) => targetIdPredicate(asset, targetId) &&
+    assetPredicate(asset, context) &&
+    registrationPredicate(
+        asset,
+        predicate,
+        context,
+    );
+
+/**
+ * @public
+ */
+export function getTargetStyles(
+    targetId: AppTargetId,
+    predicate: AppStylePredicate = () => true
+) {
+    const app = getApp();
+    return app.styles
+        .filter(asset => assetFilter(asset, targetId, predicate, app.config.context!))
+        .map((token) => token.styles)
+        .flat();
+}
+
+
+/**
+ * @public
+ */
+export function getTargetElements(
+    targetId: AppTargetId,
+    predicate: AppElementPredicate = () => true
+) {
+    const app = getApp();
+    return app.elements
+        .filter(asset => assetFilter(asset, targetId, predicate, app.config.context!))
+        .map((token) => token.elements);
+}
+
+/**
+ * @public
+ */
+export function registerStylesTarget(nativeElement: HTMLElement, targetId: AppTargetId) {
+    const styles = getTargetStyles(targetId);
+    if (!styles || styles.length === 0) {
+        return;
+    }
+    applyDynamicStyles(nativeElement, styles);
+}
+
+/**
+ * @public
+ */
+export function applyDynamicStyles(nativeElement: HTMLElement, style: ComposableStyles | ComposableStyles[]) {
+    const elementStyles = toElementStyles(style);
+    const styleTarget = nativeElement.shadowRoot ? nativeElement.shadowRoot : document;
+    elementStyles.addStylesTo(styleTarget);
+}
+
+/**
+ * @public
+ */
+export function customEventFactory(type: string, detail?: any) {
+    return new CustomEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail,
+    });
+};
+
+/**
+ * @privateRemarks
+ * May need to add an elementTag to routes, ie. elementTag: 'notifications-dashboard'. May remove when complete.
+ * @public
+ */
+export function deriveElementTag(name: string): string {
+    const tagName = name.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
+    logger.debug(`Guessing pbc element tag is '${tagName}' based on '${name}'. This may be incorrect, please set pbcElementTag in route data.`);
+    return tagName;
+}

package/client-tmp/angular/tsconfig.app.json

@@ -10,6 +10,7 @@
   ],
   "include": [
     "src/**/*.d.ts",
-    "globals.d.ts",
+    "src/pbc/**/*.ts",
+    "globals.d.ts"
   ]
 }

package/client-tmp/angular/tsconfig.spec.json

@@ -8,7 +8,8 @@
     ]
   },
   "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "src/pbc/**/*.ts",
+    "src/**/*.spec.ts"
   ]
 }

package/client-tmp/angular/webpack.shared.config.js

@@ -32,11 +32,24 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'foundationZero/ZeroDesignSystem': path.resolve(
-        __dirname,
-        'node_modules/@genesislcap/foundation-zero',
-      ),
+      'pbc': path.resolve(
+          __dirname,
+          'src/pbc',
+      )
     },
   },
+  /**
+   * Ensure webpack handles module loading strictly to allow module federation fallbacks.
+   */
+  output: {
+    strictModuleErrorHandling: true,
+    strictModuleExceptionHandling: true,
+  },
+  /**
+   * Mark the 'foundationZero/ZeroDesignSystem' module federated remote as external.
+   */
+  externals: {
+    'foundationZero/ZeroDesignSystem': 'foundationZero/ZeroDesignSystem',
+  },
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed",
   "description": "Genesis Blank App Seed",
-  "version": "3.27.3",
+  "version": "3.28.0",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"

package/client-tmp/angular/src/app/app-routing.module.ts

@@ -1,40 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from './guards/auth.guard';
-import { PermissionsGuard } from './guards/permissions.guard';
-import { AuthLoginComponent } from './pages/auth-login/auth-login.component';
-import { NotPermittedComponent } from './pages/not-permitted/not-permitted.component';
-{{#each routes}}
-import { {{pascalCase this.name}}Component } from './pages/{{kebabCase this.name}}/{{kebabCase this.name}}.component';
-{{/each}}
-import { AUTH_PATH, NOT_PERMITTED_PATH } from './app.config';
-
-export const routes: Routes = [
-  {
-    path: '',
-    redirectTo: `${AUTH_PATH}`,
-    pathMatch: 'full',
-  },
-  {
-    path: `${AUTH_PATH}`,
-    component: AuthLoginComponent,
-  },
-  {
-    path: `${NOT_PERMITTED_PATH}`,
-    component: NotPermittedComponent,
-  },
-  {{#each routes}}
-  {
-    path: '{{kebabCase this.name}}',
-    canActivate: [AuthGuard{{#if this.permissions.viewRight}}, PermissionsGuard{{/if}}],
-    component: {{pascalCase this.name}}Component,
-    data: { permissionCode: '{{this.permissions.viewRight}}' },
-  },
-  {{/each}}
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

package/client-tmp/angular/src/app/services/auth.service.ts

@@ -1,22 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Auth } from '@genesislcap/foundation-comms';
-import { DI } from "@microsoft/fast-foundation";
-
-@Injectable({
-  providedIn: 'root',
-})
-export class AuthService {
-  auth: Auth;
-
-  constructor() {
-    this.auth = DI.getOrCreateDOMContainer().get(Auth);
-  }
-
-  isUserAuthenticated(): boolean {
-    return this.auth.isLoggedIn;
-  }
-
-  hasUserPermission(permissionCode: string): boolean {
-    return this.auth.currentUser.hasPermission(permissionCode);
-  }
-}

package/client-tmp/angular/src/app/types/menu.ts

@@ -1,8 +0,0 @@
-export type MainMenuLink = {
-  index: number;
-  path: string;
-  title: string;
-  icon: string;
-  variant?: string;
-};
-export type MainMenu = MainMenuLink[];