Shepherd 14 no longer allows button types

[smlombardi]

I updated my app to use Angular 14 and angular-shepherd 14.

The tour which previously worked fine now will not compile and throws errors like this in the terminal when I try to compile:

According to the docs this is still a valid type and I didn't see any specific migration notes.

[RobbieTheWagner]

@smlombardi button types are a thing still. My guess is the types are wrong. I don't know where these types are coming from.

[smlombardi]

with Angular Shepherd 14 installed, this block is flagged in VSCode as an error on the type: cancel line and will not compile.

Note that I can run angular shepherd 12 in angular 14 just fine, and without this error

   this.shepherdService.addSteps([
      {
        class: 'single-coach-mark',
        attachTo: {
          element: ' .pbi-apps',
          on: 'bottom'
        },

        buttons: [
          {
            classes: 'btn btn-page-primary btn-block w-100',
            text: 'Got it',
            type: 'cancel'
          }
        ],
        cancelIcon: {
          enabled: true
        },
        classes: 'bg-light coach-marks',
        highlightClass: 'highlight',
        scrollTo: false,
        text: ['Account is now in Header.']
      }
    ]);

[RobbieTheWagner]

@smlombardi yes, what I said still applies. Button types are a thing still. My guess is the types are wrong. I don't know where these types are coming from.

[smlombardi]

Perhaps you should change the property name from type to buttonType or something similar? It's possible Angular is now enforcing type as a reserved word.

[RobbieTheWagner]

@smlombardi The error seems to state it's just not in the types for StepOptionsButton, which is correct, it should not be https://github.com/shipshapecode/shepherd/blob/e5a82cc7052a3207d7387848af95f2a3d43f077d/src/types/step.d.ts#L251

[PKHDK]

So what are you supposed to do if you want to use type? When I leave it in my project does not run anymore and if I leave it out my buttons don't work anymore. And using the action attribute instead does not really work as I want to since that tour object in there does not have methods such as close() or next().

Can you please add type in there?

EDIT: Ok, nvm - it is possible to use the action to cancel or to go to the next step.. it is just confusing to understand that.

Example:

            action: function () {
              this.cancel();
            },

Alternatively: action: () => this.shepherdService.cancel()