phase 2 complete

Author: eksrha

ANGULAR20_MIGRATION.md

@@ -21,7 +21,18 @@
 
 ## 📦 Current Component Inventory
 
-### **Main Components**
+### **## 📅 Timeline
+
+| Phase | Duration | Status |
+|-------|----------|--------|
+| **Phase 1: Framework Upgrade** | 2 days | ✅ **DONE** (Oct 18, 2025) |
+| **Phase 2: Remove NgModules** | 3 days | ✅ **DONE** (Oct 18, 2025) |
+| **Phase 3: Signal-Based** | 5 days | 🔨 In Progress |
+| **Phase 4: Control Flow** | 2 days | 🔜 Pending |
+| **Phase 5: OnPush** | 1 day | 🔜 Pending |
+| **Phase 6: 2-Level Nav** | 3 days | 🔜 Pending |
+| **Phase 7: Testing** | 4 days | 🔜 Later |
+| **Total** | **~3 weeks** | 🔨 In Progress |nts**
 
 | Component | Location | Status | Priority |
 |-----------|----------|--------|----------|
@@ -625,22 +636,22 @@ yarn test:visual:approve
 ## 📊 Migration Checklist
 
 ### **Phase 1: Framework Upgrade**
-- [ ] Update package.json to Angular 20
-- [ ] Run `ng update` commands
-- [ ] Fix breaking changes
-- [ ] Verify build success
-- [ ] Run tests
+- [x] Update package.json to Angular 20 ✅
+- [x] Run `ng update` commands ✅
+- [x] Fix breaking changes ✅ (none needed!)
+- [x] Verify build success ✅
+- [ ] Run tests (skipped - no tests yet)
 
 ### **Phase 2: Remove NgModules**
-- [ ] Convert FsNavFrameComponent to standalone
-- [ ] Convert FsNavFrameToolbarComponent to standalone
-- [ ] Convert FsNavFrameSidebarComponent to standalone
-- [ ] Convert FsNavUserProfileComponent to standalone
-- [ ] Convert FsThemeMenuComponent to standalone
-- [ ] Convert FsCalendarComponent to standalone
-- [ ] Convert all directives to standalone
-- [ ] Delete NgModule files
-- [ ] Update public-api.ts
+- [x] Convert FsNavFrameComponent to standalone ✅
+- [x] Convert FsNavFrameToolbarComponent to standalone ✅
+- [x] Convert FsNavFrameSidebarComponent to standalone ✅
+- [x] Convert FsNavUserProfileComponent to standalone ✅
+- [x] Convert FsThemeMenuComponent to standalone ✅ (was already standalone)
+- [x] Convert FsCalendarComponent to standalone ✅
+- [x] Convert all directives to standalone ✅
+- [x] Delete NgModule files ✅
+- [x] Update public-api.ts ✅
 
 ### **Phase 3: Signal-Based Components**
 - [ ] Convert @Input() to input() in FsNavFrameComponent
