[Bug report]: tds-step added after initial render of tds-stepper not rendered correctly

[adarean5]

Requirements before reporting

• [X] No duplicated issue reported.
• [X] I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• [X] I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.8.0

Browser

Chrome

Framework

Angular

Version

Angular 17

Reproduction steps

1. Create a tds-stepper with a few tds-step child elements
2. After the initial render add more tds-step child elements

Code example

<tds-stepper>
  <tds-step [index]="1">
    <span slot="label">I appear instantly</span>
  </tds-step>
  @defer (on timer(200ms)) {
    <tds-step [index]="2">
      <span slot="label">I appear later</span>
    </tds-step>
  }
</tds-stepper>

Screenshots

Expected result (when both items are rendered on the initial render):

Actual result (when the second item is rendered after the initial render):

Expected behaviour

I expect the lines between the steps to be rendered correctly no matter if new steps are added after the initial render.

Console errors

No console errors.

Contact information

jernej.strazisar@scania.com

[adarean5]

I looked into the source code of the stepper and it looks like the classes for the first and last child are added on the componentWillLoad lifecycle hook:

componentWillLoad() {
  this.host.children[0].classList.add('first');
  this.host.children[this.host.children.length - 1].classList.add('last');
  if (this.orientation === 'vertical') {
    this.labelPosition = 'aside';
  }
}

A better, more dynamic, solution would be to use CSS pseudo-selectors such as :first-of-type, :last-of-type, :fist-child, :last-child in the tds-step component to determine if the tds-step is first or last.

Altenratively, the slotchange listener could be used, but the issue should be solved with CSS if possible.