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

Release 20.0.0

Changelog

[20.0.0] - Angular 20 Migration

🚀 Major Release - Angular 20 Support

Complete migration to Angular 20 with modern patterns: standalone components, signals-based reactivity, and new control flow syntax.

⚠️ BREAKING CHANGES

1. Standalone Components - No More Modules

Remove module imports, import components directly:

// ❌ Old
import { FsNavFrameModule } from '@fullstack-devops/ngx-mat-components';

// ✅ New
import { 
  FsNavFrameComponent,
  FsNavFrameSidebarItemComponent,
  FsCalendarPanelsComponent 
} from '@fullstack-devops/ngx-mat-components';

2. Signals API - Use () to Read Values

Signal properties require () in templates:

// ❌ Old
<div>{{ month }}</div>

// ✅ New  
<div>{{ month() }}</div>

3. Sidebar Items Need label Property

Required for accessibility:

<!-- ❌ Old -->
<fs-nav-frame-sidebar-item routerLink="/home">
  <span>Home</span>
</fs-nav-frame-sidebar-item>

<!-- ✅ New -->
<fs-nav-frame-sidebar-item routerLink="/home" label="Home">
  <span>Home</span>
</fs-nav-frame-sidebar-item>

4. Content Projection with @if/@for

Use ng-container for directive selectors:

<!-- ❌ Old -->
<fs-nav-user-profile-name *ngIf="user">{{ user.name }}</fs-nav-user-profile-name>

<!-- ✅ New -->
@if (user) {
  <ng-container fs-nav-user-profile-name>{{ user.name }}</ng-container>
}

✨ What's New

• Angular 20.3.6 with full TypeScript 5.9 support
• OnPush change detection for all components
• Signal-based reactivity throughout
• Modern control flow (@if, @for, @switch)
• Comprehensive accessibility with ARIA labels
• Updated dependencies: Angular Material 20.2.9, lucide-angular 0.546.0

🐛 Fixes

• Fixed FsNavFrameService provider injection (NG0201)
• Fixed duplicate keys in @for loops (NG0955)
• Material button styling now works correctly
• Content projection compatibility with new control flow

📦 Migration Steps

1. Update Angular:

   ng update @angular/core@20 @angular/cli@20

2. Update this library:

   npm install @fullstack-devops/ngx-mat-components@latest

3. Update your code:

   • Replace module imports with component imports
   • Add () to signal properties in templates
   • Add label to sidebar items
   • Wrap projected content in ng-container when using @if

🔒 Security

• ✅ 998 packages audited
• ✅ Only 1 low severity issue (acceptable)
• ✅ No critical vulnerabilities

---

Need help? Open an issue or discussion on GitHub.

Release 19.1.1

patch: handling theme selection persistent + docs (#97)

Release 19.1.0

feat: add theme switch module + docs (#96)

Release 19.0.2

fix: edit workflows (#95)

Release 19.0.1

Fix/workspace imports (#94)

Release 19.0.0

Major/upgrade to ng 19 (#93)

breaking changes: Material Theme from 2 o 3!

Release 18.0.0

core: update to Angular 18 (#92)

Release 17.0.0

Upgrade to ng 17 (#91)

Release 16.1.1

possible to use plain button in profile (#73)