fix(stepper): action label not updated

[adisreyaj]

😞 Issue

Stepper tab can have custom label for the main action button:

<ht-stepper>
      <ht-stepper-tab label="My Tab" actionButtonLabel="Cool Button">
     	<div> CONTENT </div>
      </ht-stepper-tab>
</ht-stepper>

But if we try to update the actionButtonLabel at a later point based on some condition:

<ht-stepper>
      <ht-stepper-tab label="My Tab" [actionButtonLabel]="condition ? 'Cool Button' : 'Cancel'">
     	<div> CONTENT </div>
      </ht-stepper-tab>
</ht-stepper>

The change is not getting reflected in the stepper because of the current implementation of the logic which gets the label for the button:

<ht-button [label]="this.getActionButtonLabel | htMemoize : stepper.selectedIndex : steps"></ht-button>

Since we use htMemoize the steps value doesn't change.

⚒️ Fix

Stepper Tab component exposes a refresh$ observable which emits when any input changes. The new logic for getting label for action button is:

// Know when input changed
const stepsInputChange$ = this.steps$.pipe(
  switchMap(steps => merge(...steps.map(tab => tab.refresh$))),
  startWith(undefined)
);

// Stepper index change
const stepperSelectionChange$ = this.selectionChange.asObservable().pipe(
  map(event => event.selectedIndex),
  startWith(0)
);

this.actionButtonLabel$ = combineLatest([stepperSelectionChange$, this.steps$, stepsInputChange$]).pipe(
  map(([selectedIndex, steps]) => this.getActionButtonLabel(selectedIndex, steps))
);

[github-actions[bot]]

Unit Test Results

       4 files  ±0     304 suites  ±0   24m 11s :stopwatch: + 1m 34s 1 090 tests ±0  1 090 :heavy_check_mark: ±0  0 :zzz: ±0  0 :x: ±0  1 098 runs  ±0  1 098 :heavy_check_mark: ±0  0 :zzz: ±0  0 :x: ±0 

Results for commit 6b620f45. ± Comparison against base commit 7313bbe6.