@genesislcap/blank-app-seed 3.17.1 → 3.18.0

package/.genx/package.json

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

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

@@ -0,0 +1,9 @@
+<rapid-g2plot-chart
+  type="{{ config.type }}"
+  [config]="tile{{ config.index }}.chartConfig"
+>
+  <chart-datasource
+    resourceName="{{ config.resourceName }}"
+    server-fields="{{ config.xField }} {{ config.yField }}"
+  ></chart-datasource>
+</rapid-g2plot-chart>

package/.genx/templates/angular/entityManager.hbs

@@ -0,0 +1,45 @@
+<entity-management
+    design-system-prefix="rapid"
+    enable-row-flashing
+    enable-cell-flashing
+    {{#if config.title}}
+    title="{{ config.title }}"
+    {{/if}}
+    resourceName="{{ config.resourceName }}"
+    {{#if config.createEvent}}
+    createEvent="{{ config.createEvent }}"
+    {{#if config.createFormUiSchema}}
+    [createFormUiSchema]="tile{{ config.index }}.createFormUiSchema"
+    {{/if}}
+    {{/if}}
+    {{#if config.updateEvent}}
+    updateEvent="{{ config.updateEvent }}"
+    {{#if config.updateFormUiSchema}}
+    [updateFormUiSchema]="tile{{ config.index }}.updateFormUiSchema"
+    {{/if}}
+    {{/if}}
+    {{#if config.deleteEvent}}
+    deleteEvent="{{ config.deleteEvent }}"
+    {{/if}}
+    {{#if config.gridOptions}}
+    [gridOptions]="{{ config.gridOptions }}"
+    {{/if}}
+    {{#if config.snapshot}}
+    [datasourceConfig]="{ isSnapshot: {{ config.snapshot }} }"
+    {{/if}}
+    {{#if config.reqrep}}
+    [datasourceConfig]="tile{{ config.index }}.reqrep"
+    {{/if}}
+    {{#if config.columns}}
+    [columns]="tile{{ config.index }}.columns"
+    {{/if}}
+    {{#if config.modalPosition}}
+    modal-position="{{ config.modalPosition }}"
+    {{/if}}
+    {{#if config.sizeColumnsToFit}}
+    size-columns-to-fit
+    {{/if}}
+    {{#if config.enableSearchBar}}
+    enable-search-bar
+    {{/if}}
+></entity-management>

package/.genx/templates/angular/form.hbs

@@ -0,0 +1,8 @@
+<foundation-form
+  design-system-prefix="rapid"
+  resourceName="{{config.resourceName}}"
+  {{#if config.uischema}}
+  [uischema]="tile{{ config.index }}.uischema"
+  {{/if}}
+>
+</foundation-form>

package/.genx/templates/angular/grid.hbs

@@ -0,0 +1,18 @@
+<rapid-grid-pro
+  enable-row-flashing
+  enable-cell-flashing
+  >
+  <grid-pro-genesis-datasource
+    resource-name="{{config.resourceName}}"
+    {{#if config.snapshot}}
+    isSnapshot="{{config.snapshot}}"
+    {{/if}}
+    {{#if config.reqrep}}
+    [datasourceConfig]="tile{{ config.index }}.reqrep"
+    {{/if}}
+    {{#if config.gridOptions}}
+    [deferredGridOptions]="tile{{ config.index }}.gridOptions"
+    {{/if}}
+  >
+  </grid-pro-genesis-datasource>
+</rapid-grid-pro>

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

@@ -11,4 +11,22 @@ import {CommonModule} from '@angular/common';
   templateUrl: './{{kebabCase route.name}}.component.html',
   styleUrls: ['./{{kebabCase route.name}}.component.css'],
 })
-export class {{pascalCase route.name}}Component {}
+export class {{pascalCase route.name}}Component {
+  {{#each route.tiles}}
+  tile{{this.config.index}} = { {{#if this.config.createFormUiSchema}}
+    "createFormUiSchema": {{{ this.config.createFormUiSchema }}},{{/if}}{{#if this.config.updateFormUiSchema}}
+    "updateFormUiSchema": {{{ this.config.updateFormUiSchema }}},{{/if}}{{#if this.config.uischema}}
+    "uischema": {{{ this.config.uischema }}},{{/if}}{{#if this.config.gridOptions}}
+    "gridOptions": {{{ this.config.gridOptions }}},{{/if}}{{#if this.config.reqrep}}
+    "reqrep": {{{ this.config.reqrep }}},{{/if}}{{#if this.config.columns}}
+    "columns": {{{ this.config.columns }}},{{/if}}{{#if this.config.type}}
+    "chartConfig": { {{#ifEquals this.config.type 'pie'}}
+      "radius": 0.75,
+      "angleField": "value",
+      "colorField": "groupBy",{{else}}
+      "xField": "groupBy",
+      "yField": "value",{{/ifEquals}}
+    },{{/if}}
+  }{{#unless @last}};{{/unless}}
+  {{/each}}
+}

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

@@ -1,3 +1,3 @@
 :host {
   height: 100%;
-}
+}

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

@@ -1,7 +1,7 @@
   {{#if route.tiles}}
-  <zero-layout auto-save-key="{{route.layoutKey}}">
+  <rapid-layout auto-save-key="{{route.layoutKey}}">
      {{> (lookup ./route 'layoutType') }}
-  </zero-layout>
+  </rapid-layout>
   {{else}}
   <!-- insert template code here -->
   Welcome to {{sentenceCase route.name}}

package/.genx/utils/formatRouteData.js

@@ -11,18 +11,29 @@ const formatRouteData = (route) => {
   const FDC3EventHandlersEnabled = !!route.tiles?.find(
     (t) => t.config?.gridOptions?.onRowClicked?.category === FDC3ClickCategory,
   );
+  const tiles = route.tiles?.map((tile, index) => {
+    const config = tile.config || {};
+    const {
+      gridOptions,
+      createFormUiSchema,
+      updateFormUiSchema,
+      uischema,
+      columns,
+    } = config;
 
-  const tiles = route.tiles?.map((tile) => ({
-    ...tile,
-    config: {
-      ...(tile.config || {}),
-      gridOptions: gridOptionsSerializer(tile.config?.gridOptions),
-      createFormUiSchema: formatJSONValue(tile.config?.createFormUiSchema),
-      updateFormUiSchema: formatJSONValue(tile.config?.updateFormUiSchema),
-      uischema: formatJSONValue(tile.config?.uischema),
-      columns: gridColumnsSerializer(tile.config?.columns),
-    },
-  }));
+    return {
+      ...tile,
+      config: {
+        ...config,
+        index,
+        gridOptions: gridOptionsSerializer(gridOptions),
+        createFormUiSchema: formatJSONValue(createFormUiSchema),
+        updateFormUiSchema: formatJSONValue(updateFormUiSchema),
+        uischema: formatJSONValue(uischema),
+        columns: gridColumnsSerializer(columns),
+      },
+    };
+  });
 
   return {
     ...route,

package/.genx/utils/registerPartials.js

@@ -1,25 +1,42 @@
 const { resolve } = require('node:path');
+const {
+  DIR_TEMPLATE_ROOT_ALIAS,
+  DIRS_MAP,
+  DIR_TEMPLATE_BY_FRAMEWORK,
+} = require('../static');
+
+const registerPartials = ({ registerPartial }, framework) => {
+  const rootTemplateDir = `../${DIRS_MAP.get(DIR_TEMPLATE_ROOT_ALIAS)}`;
+  const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
 
-const registerPartials = ({ registerPartial }) => {
   registerPartial(
     'grid-layout',
-    resolve(__dirname, '../templates/gridLayout.hbs'),
+    resolve(__dirname, `${rootTemplateDir}/gridLayout.hbs`),
   );
   registerPartial(
     'tabs-layout',
-    resolve(__dirname, '../templates/tabsLayout.hbs'),
+    resolve(__dirname, `${rootTemplateDir}/tabsLayout.hbs`),
   );
   registerPartial(
     'horizontal-layout',
-    resolve(__dirname, '../templates/horizontalLayout.hbs'),
+    resolve(__dirname, `${rootTemplateDir}/horizontalLayout.hbs`),
+  );
+  registerPartial(
+    'smart-form',
+    resolve(__dirname, `${sourceTemplateDir}/form.hbs`),
+  );
+  registerPartial(
+    'chart',
+    resolve(__dirname, `${sourceTemplateDir}/chart.hbs`),
   );
-  registerPartial('smart-form', resolve(__dirname, '../templates/form.hbs'));
-  registerPartial('chart', resolve(__dirname, '../templates/chart.hbs'));
   registerPartial(
     'entity-manager',
-    resolve(__dirname, '../templates/entityManager.hbs'),
+    resolve(__dirname, `${sourceTemplateDir}/entityManager.hbs`),
+  );
+  registerPartial(
+    'grid-pro',
+    resolve(__dirname, `${sourceTemplateDir}/grid.hbs`),
   );
-  registerPartial('grid-pro', resolve(__dirname, '../templates/grid.hbs'));
 };
 
 module.exports = registerPartials;

package/.genx/versions.json

@@ -1,5 +1,5 @@
 {
-  "UI": "14.192.0",
-  "GSF": "8.0.2",
+  "UI": "14.188.0",
+  "GSF": "8.0.1",
   "Auth": "8.0.0"
 }

package/CHANGELOG.md

@@ -1,11 +1,11 @@
 # Changelog
 
-## [3.17.1](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.17.0...v3.17.1) (2024-06-25)
+## [3.18.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.17.1...v3.18.0) (2024-06-25)
 
 
-### Bug Fixes
+### Features
 
-* automated dependency version update [skip-ci] [PSD-9](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/9) (#263) 656d2d2
+* tile support in angular [FUI-1969](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/1969) (#253) 2812af6
 
 ## [3.17.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.16.1...v3.17.0) (2024-06-21)
 

package/client-tmp/angular/angular.json

@@ -25,7 +25,7 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles/styles.css"],
             "scripts": [],
             "allowedCommonJsDependencies": [
               "lodash",
@@ -117,7 +117,7 @@
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles/styles.css"],
             "scripts": []
           }
         },

package/client-tmp/angular/package.json

@@ -19,12 +19,14 @@
     "@angular/platform-browser": "^17.1.0",
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
-    "@genesislcap/foundation-ui": "{{versions.UI}}",
     "@genesislcap/foundation-comms": "{{versions.UI}}",
     "@genesislcap/foundation-login": "{{versions.UI}}",
-    "@genesislcap/foundation-zero": "{{versions.UI}}",
     "@genesislcap/foundation-entity-management": "{{versions.UI}}",
-    "@genesislcap/foundation-zero-grid-pro": "{{versions.UI}}",
+    "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/rapid-design-system": "{{versions.UI}}",
+    "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
     "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

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

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

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

@@ -1,3 +1,2 @@
-<zero-design-system-provider>
-  <router-outlet />
-</zero-design-system-provider>
+<ng-container *appLayoutLazyLoad="layoutName"></ng-container>
+

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

@@ -1,26 +1,32 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { Router } from '@angular/router';
+import { Component } 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';
 
 // Genesis Components
 import './share/genesis-components';
 
-
 @Component({
   selector: '{{rootElement}}',
-  standalone: true,
-  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class AppComponent {
+  layoutName?: LayoutComponentName;
   title = '{{capitalCase appName}}';
 
   constructor(
     private router: Router,
   ) {
       configureFoundationLogin({ router });
+
+      
+    // Set layout componet based on route
+    router.events.subscribe((event: any) => {
+      if (event instanceof NavigationEnd) {
+        this.layoutName = getLayoutNameByRoute(event.urlAfterRedirects);
+      }
+    });
   }
 }

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

@@ -1,7 +1,31 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { routes } from './app.routes';
+import type { MainMenu } from './types/menu'
+import type { LayoutComponentName } from './types/layout';
+import { AUTH_PATH } from './app-routing.module';
 
-export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+export const layoutComponentName = {
+  default: 'DefaultLayoutComponent',
+  blank: 'BlankLayoutComponent',
 };
+
+export const layoutComponentImportsByName = {
+  [layoutComponentName.default]: () =>
+    import('./layouts/default/default.layout').then((m) => m.DefaultLayoutComponent),
+  [layoutComponentName.blank]: () =>
+    import('./layouts/blank/blank.layout').then((m) => m.BlankLayoutComponent),
+};
+
+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

@@ -0,0 +1,26 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { AppRoutingModule } from './app-routing.module';
+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';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    LayoutLazyLoadDirective,
+    DefaultLayoutComponent,
+    BlankLayoutComponent,
+  ],
+  imports: [
+    AppRoutingModule,
+    BrowserModule,
+    FormsModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}

package/client-tmp/angular/src/app/directive/app-lazy-load.directive.ts

@@ -0,0 +1,45 @@
+import {
+  Directive,
+  ViewContainerRef,
+  Input,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { layoutComponentImportsByName } from '../app.config';
+@Directive({
+  selector: '[appLayoutLazyLoad]',
+})
+export class LayoutLazyLoadDirective implements OnInit, OnChanges {
+  @Input('appLayoutLazyLoad') componentName?: string;
+
+  constructor(private viewContainerRef: ViewContainerRef) {}
+
+  ngOnInit() {
+    this.loadComponent();
+  }
+
+  ngOnChanges({ componentName }: SimpleChanges) {
+    const currentValue = componentName?.currentValue;
+    const previousValue = componentName?.previousValue;
+
+    if (currentValue && currentValue !== previousValue) {
+      this.loadComponent();
+    }
+  }
+
+  async loadComponent() {
+    this.viewContainerRef.clear();
+
+    if (!this.componentName) {
+      return;
+    }
+
+    if (!layoutComponentImportsByName[this.componentName]) {
+      console.error(`Unknown component name: ${this.componentName}`);
+    }
+
+    const component = await layoutComponentImportsByName[this.componentName]();
+    this.viewContainerRef.createComponent(component);
+  }
+}

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
-import { AUTH_PATH } from '../app.routes';
 import { AuthService } from '../services/auth.service';
+import { AUTH_PATH } from '../app-routing.module';
 
 
 @Injectable({

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

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

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

@@ -0,0 +1,11 @@
+rapid-design-system-provider {
+  height: 100%;
+  background-color: var(--neutral-fill-stealth-active);
+  color: var(--neutral-foreground-rest);
+}
+
+.content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,6 @@
+<rapid-design-system-provider #designSystemProvider>
+  <section class="content">
+    <router-outlet></router-outlet>
+    <app-messages></app-messages>
+  </section>
+</rapid-design-system-provider>

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

@@ -0,0 +1,23 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlankLayoutComponent } from './blank.layout';
+
+describe('BlankLayoutComponent', () => {
+  let component: BlankLayoutComponent;
+  let fixture: ComponentFixture<BlankLayoutComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BlankLayoutComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(BlankLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import * as designTokens from '../../../styles/design-tokens.json';
+
+@Component({
+  selector: 'app-blank-layout',
+  templateUrl: './blank.layout.html',
+  styleUrls: ['./blank.layout.css'],
+})
+export class BlankLayoutComponent implements AfterViewInit {
+  @ViewChild('designSystemProvider') designSystemProviderElement!: ElementRef;
+
+  ngAfterViewInit() {
+    configureDesignSystem(this.designSystemProviderElement.nativeElement, designTokens);
+  }
+}

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

@@ -0,0 +1,49 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.container {
+  position: relative;
+  height: 100%;
+}
+
+rapid-design-system-provider {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--neutral-fill-stealth-active);
+  color: var(--neutral-foreground-rest);
+  overflow: hidden;
+}
+
+foundation-header {
+  z-index: 999;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  align-items: center;
+  border: none;
+}
+
+foundation-header::part(background) {
+  box-sizing: border-box;
+}
+
+.routes-wrapper {
+  display: flex;
+  gap: calc(var(--design-unit) * 2px);
+}
+
+.content {
+  width: 100%;
+  flex-grow: 1;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-top: var(--nav-height);
+}

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

@@ -0,0 +1,20 @@
+<rapid-design-system-provider #designSystemProvider>
+  <foundation-header
+    #foundationHeader
+    show-luminance-toggle-button
+    show-misc-toggle-button
+    (luminance-icon-clicked)="onLuminanceToogle()"
+    [navigateTo]="navigateAngular"
+  >
+    <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">
+    <router-outlet></router-outlet>
+    <app-messages></app-messages>
+  </section>
+</rapid-design-system-provider>

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

@@ -0,0 +1,34 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMockStore } from '@ngrx/store/testing';
+import * as StateChangerSelector from '../../store/state-changer/state-changer.selectors';
+
+import { DefaultLayoutComponent } from './default.layout';
+
+describe('DefaultLayoutComponent', () => {
+  let component: DefaultLayoutComponent;
+  let fixture: ComponentFixture<DefaultLayoutComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DefaultLayoutComponent],
+      providers: [
+        provideMockStore({
+          initialState: {},
+          selectors: [
+            { selector: StateChangerSelector.getCriteria, value: 'initial-criteria' },
+            { selector: StateChangerSelector.getResourceName, value: 'initial-resource-name' },
+          ],
+        }),
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(DefaultLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+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 * as designTokens from '../../../styles/design-tokens.json';
+import BaseLayout from '../base.layout';
+import { mainMenu } from '../../app.config';
+
+@Component({
+  selector: 'app-default-layout',
+  templateUrl: './default.layout.html',
+  styleUrls: ['./default.layout.css'],
+})
+export class DefaultLayoutComponent extends BaseLayout implements AfterViewInit {
+  @ViewChild('designSystemProvider') designSystemProviderElement!: ElementRef;
+  allRoutes = mainMenu;
+
+  constructor(
+    router: Router,
+  ) {
+    super(router);
+  }
+
+  ngAfterViewInit() {
+    configureDesignSystem(this.designSystemProviderElement.nativeElement, designTokens);
+  }
+  
+  navigateAngular = (path: string) => {
+    this.router.navigate([path]);
+  };
+  
+  onLuminanceToogle = (): void => {
+    baseLayerLuminance.setValueFor(
+      this.designSystemProviderElement.nativeElement,
+      baseLayerLuminance.getValueFor(this.designSystemProviderElement.nativeElement) ===
+        StandardLuminance.DarkMode
+        ? StandardLuminance.LightMode
+        : StandardLuminance.DarkMode,
+    );
+  };
+}

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

@@ -1,6 +1,5 @@
 // import { configure } from '@genesislcap/foundation-auth/config';
 import type { Router } from '@angular/router';
-import { INTERNAL_URLS } from '../app.routes';
 
 /**
  * Configure the micro frontend

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

@@ -1,6 +1,6 @@
 import {configure, define} from '@genesislcap/foundation-login';
 import type { Router } from '@angular/router';
-import { INTERNAL_URLS } from '../app.routes';
+import { AUTH_PATH } from '../app-routing.module';
 import { DI } from '@microsoft/fast-foundation';
 
 const ssoSettings =
@@ -24,9 +24,9 @@ export const configureFoundationLogin = ({
 }) => {
   configure(DI.getOrCreateDOMContainer(), {
     showConnectionIndicator: true,
-    hostPath: INTERNAL_URLS.auth,
+    hostPath: AUTH_PATH,
     redirectHandler: () => {
-      router.navigate([INTERNAL_URLS.homepage])
+      router.navigate(['{{kebabCase routes.[0].name}}'])
     },
     ...ssoSettings,
   });

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

@@ -1,15 +1,29 @@
-import {
-  provideDesignSystem as provideZeroDesignSystem,
-  baseComponents as zeroBaseComponents,
-} from '@genesislcap/foundation-zero';
-import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
-import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
-import { EntityManagement } from '@genesislcap/foundation-entity-management';
-
-EntityManagement;
-
-provideZeroDesignSystem().register(
-  zeroBaseComponents,
-  zeroGridComponents,
-  g2plotChartsComponents,
-);
+import { configure as configureHeader }from '@genesislcap/foundation-header/config';
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+import { EntityManagement } from '@genesislcap/foundation-entity-management';
+import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
+import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
+import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
+
+EntityManagement;
+
+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,
+ );

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

@@ -0,0 +1,5 @@
+import { layoutComponentName } from '../app.config';
+
+export type LayoutComponentName =
+  | typeof layoutComponentName.default
+  | typeof layoutComponentName.blank;

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

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

package/client-tmp/angular/src/app/utils/getLayoutNameByRoute.ts

@@ -0,0 +1,14 @@
+import { layoutComponentName, layoutNameByRouteMap } from '../app.config';
+import { LayoutComponentName } from '../types/layout';
+
+const getLayoutNameByRoute = (route: string): LayoutComponentName => {
+  const currentLayoutName = layoutNameByRouteMap.get(route);
+
+  if (currentLayoutName) {
+    return currentLayoutName;
+  }
+
+  return layoutComponentName.default;
+};
+
+export default getLayoutNameByRoute;

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

@@ -1,6 +1,6 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
 
-bootstrapApplication(AppComponent, appConfig)
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
   .catch((err) => console.error(err));

package/client-tmp/angular/src/styles/design-tokens.json

@@ -0,0 +1,56 @@
+{
+  "design_tokens": {
+    "color": {
+      "accent": {
+        "$value": "#0EAFE2",
+        "$type": "color"
+      },
+      "neutral": {
+        "$value": "#7C909B",
+        "$type": "color"
+      }
+    },
+    "fontFamily": {
+      "bodyFont": {
+        "$value": "Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
+        "$type": "fontFamily"
+      }
+    },
+    "typography": {
+      "baseFontSize": {
+        "$value": "14px",
+        "$type": "dimension"
+      },
+      "baseLineHeight": {
+        "$value": "20px",
+        "$type": "dimension"
+      }
+    },
+    "mode": {
+      "luminance": {
+        "$value": 0.23,
+        "$type": "number"
+      }
+    },
+    "style": {
+      "density": {
+        "$value": 0,
+        "$type": "number"
+      },
+      "borderRadius": {
+        "$value": 4,
+        "$type": "number"
+      },
+      "strokeWidth": {
+        "$value": 1,
+        "$type": "number"
+      }
+    },
+    "space": {
+      "designUnit": {
+        "$value": 4,
+        "$type": "number"
+      }
+    }
+  }
+}

package/client-tmp/angular/src/styles/styles.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: Segoe UI;
+  font-weight: 300;
+  src: local("Segoe UI Semilight"), local("Segoe UI");
+}
+
+* {
+  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; 
+  font-style: normal;
+  font-weight: normal;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+  --nav-height: 60px;
+}
+
+rapid-design-system-provider,
+.dynamic-template,
+foundation-router {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}

package/client-tmp/angular/src/styles.css

@@ -6,7 +6,7 @@ body {
   margin: 0;
 }
 
-zero-design-system-provider {
+rapid-design-system-provider {
   height: 100%;
   display: flex;
   flex-direction: column;

package/client-tmp/angular/tsconfig.json

@@ -22,7 +22,8 @@
     "lib": [
       "ES2022",
       "dom"
-    ]
+    ],
+    "resolveJsonModule": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

package/client-tmp/web-components/globals.d.ts

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

package/client-tmp/web-components/package.json

@@ -107,7 +107,6 @@
     "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/foundation-user": "{{versions.UI}}",
     "@genesislcap/foundation-zero": "{{versions.UI}}",
-    "@genesislcap/foundation-zero-grid-pro": "{{versions.UI}}",
     "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
@@ -132,7 +131,6 @@
     "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/foundation-user": "{{versions.UI}}",
     "@genesislcap/foundation-zero": "{{versions.UI}}",
-    "@genesislcap/foundation-zero-grid-pro": "{{versions.UI}}",
     "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",

package/client-tmp/web-components/src/components/components.ts

@@ -4,7 +4,6 @@ import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { getApp } from '@genesislcap/foundation-shell/app';
 import { FoundationRouter } from '@genesislcap/foundation-ui';
 import * as zeroDesignSystem from '@genesislcap/foundation-zero';
-import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
 import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
 import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
 import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
@@ -56,10 +55,5 @@ export async function registerComponents() {
    */
   zeroDesignSystem
     .provideDesignSystem()
-    .register(
-      zeroDesignSystem.baseComponents,
-      zeroGridComponents,
-      g2plotChartsComponents,
-      foundationLayoutComponents,
-    );
+    .register(zeroDesignSystem.baseComponents, g2plotChartsComponents, foundationLayoutComponents);
 }

package/client-tmp/web-components/tsconfig.json

@@ -40,6 +40,9 @@
     "strictNullChecks": false,
     "target": "ES2015"
   },
-  "include": ["src/**/*"],
+  "include": [
+    "globals.d.ts" ,
+    "src/**/*"
+  ],
   "exclude": ["node_modules", "dist"]
 }

package/package.json

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

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

@@ -1,28 +0,0 @@
-import { Routes } from '@angular/router';
-import { AuthGuard } from './guards/auth.guard';
-import { AuthLoginComponent } from './pages/auth-login/auth-login.component';
-import { HomeComponent } from './pages/home/home.component';
-
-export const INTERNAL_URLS = {
-  auth: 'auth',
-  homepage: 'home',
-};
-
-export const AUTH_PATH = INTERNAL_URLS.auth;
-
-export const routes: Routes = [
-  {
-    path: '',
-    redirectTo: `/${INTERNAL_URLS.homepage}`,
-    pathMatch: 'full',
-  },
-  {
-    path: INTERNAL_URLS.homepage,
-    canActivate: [AuthGuard],
-    component: HomeComponent,
-  },
-  {
-    path: INTERNAL_URLS.auth,
-    component: AuthLoginComponent,
-  },
-];

package/client-tmp/angular/src/app/pages/home/home.component.css

@@ -1,3 +0,0 @@
-:host {
-  height: 100%;
-}

package/client-tmp/angular/src/app/pages/home/home.component.html

@@ -1 +0,0 @@
-Home

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

@@ -1,16 +0,0 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {CommonModule} from '@angular/common';
-
-@Component({
-  selector: 'app-protected',
-  standalone: true,
-  imports: [
-    CommonModule,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css'],
-})
-export class HomeComponent {
-
-}