@genesislcap/blank-app-seed 3.27.2 → 3.28.0

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.2",
+  "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[];