@genesislcap/blank-app-seed 3.27.2 → 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.2",
+  "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/.genx/versions.json

@@ -1,5 +1,5 @@
 {
-  "UI": "14.198.0",
-  "GSF": "8.1.4",
+  "UI": "14.199.0",
+  "GSF": "8.1.5",
   "Auth": "8.1.1"
 }

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,19 @@
 # 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)
+
+
+### Bug Fixes
+
+* automated dependency version update [skip-ci] [PSD-9](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/9) (#295) a4bf7fa
+
 ## [3.27.2](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.27.1...v3.27.2) (2024-07-26)
 
 

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) => {