Release 20.1.0

Changelog

[20.1.0] - Barrel Modules for Better DX

🎯 Developer Experience Improvements

Introduced Angular Material-style barrel modules to drastically improve import ergonomics while maintaining full standalone component compatibility.

✨ New Features

Barrel Modules - One Import, All Components

Stop importing 10+ components individually! Use barrel modules instead:

// ❌ Before (Tedious!)
import { 
  FsNavFrameComponent,
  FsNavFrameSidebar,
  FsNavFrameSidebarItemComponent,
  FsNavUserProfileComponent,
  FsNavUserProfileActionsDirective,
  FsNavFrameToolbarComponent,
  FsNavFrameToolbarStartDirective,
  FsNavFrameToolbarCenterDirective,
  FsNavFrameToolbarEndDirective,
  FsNavFrameContentDirective,
  FsNavUserProfileNameDirective,
  FsNavUserProfileAvatarDirective,
} from '@fullstack-devops/ngx-mat-components';

// ✅ After (Clean!)
import { 
  FsNavFrameModule,
  FsCalendarModule,
  FsThemeMenuModule,
} from '@fullstack-devops/ngx-mat-components';

@Component({
  imports: [
    ...FsNavFrameModule,  // All nav-frame components
    ...FsCalendarModule,   // All calendar components
    ...FsThemeMenuModule,  // All theme menu components
  ]
})

Available Barrel Modules

• FsNavFrameModule - Complete navigation frame system (12 components/directives)
• FsCalendarModule - Full calendar functionality (3 components/directives)
• FsThemeMenuModule - Theme switcher components (3 components)

📦 What's Included

FsNavFrameModule contains:

• FsNavFrameComponent
• FsNavFrameSidebar
• FsNavFrameSidebarItemComponent
• FsNavUserProfileComponent
• FsNavFrameToolbarComponent
• All toolbar directives (Start, Center, End)
• All user profile directives (Name, Avatar, Actions)
• Content directive

FsCalendarModule contains:

• FsCalendarPanelsComponent
• FsCalendarTableComponent
• FsCalendarTableNameDirective

FsThemeMenuModule contains:

• FsThemeMenu
• FsThemeIcon
• FsCheckSvg

🔄 Migration Guide

Option 1: Use Barrel Modules (Recommended)

// Just spread the module into your imports
imports: [...FsNavFrameModule, MatButtonModule]

Option 2: Individual Imports (Still Supported)

// Import only what you need
import { FsNavFrameComponent } from '@fullstack-devops/ngx-mat-components';

🎨 Pattern

Following Angular Material's proven pattern:

export const FsNavFrameModule = [
  Component1,
  Component2,
  // ...
] as const;

This provides:

• ✅ Better DX (1 import vs 10+)
• ✅ Type safety with as const
• ✅ Tree-shakable (only used components bundled)
• ✅ Backward compatible (individual imports still work)
• ✅ Follows Angular Material conventions

📝 Notes

• No NgModules involved - These are just typed arrays of standalone components
• Full tree-shaking - Unused components are still eliminated by bundlers
• TypeScript 5.9 compatible - Proper type inference with readonly tuples
• Individual exports remain - Use barrel modules OR individual imports