Stepper customization

[joeveiga]

Summary

• Feature(Stepper): Add [large] input to increase the default icon size.
• Feature(Stepper): Add [trackBar] input to make track bar optional.
• Feature(Stepper): Add [progress] input to show a progress indicator on the active step.
• Feature(Stepper): Add [removeHighlight] input to remove highlight color for the completed steps.
• Feature(Stepper): Add [icon] input to show an icon instead of the step number.
• Feature(Stepper): Add .complete() method to complete every step (including the last one).

Checklist

• *Added unit tests
• *Added a code reviewer
• Added changes to /projects/swimlane/ngx-ui/CHANGELOG.md under HEAD (Unreleased)
• Updated the demo page
• Included screenshots of visual changes

*required

[nartc]

questions (non-blocking): LGTM but just quick question, why are there needs for using cdr.markForCheck() on every @Input?

[joeveiga]

@nartc Thanks! Good question, I'm not sure (just copy/pasted one of them xD). My best guess would be that some of those properties can be updated by code (as opposed to template binding changes). See the .first() method in the StepperComponent, for example. Maybe would be better to move the markForCheck() call out of the properties an into those methods instead?

[nartc]

suggestion (non-blocking): I see. It really depends on the intended usage of the StepperComponent. If the consumers query the StepperComponent by View/ContentChild then change StepperComponent's inputs from the consumers' component, then cdr.markForCheck might be needed. For this case, I'd try removing them. Since it looks like StepperComponent is being used with Input Bindings so StepperComppnent should be marked dirty properly without markForCheck unless there are things that I'm not aware of.

As for first(), this.active is set from inside of the StepperComponent itself so its setter should be invoked. Not sure why markForCheck() would be needed there, might be we're updating each StepComponent as well. But yeah, try removing those to see if the behavior's broken.

[joeveiga]

@nartc That particular method (first()) is used like this in the demo page:

ngx-ui/src/app/components/stepper-page/stepper-page.component.html

Line 23 in 02cb7c0

<button class="btn" (click)="stepper.first()">First Step</button>

But yeah,, I'll try removing it and see. Thanks 🙏

[nartc]

@nartc That particular method (first()) is used like this in the demo page:

ngx-ui/src/app/components/stepper-page/stepper-page.component.html

Line 23 in 02cb7c0

<button class="btn" (click)="stepper.first()">First Step</button>

But yeah,, I'll try removing it and see. Thanks 🙏

I missed this. Yup, in this case, cdr.markForCheck() is needed.

[Hypercubed]

I'm not sure where this pattern came from... I would discourage using markForCheck in inputs. Most of the time it's at best redundant.

[joeveiga]

@Hypercubed I agree. I removed some of them that seemed unnecessary. However, in the case of the StepComponent, I think we do need them for the current implementation to work correctly, unless I'm missing something. Some of theStepComponent properties can be set via template binding, as in:

<ngx-stepper>
  <ngx-step [completeIcon]="myIcon"></ngx-step>
</ngx-stepper>

In which case this this._cdr.markForCheck(); call doesn't do much:

ngx-ui/projects/swimlane/ngx-ui/src/lib/components/stepper/step.component.ts

Lines 35 to 42 in 02cb7c0

	@Input()
	get completeIcon() {
	return this._completeIcon;
	}
	set completeIcon(v: string) {
	this._completeIcon = v;
	this._cdr.markForCheck();
	}

Or they can be set as part of the containing StepperComponent:

<ngx-stepper [completeIcon]="myIcon">
  <ngx-step></ngx-step> <!-- inherits completeIcon property -->
</ngx-stepper>

And passed down to the steps using a @ContentChildren(StepComponent) reference (L112):

ngx-ui/projects/swimlane/ngx-ui/src/lib/components/stepper/stepper.component.ts

Lines 105 to 120 in 02cb7c0

	for (const item of this._steps.map((step, i) => ({ step, i }))) {
	setTimeout(() => {
	item.step.step = item.i;
	item.step.active = this.active;
	item.step.total = this._steps.length;
	if (!item.step.completeIcon) {
	item.step.completeIcon = this.completeIcon;
	}
	item.step.activeChange.pipe(takeUntil(this._destroy$)).subscribe(
	/* istanbul ignore next */
	active => (this.active = active)
	);
	});
	}

In the second scenario, the change to the completeIcon property in the StepComponent, even though it's marked as an Input(), wouldn't be "change detected".. (or would it? 🤔 )

[nartc]

In the second scenario, the change to the completeIcon property in the StepComponent, even though it's marked as an Input(), wouldn't be "change detected".. (or would it? 🤔 )

That is correct. Angular Compiler depends on [] Input Binding syntax to actually check a component for Change Detection.
https://stackblitz.com/edit/ng-onpush-input?file=src%2Fapp%2Fhello-child.component.ts