fix(#2033): step -1 doesn't show first page initially

[vanessatran-ddi]

Before (the change)

• First-page content isn't displayed.
• When we click/or first loaded page, the _change is triggered twice.

https://github.com/user-attachments/assets/017336d2-84e9-4d0b-b886-36aca1027db1

After (the change)

https://github.com/user-attachments/assets/d6f1b999-d6c8-493c-b32f-034a8ff2cd71

• [x] First page is displayed, step is set as 1
• [x] Clicking a form step, it dispatches _change once only

Make sure that you've checked the boxes below before you submit the PR

• [x] I have read and followed the setup steps
• [x] I have created necessary unit tests
• [x] I have tested the functionality in both React and Angular.

Steps needed to test

In Angular:

<h1>Form Stepper</h1>

<span>Current step {{step}}</span>

<goa-form-stepper ml="s" mr="s" [step]="step" (_change)="updateStep($event)">
  <goa-form-step text="Personal details" [status]="status[0]"></goa-form-step>
  <goa-form-step text="Employment history" [status]="status[1]"></goa-form-step>
  <goa-form-step text="References" [status]="status[2]"></goa-form-step>
  <goa-form-step text="Review" [status]="status[3]"></goa-form-step>
</goa-form-stepper>
<goa-pages [current]="step">
  <div>Page 1 content with status: {{status[0]}}</div>
  <div>Page 2 content with status: {{status[1]}}</div>
  <div>
    Page 3 content with current status: {{status[2]}}
  </div>
  <div>
    Page 4 content with current status: {{status[3]}}
  </div>
</goa-pages>
<div style="display: flex; justify-content: space-between">
  <goa-button (_click)="setPage(step - 1)" type="secondary"
  >Previous</goa-button
  >
  <goa-button (_click)="setPage(step + 1)" type="primary">Next</goa-button>
</div>

import { Component } from "@angular/core";

@Component({
  selector: "abgov-form-stepper",
  templateUrl: "./form-stepper.component.html",
})
export class FormStepperComponent {
  step = -1;
  // controlled by the user based on form completion
  status = ["incomplete", "incomplete", "incomplete", "incomplete"];
  updateStep(event: Event) {
    console.log("updateStep is called under angular app", event);
    this.step = (event as CustomEvent).detail.step;
  }
  setPage(page: number) {
    console.log("setPage is called ", page);
    if (page < 1 || page > 4) return;
    this.step = page;
  }
}