import { LightningElement, api, track } from 'lwc';
var trackerArray = [
{ status: "Starting Point", active: 'inactive'},
{ status: "Global Filter Selection", active: 'inactive'},
{ status: "Scenario Filter Selection", active: 'inactive'},
{ status: "Prospect Validation", active: 'inactive' },
];
export default class PizzaTracker extends LightningElement {
@api status;
@track input;
@track arr=[];
connectedCallback(){
this.input=this.status;
console.log('Inp'+ this.input);
// Iterate over the trackerArray
for (var i = 0; i < trackerArray.length; i++) {
// Check if input matches the status property
if (trackerArray[i].status === this.input) {
// Update the active property to true
trackerArray[i].active = 'active';
break; // Exit the loop if a match is found
}
}
// Display the updated trackerArray
this.arr=trackerArray;
console.log('Tracker'+JSON.stringify(this.arr[0]));
}
renderedCallback() {
// Apply inline styles to active steps
const steps = this.template.querySelectorAll('.step');
steps.forEach((step, index) => {
if (this.arr[index].active === 'active') {
step.style.color = 'rgb(255, 255, 255)';//'blue'; // Apply blue color to active steps
step.style.backgroundColor = 'rgb(100, 0, 255)';
}
});
}
}
I've attached my code and problem for some reason am getting this error The Lightning Component c:cHVAC_PizzaTracker generated invalid output for field status..I've tried different possibilities still am getting the error...the '@api status' I'll get from js-meta.xml file