feat(#2802): upgrade the repo with angular 20

Author: vanessatran-ddi

libs/angular-components/package.json

@@ -18,9 +18,9 @@
   },
   "peerDependencies": {
     "@abgov/ui-components-common": "^0.0.0 || ^1.0.0",
-    "@angular/forms": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@angular/core":  "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/core":  "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
   },
   "sideEffects": false
 }

libs/angular-components/src/lib/angular-components.module.ts

@@ -1,9 +1,10 @@
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
 import { ValueDirective, ValueListDirective } from "./value-directive";
 import { CheckedDirective } from "./checked-directive";
 
 @NgModule({
-  declarations: [ValueDirective, ValueListDirective, CheckedDirective],
+  imports: [CommonModule, ValueDirective, ValueListDirective, CheckedDirective],
   exports: [ValueDirective, ValueListDirective, CheckedDirective],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

libs/angular-components/src/lib/angular-components/angular-components.component.ts

@@ -1,10 +1,10 @@
 import { Component } from "@angular/core";
-import { CommonModule } from "@angular/common";
+
 
 @Component({
   selector: "goab-lib-angular-components",
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   templateUrl: "./angular-components.component.html",
   styleUrl: "./angular-components.component.css",
 })

libs/angular-components/src/lib/checked-directive.ts

@@ -12,6 +12,7 @@ import {
 
 // @deprecated: Use the new <goab-checkbox .. /> component
 @Directive({
+  standalone: true,
   selector: "[goaChecked]",
   providers: [
     {

libs/angular-components/src/lib/components/accordion/accordion.spec.ts

@@ -1,10 +1,12 @@
 import { GoabAccordion } from "./accordion";
-import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, fakeAsync, tick } from "@angular/core/testing";
 import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
 import { By } from "@angular/platform-browser";
 import { GoabAccordionHeadingSize, GoabAccordionIconPosition } from "@abgov/ui-components-common";
 
 @Component({
+  standalone: true,
+  imports: [GoabAccordion],
   template: `
     <goab-accordion
     [heading]="heading"
@@ -31,11 +33,10 @@ describe("GoabAccordion", () => {
   let fixture: ComponentFixture<TestAccordionComponent>;
   let component: TestAccordionComponent;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoabAccordion],
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [GoabAccordion, TestAccordionComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [TestAccordionComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestAccordionComponent);
@@ -47,7 +48,9 @@ describe("GoabAccordion", () => {
     component.iconPosition = "right" as GoabAccordionIconPosition;
 
     fixture.detectChanges();
-  });
+    tick();
+    fixture.detectChanges();
+  }));
 
   it("should render and set the props correctly", () => {
     const accordionElement = fixture.debugElement.query(

libs/angular-components/src/lib/components/accordion/accordion.ts

@@ -10,16 +10,19 @@ import {
   Output,
   EventEmitter,
   booleanAttribute,
+  OnInit,
+  ChangeDetectorRef,
 } from "@angular/core";
-import { NgTemplateOutlet } from "@angular/common";
+import { NgTemplateOutlet, CommonModule } from "@angular/common";
 import { GoabBaseComponent } from "../base.component";
 
 @Component({
   standalone: true,
   selector: "goab-accordion",
-  imports: [NgTemplateOutlet],
+  imports: [NgTemplateOutlet, CommonModule],
   template: `
     <goa-accordion
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.secondarytext]="secondaryText"
       [attr.open]="open"
@@ -41,7 +44,7 @@ import { GoabBaseComponent } from "../base.component";
   `,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class GoabAccordion extends GoabBaseComponent {
+export class GoabAccordion extends GoabBaseComponent implements OnInit {
   @Input() heading?: string;
   @Input() secondaryText?: string;
   @Input({ transform: booleanAttribute }) open?: boolean;
@@ -52,6 +55,21 @@ export class GoabAccordion extends GoabBaseComponent {
 
   @Output() onChange = new EventEmitter<boolean>();
 
+  isReady = false;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    super();
+  }
+
+  ngOnInit(): void {
+    // For Angular 20, we need to delay rendering the web component
+    // to ensure all attributes are properly bound before the component initializes
+    setTimeout(() => {
+      this.isReady = true;
+      this.cdr.detectChanges();
+    }, 0);
+  }
+
   _onChange(e: Event) {
     const detail = (e as CustomEvent).detail;
     this.onChange.emit(detail.open as boolean);

libs/angular-components/src/lib/components/badge/badge.spec.ts

@@ -1,10 +1,12 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, fakeAsync, tick } from "@angular/core/testing";
 import { GoabBadge } from "./badge";
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { GoabBadgeType, Spacing } from "@abgov/ui-components-common";
 import { By } from "@angular/platform-browser";
 
 @Component({
+  standalone: true,
+  imports: [GoabBadge],
   template: `
     <goab-badge
       [type]="type"
@@ -35,10 +37,9 @@ describe("GoABBadge", () => {
   let fixture: ComponentFixture<TestBadgeComponent>;
   let component: TestBadgeComponent;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoabBadge],
-      declarations: [TestBadgeComponent],
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [GoabBadge, TestBadgeComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
 
@@ -55,7 +56,9 @@ describe("GoABBadge", () => {
     component.mr = "xl" as Spacing;
 
     fixture.detectChanges();
-  });
+    tick();
+    fixture.detectChanges();
+  }));
 
   it("should render and set the props correctly", () => {
     const badgeElement = fixture.debugElement.query(By.css("goa-badge")).nativeElement;

libs/angular-components/src/lib/components/badge/badge.ts

@@ -4,14 +4,18 @@ import {
   Component,
   Input,
   booleanAttribute,
+  OnInit,
+  ChangeDetectorRef,
 } from "@angular/core";
+import { CommonModule } from "@angular/common";
 import { GoabBaseComponent } from "../base.component";
 
 @Component({
   standalone: true,
   selector: "goab-badge",
   template: `
     <goa-badge
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.icon]="icon"
       [attr.icontype]="iconType"
@@ -26,6 +30,7 @@ import { GoabBaseComponent } from "../base.component";
     </goa-badge>
   `,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [CommonModule],
   styles: [
     `
       :host {
@@ -34,10 +39,25 @@ import { GoabBaseComponent } from "../base.component";
     `,
   ],
 })
-export class GoabBadge extends GoabBaseComponent {
+export class GoabBadge extends GoabBaseComponent implements OnInit {
   @Input() type?: GoabBadgeType;
   @Input() content?: string;
   @Input({ transform: booleanAttribute }) icon?: boolean;
   @Input() iconType?: GoabIconType;
   @Input() ariaLabel?: string;
+
+  isReady = false;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    super();
+  }
+
+  ngOnInit(): void {
+    // For Angular 20, we need to delay rendering the web component
+    // to ensure all attributes are properly bound before the component initializes
+    setTimeout(() => {
+      this.isReady = true;
+      this.cdr.detectChanges();
+    }, 0);
+  }
 }

libs/angular-components/src/lib/components/block/block.spec.ts

@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, fakeAsync, tick } from "@angular/core/testing";
 import { GoabBlock } from "./block";
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import {
@@ -9,6 +9,8 @@ import {
 import { By } from "@angular/platform-browser";
 
 @Component({
+  standalone: true,
+  imports: [GoabBlock],
   template: `
     <goab-block
       [gap]="gap"
@@ -39,11 +41,10 @@ describe("GoABBlock", () => {
   let fixture: ComponentFixture<TestBlockComponent>;
   let component: TestBlockComponent;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoabBlock],
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [GoabBlock, TestBlockComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [TestBlockComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestBlockComponent);
@@ -57,7 +58,9 @@ describe("GoABBlock", () => {
     component.ml = "l" as Spacing;
     component.mr = "xl" as Spacing;
     fixture.detectChanges();
-  });
+    tick();
+    fixture.detectChanges();
+  }));
 
   it("should render", () => {
     const blockElement = fixture.debugElement.query(By.css("goa-block")).nativeElement;

libs/angular-components/src/lib/components/block/block.ts

@@ -3,14 +3,23 @@ import {
   GoabBlockDirection,
   Spacing,
 } from "@abgov/ui-components-common";
-import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from "@angular/core";
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  Input,
+  OnInit,
+  ChangeDetectorRef,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 import { GoabBaseComponent } from "../base.component";
 
 @Component({
   standalone: true,
   selector: "goab-block",
+  imports: [CommonModule],
   template: `
     <goa-block
+      *ngIf="isReady"
       [attr.gap]="gap"
       [attr.direction]="direction"
       [attr.alignment]="alignment"
@@ -25,8 +34,23 @@ import { GoabBaseComponent } from "../base.component";
   `,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class GoabBlock extends GoabBaseComponent {
+export class GoabBlock extends GoabBaseComponent implements OnInit {
   @Input() gap?: Spacing;
   @Input() direction?: GoabBlockDirection;
   @Input() alignment?: GoabBlockAlignment;
+
+  isReady = false;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    super();
+  }
+
+  ngOnInit(): void {
+    // For Angular 20, we need to delay rendering the web component
+    // to ensure all attributes are properly bound before the component initializes
+    setTimeout(() => {
+      this.isReady = true;
+      this.cdr.detectChanges();
+    }, 0);
+  }
 }