Eric/bug#3497 with Netlify fix

apps/prs/angular/src/app/app.component.html

@@ -83,6 +83,7 @@
           <a href="/bugs/3279">3279</a>
           <a href="/bugs/3384">3384 Table v2 sample</a>
           <a href="/bugs/3450">3450 Dropdown expanding inside Container</a>
+          <a href="/bugs/3497">3497 Calendar year empty</a>
         </goab-side-menu-group>
         <goab-side-menu-group heading="Features">
           <a href="/features/1328">1328</a>

apps/prs/angular/src/app/app.routes.ts

@@ -46,6 +46,7 @@ import { Bug3337Component } from "../routes/bugs/3337/bug3337.component";
 import { Bug3279Component } from "../routes/bugs/3279/bug3279.component";
 import { Bug3384Component } from "../routes/bugs/3384/bug3384.component";
 import { Bug3450Component } from "../routes/bugs/3450/bug3450.component";
+import { Bug3497Component } from "../routes/bugs/3497/bug3497.component";
 
 import { Feat1328Component } from "../routes/features/feat1328/feat1328.component";
 import { Feat1383Component } from "../routes/features/feat1383/feat1383.component";
@@ -128,6 +129,7 @@ export const appRoutes: Route[] = [
   { path: "bugs/3279", component: Bug3279Component },
   { path: "bugs/3384", component: Bug3384Component },
   { path: "bugs/3450", component: Bug3450Component },
+  { path: "bugs/3497", component: Bug3497Component },
 
   // Feature routes
   { path: "features/1328", component: Feat1328Component },

apps/prs/angular/src/routes/bugs/3497/bug3497.component.html

@@ -0,0 +1,11 @@
+<h1>Bug 3497 Calendar Years Empty</h1>
+<p>
+  When [min] or [max] is set to today then the year dropdown is empty and doesn't show
+  anything.
+</p>
+<h2>min test</h2>
+<goab-calendar name="minTest" [min]="today"></goab-calendar>
+<h2>max test</h2>
+<goab-calendar name="maxTest" [max]="today"></goab-calendar>
+<h2>ordinary</h2>
+<goab-calendar name="ordinaryTest" [value]="today"></goab-calendar>

apps/prs/angular/src/routes/bugs/3497/bug3497.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { GoabCalendar } from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-bug3497",
+  templateUrl: "./bug3497.component.html",
+  imports: [CommonModule, GoabCalendar],
+})
+export class Bug3497Component implements OnInit {
+  today = new Date();
+
+  ngOnInit() {
+    console.log("today", this.today);
+  }
+}

apps/prs/react/src/app/app.tsx

