Version history: 04/23/24 1.0.3: Updaded to Angular 18. 04/23/24 1.0.2: Previous "npm publish" was not done correctly. If this works it is because "npm publish" was run from within the "dist/progress-tracker" folder. 04/22/24 1.0.1: Updated to Angular 15.
npm install @rev-spring/progress-trackerVersion history:
04/23/24 1.0.3: Updaded to Angular 18.
04/23/24 1.0.2: Previous "npm publish" was not done correctly. If this works it is because "npm publish" was run from within the "dist/progress-tracker" folder.
04/22/24 1.0.1: Updated to Angular 15.
Example array of the information you need to send to the "Progress Tracker" (including the "standard" Revspring colors):
tracker: ProgressTrackerModel = new ProgressTrackerModel(
'#FFFFFF', // alertFontColor
'#C80815', // alertBackgroundColor
'#FFFFFF', // doneFontColor
'#005687', // doneBackgroundColor
'#FFFFFF', // inProgressFontColor
'#77C5D5', // inProgressBackgroundColor
'#FFFFFF', // notStartedFontColor
'#888B8D', // notStartedBackgroundColor
[
new ProgressTrackerStepModel(1, 'Created', 'not-started', 'auto', true),
new ProgressTrackerStepModel(2, 'Forms Sent', 'not-started', 'auto', true),
new ProgressTrackerStepModel(3, 'Forms Signed', 'not-started', 'auto', true),
new ProgressTrackerStepModel(4, 'MID Created', 'not-started', 'auto', true)
]
);
The "tracker" object contains the colors you want to use for the different statuses and an array containing your step information.
Step values explanation:
id: This value is used to make sure the first and last steps are styled differently from the "middle" steps. Also, if "hyperlink" is true this id is passed up to the parent object when the step name is clicked so you can use that to "do something" with that clicked step.
step: Basically the step's name, what the user will see in the UI.
status: This must be one of three values: "not-started", "in-progress", and "done". This will determine what css styles are applied to each step.
width: If you want your steps to be a specific with then specify a valid css width value here, otherwise set these values to 'auto'.
hyperlink: Make the text in a step clickable and send the id value up to the parent.
Code you will need in the Parent template:
[tracker]="tracker"
(clickedStep)="clickedStep($event)">
Code you will need in the Parent component:
clickedStep(id: number) {
alert(This step is clicked: ${id.toString()});
}
Copy and paste the "tracker" example object from the top of this document into the parent component and edit it to match your needs.