Un-Dismissible Onboarding Modals

Expected behavior

I'd like to use the onboarding plugin for more advanced workflows (highlighting content not visible during the launch)

For instance, the admin area of our application is broken up using MDB Tabs... It would be great to give the user a walkthrough of the entire experience. I could also see it being useful completely changing the route while having the onboarding remain visible.

Actual behavior

I'm currently listening to step changes using the onboardingPrev and onboardingNext events so I'm able to determine the current step the user is on (it would be nice to have a seperate event to subscribe to for this btw). Then I'm changing the MDB tab depending on what step the user is on, this is working as intended but the modal dismisses when the tab changes.

I think all I'm asking for is the equivilent of the 'ignoreBackdropClick' param that exists for modals to be implemented for the onboarding plugin, but it might be more complicated than that.

I hope this makes sense!

Resources (screenshots, code snippets etc.)

  startOnboarding() {
this.currentOnboardingStep = 0;
if(!this.onboardingNextSubscription) {
  this.onboardingNextSubscription = this.onboardingService.onboardingNext.subscribe(() => {
    this.currentOnboardingStep+=1;
    this.handleOnboardingStepChange();
});
}
if(!this.onboardingPrevSubscription) {
  this.onboardingPrevSubscription = this.onboardingService.onboardingPrev.subscribe(() => {
    this.currentOnboardingStep-=1;
    this.handleOnboardingStepChange();
});
}
this.onboardingService.init(
  [
    { id: 'first-step-autostart', content: 'Example of autostarted onboarding experience' },
    {
      id: 'second-step-autostart',
      content: 'Pass delay time in seconds to autostart onboarding',
    },
    {
      id: 'third-step-autostart',
      content: 'Delay time will also work with other starting options',
    },
  ], 
  {
    backdrop: true,
    backdropOpacity: 0.35,
  }
);
this.onboardingService.start();
}



    handleOnboardingStepChange() {
switch (this.currentOnboardingStep) {
  case 0:
    // Step 0: Welcome tab
    this.switchToTab('welcome');
    break;
  case 1:
    // Step 1: Billing tab
    this.switchToTab('billing');
    break;
  case 2:
    // Step 2: Welcome tab
    this.switchToTab('welcome');
    break;
  default:
    // Default to welcome tab for any other steps
    this.switchToTab('welcome');
    break;
}
}