feat(calcite-stepper): allow calcite-stepper to receive slotted items from wrapper component

[kstinson14]

Related Issue: #

Summary

In Field Maps, we use the calcite-stepper in several places, many times with accompanying forward/backward buttons. So we've bundled them together in a wrapper web-component with a slot allowing each usage to pass in its desired calcite-stepper-items. So it looks something like this:

<wrapper-component>
  <calcite-stepper numbered layout="horizontal">
    <slot/>
  </calcite-stepper>
  ...[code for buttons, etc.]
</wrapper-component>

However, this usage passes the calcite-stepper-items within the calcite-stepper's slot, but does not pass its props to them (numbered, layout, etc.) causing them to render incorrectly. I believe this is because the function that performs this task, updateItems finds the items through this.el.querySelector. This doesn't work in the wrapping component scenario due to them being wrapped in a slot. I have a branch here that repros the problem on the local demo site with a dummy stepper-wrapper component.

I've fixed this by keeping track of the slot element after the slot change event and using its assigned calcite-stepper-items in updateItems instead. I also call updateItems in the slot change event. This seems to work for wrapped / unwrapped steppers.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.