@@ -98,6 +98,7 @@ export function App() {
               <Link to="/bugs/3279">3279 Work Side Menu Key Nav</Link>
               <Link to="/bugs/3384">3384 v2 Table Border</Link>
               <Link to="/bugs/3450">3450 Dropdown expanding inside Container</Link>
+              <Link to="/bugs/3497">3497 Calendar Years Empty</Link>
             </GoabSideMenuGroup>
             <GoabSideMenuGroup heading="Features">
               <Link to="/features/1383">1383 Button Filled Icons</Link>

apps/prs/react/src/main.tsx

@@ -48,6 +48,7 @@ import { Bug3281Route } from "./routes/bugs/bug3281";
 import { Bug3337Route } from "./routes/bugs/bug3337";
 import { Bug3384Route } from "./routes/bugs/bug3384";
 import { Bug3450Route } from "./routes/bugs/bug3450";
+import { Bug3497Route } from "./routes/bugs/bug3497";
 
 import { EverythingRoute } from "./routes/everything";
 import { EverythingBRoute } from "./routes/everything-b";
@@ -138,6 +139,7 @@ root.render(
           <Route path="bugs/3337" element={<Bug3337Route />} />
           <Route path="bugs/3384" element={<Bug3384Route />} />
           <Route path="bugs/3450" element={<Bug3450Route />} />
+          <Route path="bugs/3497" element={<Bug3497Route />} />
 
           <Route path="features/1383" element={<Feat1383Route />} />
           <Route path="features/1547" element={<Feat1547Route />} />
@@ -171,8 +173,14 @@ root.render(
           <Route path="features/3306" element={<Feat3306Route />} />
           <Route path="features/3370" element={<Feat3370Route />} />
           <Route path="features/3396" element={<Feat3396Route />} />
-          <Route path="features/3407-skip-on-focus-tab" element={<Feat3407SkipOnFocusTabRoute />} />
-          <Route path="features/3407-stack-on-mobile" element={<Feat3407StackOnMobileRoute />} />
+          <Route
+            path="features/3407-skip-on-focus-tab"
+            element={<Feat3407SkipOnFocusTabRoute />}
+          />
+          <Route
+            path="features/3407-stack-on-mobile"
+            element={<Feat3407StackOnMobileRoute />}
+          />
           <Route path="features/v2-checkbox" element={<FeatV2CheckboxRoute />} />
           <Route path="features/3398" element={<Feat3398Route />} />
         </Route>

apps/prs/react/src/routes/bugs/bug3497.tsx

@@ -0,0 +1,29 @@
+import { GoabBlock, GoabCalendar, GoabText } from "@abgov/react-components";
+
+export function Bug3497Route() {
+  const today = new Date();
+
+  const noop = () => {
+    return null;
+  };
+
+  return (
+    <GoabBlock direction="column" gap="l">
+      <GoabText tag="h1">Bug 3497 Calendar Years Empty</GoabText>
+
+      <GoabText tag="p">
+        When min or max is set to today then the year dropdown is empty and doesn't show
+        anything.
+      </GoabText>
+
+      <GoabText tag="h2">min test</GoabText>
+      <GoabCalendar name="minTest" min={today.toISOString()} onChange={noop} />
+
+      <GoabText tag="h2">max test</GoabText>
+      <GoabCalendar name="maxTest" max={today.toISOString()} onChange={noop} />
+
+      <GoabText tag="h2">ordinary</GoabText>
+      <GoabCalendar name="ordinaryTest" value={today.toISOString()} onChange={noop} />
+    </GoabBlock>
+  );
+}

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

@@ -68,8 +68,8 @@ describe("GoABCalendar", () => {
   it("should render properties", () => {
     const calendar = fixture.nativeElement.querySelector("goa-calendar");
     expect(calendar.getAttribute("name")).toBe(component.name);
-    expect(calendar.getAttribute("min")).toBe(component.min?.toString());
-    expect(calendar.getAttribute("max")).toBe(component.max?.toString());
+    expect(calendar.getAttribute("min")).toBe(component.min?.toISOString());
+    expect(calendar.getAttribute("max")).toBe(component.max?.toISOString());
     expect(calendar.getAttribute("testid")).toBe(component.testId);
     expect(calendar.getAttribute("mt")).toBe(component.mt);
     expect(calendar.getAttribute("mb")).toBe(component.mb);

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

@@ -20,8 +20,8 @@ import { GoabBaseComponent } from "../base.component";
       <goa-calendar
         [attr.name]="name"
         [value]="value"
-        [attr.min]="min"
-        [attr.max]="max"
+        [attr.min]="min?.toISOString()"
+        [attr.max]="max?.toISOString()"
         [attr.testid]="testId"
         [attr.mt]="mt"
         [attr.mb]="mb"
@@ -55,6 +55,11 @@ export class GoabCalendar extends GoabBaseComponent implements OnInit {
     setTimeout(() => {
       this.isReady = true;
       this.cdr.detectChanges();
+      console.log("GoabCalendar initialized with:", this.name, {
+        value: this.value,
+        min: this.min,
+        max: this.max,
+      });
     }, 0);
   }
 

libs/web-components/src/components/calendar/Calendar.svelte

@@ -82,6 +82,12 @@
   $: {
     _min = min ? new CalendarDate(min) : new CalendarDate().addYears(-5);
     _max = max ? new CalendarDate(max) : new CalendarDate().addYears(+5);
+    if (!_min.isValid()) {
+      console.warn(`Invalid min date: ${min}.`);
+    }
+    if (!_max.isValid()) {
+      console.warn(`Invalid max date: ${max}.`);
+    }
 
     // Update years list based on new min/max
     const yearStart = _min.year;

netlify.toml

@@ -3,5 +3,5 @@
   command = "npm ci && cd docs && npm ci && cd .. && npm run build:prod"
 
 [build.environment]
-  NODE_VERSION = "24"
+  NODE_VERSION = "22"
   NPM_FLAGS = "--legacy-peer-deps"