Support for Angular 20

[ArakTaiRoth]

Info

Angular v20 was released on May 29th. We should be testing with this, introducing support, and adding it to our list of accepted versions.

Acceptance Criteria:

1. Test with Angular v20 (and v16 and v17 - to figure out if we should remove support or not)
2. Add support where necessary (assuming it doesn't break previous versions)
3. Add it to the package.json as a supported version

More Info

There have been problems found with both Dropdown and Text Area at least, outside of this team.

Below are tasks:

• Upgrade ui-components and its dependencies for angular 20
• Upgrade angular playground template to be compatible with angular 20
• Test angular 20 for all components (Doing now)

Below are issues from Angular 20 that we need to fix and test again:

• Run npm install with our components will have this dependency issue. Expected after this story we shouldn't have this error when install

Dropdown:

• Dropdown doesn't render label and value

• Dropdown filterable doesn't work if dropdown options fetched from backend

• Dropdown example https://design.alberta.ca/components/v4.0.0+-angular/dropdown#tab-1#dynamically-change-items-in-a-dropdown doesn't work anymore:

dropdown-that-depends-on-parents-not-selectable.mov

Circular Progress:

• Full screen isn't displayed correctly

angular-20-fullscreen-progress.mov

Public form:

• A delay between angular text input with public form state that makes values always empty/undefined

• Radio doesn't work with public form

• Add one child (sub form) but table displays 2 chidren, first one empty value

• Checkbox doesn't work with public form

• Date picker doesn't work with public form

• Dropdown doesn't work with public form

• Textarea doesn't work with public form

Drawer:

• Losing the focus when opening the drawer the first time (I tested on my local chrome browser + Browser stack latest safari)

Tooltip:

• Tooltip is truncated

Input:

• Reset input can clear the form but the value is still visually displayed: (for template-driven and reactive form)
  Create a separate issue as I can see it happens with angular 18: Bug: Angular input: cannot reset the value #2983

Pagination

• After select a page (empty value on the dropdown which is a bug described above), the browser is frozen

[vanessatran-ddi]

Note: For this bug on angular 20:

• Dropdown example https://design.alberta.ca/components/v4.0.0+-angular/dropdown#tab-1#dynamically-change-items-in-a-dropdown doesn't work anymore:

dropdown-that-depends-on-parents-not-selectable.mov

-> If I update the code snippet to new angular syntax , it works:

<div [formGroup]="changeForm">
  <goab-form-item label="Size" requirement="optional" helpText="Choose the type to change the list below">
    <goab-dropdown formControlName="parentDropdown"
                   placeholder="Select a value" name="parent">
      @for (parent of parents; track generateUniqueKey($index, parent)) {
        <goab-dropdown-item [value]="parent" [label]="parent" />
      }
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Items" requirement="optional">
    <goab-dropdown formControlName="childDropdown"
                   placeholder="Select a value" name="children">
      @if (children.length > 0) {
        @for (child of children; track generateUniqueKey($index, child)) {
          <goab-dropdown-item
            [value]="child"
            [label]="child"
            [mountType]="'reset'"
          />
        }
      }
    </goab-dropdown>
  </goab-form-item>
</div>

The current syntax documented on our website will not work:

*ngFor and trackBy is using for angular 16, and is deprecated since angular 17, to angular 20, it doesn't work anymore. Since we agree in a meeting that we will not support angular 16, I will also remove 16 from thepeerDependencies and update our design system website in the scope of this ticket.

cc @chrisolsen and @ArakTaiRoth and @Spark450