@@ -764,14 +775,14 @@ effect(() => {
 
 | Phase | Duration | Status |
 |-------|----------|--------|
-| **Phase 1: Framework Upgrade** | 2 days | 🔜 Pending |
-| **Phase 2: Remove NgModules** | 3 days | 🔜 Pending |
+| **Phase 1: Framework Upgrade** | 2 days | ✅ **DONE** (Oct 18, 2025) |
+| **Phase 2: Remove NgModules** | 3 days | � In Progress |
 | **Phase 3: Signal-Based** | 5 days | 🔜 Pending |
 | **Phase 4: Control Flow** | 2 days | 🔜 Pending |
 | **Phase 5: OnPush** | 1 day | 🔜 Pending |
 | **Phase 6: 2-Level Nav** | 3 days | 🔜 Pending |
-| **Phase 7: Testing** | 4 days | 🔜 Pending |
-| **Total** | **~3 weeks** | 🔜 Pending |
+| **Phase 7: Testing** | 4 days | 🔜 Later |
+| **Total** | **~3 weeks** | � In Progress |
 
 ---
 

projects/ngx-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import * as dateFns from 'date-fns';
 import { CalendarEvent, CalendarExtendedDay, CalendarPanels, CalendarPanelSum } from '../calendar.models';
 import { FsCalendarService } from '../services/fs-calendar.service';
@@ -7,11 +8,11 @@ import { FsCalendarService } from '../services/fs-calendar.service';
   selector: 'fs-calendar-panels',
   templateUrl: './calendar-panels.component.html',
   styleUrls: ['./calendar-panels.component.scss'],
+  imports: [CommonModule],
   host: {
     class: 'fs-calendar-panels',
     'data-component-id': 'fs-calendar-panels-unique',
   },
-  standalone: false,
 })
 export class FsCalendarPanelsComponent implements OnInit {
   private _dataSource: CalendarPanels<any> = {

projects/ngx-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts

@@ -11,7 +11,6 @@ import { FsCalendarService } from '../services/fs-calendar.service';
     class: 'fs-calendar-table mat-mdc-card mdc-card mat-mdc-card-outlined mdc-card--outlined',
     'data-component-id': 'fs-calendar-table-unique',
   },
-  standalone: false,
 })
 export class FsCalendarTableComponent implements OnInit {
   isLoading: boolean = true;

projects/ngx-mat-components/src/fs-calendar/directives/fs-calendar-table-name.directive.ts

@@ -3,7 +3,6 @@ import { Directive } from '@angular/core';
 @Directive({
   selector: 'fs-calendar-table-name", [fsCalendarTableName"]',
   host: { class: 'fs-calendar-table-name"' },
-  standalone: false,
 })
 export class FsCalendarTableNameDirective {
   constructor() {}

projects/ngx-mat-components/src/fs-calendar/public-api.ts

@@ -6,5 +6,5 @@ export { FsCalendarPanelsComponent } from './calendar-panels/calendar-panels.com
 export { FsCalendarTableComponent } from './calendar-table/fs-calendar-table.component';
 export * from './calendar.models';
 export { FsCalendarTableNameDirective } from './directives/fs-calendar-table-name.directive';
-export { FsCalendarModule } from './fs-calendar.module';
+// Removed: export { FsCalendarModule } - Using standalone components now
 export { FsCalendarService } from './services/fs-calendar.service';

projects/ngx-mat-components/src/fs-nav-frame/components/fs-nav-frame-sidebar-item/fs-nav-frame-sidebar-item.component.ts

@@ -1,18 +1,19 @@
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 import { FsNavFrameService, MenuState } from '../../services/fs-nav-frame.service';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'fs-nav-frame-sidebar-item',
   templateUrl: './fs-nav-frame-sidebar-item.component.html',
   styleUrls: ['./fs-nav-frame-sidebar-item.component.scss'],
+  imports: [RouterLink, RouterLinkActive],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'fs-nav-frame-sidebar-item',
     'data-component-id': 'fs-nav-frame-sidebar-item-unique',
   },
-  standalone: false,
 })
 export class FsNavFrameSidebarItemComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();

projects/ngx-mat-components/src/fs-nav-frame/directives/fs-nav-frame-content.directive.ts

@@ -3,7 +3,6 @@ import { Directive } from '@angular/core';
 @Directive({
   selector: 'fs-nav-frame-content, [fsNavFrameContent]',
   host: { class: 'fs-nav-frame-content' },
-  standalone: false,
 })
 export class FsNavFrameContentDirective {
   constructor() {}

projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts

@@ -1,4 +1,4 @@
-import { Component, ContentChild, ElementRef, HostBinding, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { NavFrameConfig, NavFrameSizing } from './fs-nav-frame.modules';
 import { FsNavFrameService, MenuState } from './services/fs-nav-frame.service';
@@ -12,7 +12,7 @@ import { Subject, takeUntil } from 'rxjs';
     class: 'fs-nav-frame',
     'data-component-id': 'fs-nav-frame-unique',
   },
-  standalone: false,
+  // standalone: true is default in Angular 20+
 })
 export class FsNavFrameComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();

projects/ngx-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive.ts

@@ -3,7 +3,6 @@ import { Directive } from '@angular/core';
 @Directive({
   selector: 'fs-nav-user-profile-actions, [fsNavUserProfileActions]',
   host: { class: 'fs-nav-user-profile-actions' },
-  standalone: false,
 })
 export class FsNavUserProfileActionsDirective {
   constructor() {}

projects/ngx-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-name.directive.ts

@@ -3,7 +3,6 @@ import { Directive } from '@angular/core';
 @Directive({
   selector: 'fs-nav-user-profile-name, [fsNavUserProfileName]',
   host: { class: 'fs-nav-user-profile-name' },
-  standalone: false,
 })
 export class FsNavUserProfileNameDirective {
   constructor() {}