@falcon/layout

The real Falcon host-shell sidebar + topbar, lifted verbatim, packaged as an Angular library (ng-packagr, partial compilation), plus one new thin wrapper component <falcon-layout>.

• FalconLayoutComponent (<falcon-layout>) — the ONE new component: the host-shell layout wrapper markup with passthrough bindings and <ng-content> as the content well.
• SidebarComponent (<app-sidebar>) — verbatim host-shell sidebar (real NavItem mode + mock preview fallback, router watchdog included).
• TopbarComponent (<app-topbar>) — verbatim host-shell topbar (breadcrumb, user menu, language toggle, mood toggle, theme toggle).
• FalconIconComponent / AppIconComponent + FALCON_ICONS — PNG mask icon chain (expects /assets/falcon-icon/*.png).
• TranslatePipe / TranslateService — verbatim Falcon i18n (fetches /assets/i18n/{lang}.json over HttpClient).
• ThemeService, HostThemeFacade, HostLanguageFacade, FALCON_THEME / FALCON_LANGUAGE tokens (root-factory defaults).
• AuthService / UserApiService — abstract declarations only; the topbar injects them { optional: true }. Provide your own to light up the profile fetch + logout.
• Models: NavItem, AccessQuery, AppRouteScope, UserTypeString, …

Requirements

Angular >= 21 < 22 with Router and HttpClient provided (provideRouter(...), provideHttpClient()). No Tailwind needed — the compiled styles/falcon-layout.css ships the utilities the components use.

Wiring (angular.json / project.json)

Styles — order matters, tokens first:

"styles": [
  "node_modules/@falcon/tokens/styles/falcon-tokens.css",
  "node_modules/@falcon/tokens/styles/falcon-icons.css",
  "node_modules/@falcon/layout/styles/falcon-layout.css",
  "src/styles.css"
]

Assets — icons, i18n, fonts:

"assets": [
  { "glob": "**/*", "input": "node_modules/@falcon/layout/assets/falcon-icon", "output": "assets/falcon-icon" },
  { "glob": "**/*", "input": "node_modules/@falcon/layout/assets/i18n",        "output": "assets/i18n" },
  { "glob": "**/*", "input": "node_modules/@falcon/tokens/assets/fonts",       "output": "assets/fonts" }
]

index.html — self-hosted fonts (same lines the Falcon host-shell uses):

<link rel="preload" as="font" type="font/woff2" crossorigin
      href="assets/fonts/google/poppins-400-latin.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="assets/fonts/google/poppins-600-latin.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="assets/fonts/google/poppins-700-latin.woff2">
<link rel="stylesheet" href="assets/fonts/google/fonts.css">

Usage

import { FalconLayoutComponent, NavItem } from '@falcon/layout';

@Component({
  imports: [FalconLayoutComponent, RouterOutlet],
  template: `
    <falcon-layout [navItems]="nav" [(collapsed)]="collapsed"
                   userName="Jane Doe" jobTitle="Administrator">
      <router-outlet></router-outlet>
    </falcon-layout>
  `,
})
export class AppComponent {
  collapsed = false;
  nav: NavItem[] = [
    { label: 'Dashboard', path: '/dashboard', iconClass: 'dashboard', section: 'Main', safePath: '/dashboard' },
  ];
}

Notes:

• NavItem.safePath must be set for an item to be clickable (in the host-shell a PES access service computes it; here you set it yourself).
• Route data: { breadcrumb: '...' } drives the topbar title/breadcrumb.
• Theme persists in localStorage falcon-theme; language in lang.
• Optional: mirror the host-shell's index.html FOUC snippet (sets app-dark/data-theme before bootstrap) for flicker-free dark boots.