shepherd-pro/angular-shepherd

An Angular wrapper for the site tour library Shepherd

angular-shepherd's Issues

Realign major version number of package with Angular Core

A lot of Angular libraries have started aligning their major versioning with Angular Core, so it is easier for people to know that v7.x, v8.x, v9.x, v10.x, etc is compatible with whichever version of Angular core they may be running.

It would simplify documenting and integrating this package a lot, since I have an app at work on Angular 6 and haven't been given the time to update it to Angular 10 yet, but my PM wants to see a demo of this module in our app this week and I can't tell if angular-shepherd 1, 2, 3, or 4 will do the trick for now...

support angular 13

hi
angular 13 release last week
any plane to support it ?

getCurrentStep() function is not included in angular-shepherd

although the function is included in shepherd js itself
I can not use it on the shepherdService instance.

I want to add a step counter like the docs but I always end up with :
Property 'currentStep' does not exist on type 'ShepherdService'.ts
i even tried getCurrentStep but with no result

Multiple tours?

From the Shepherd.JS documentation, I see that the underlying library supports the creation of an arbitrary number of tours. However, angular-shephard appears to wrap Shepherd in a single providedIn: root ShepherdService, which as a singleton, will only support a single application tour.

If one wishes to have multiple tours in a single Angular application, is subclassing ShepherdService with a custom service per tour the recommend approach?

DIV shepherd-content empty after upgrade to Angular 9

I am in the process of upgrading an application to Angular 9.
In the application, we are using angular-shepherd a lot and it has been great.
Now that we are on angular 9 and have updated a lot of dependencies, the tour starts without errors, but the div that usually holds the content of the step is empty. This poses a problem since when the tour is set to modal, the whole page is locked.

Here is my angular version info:
Angular CLI: 9.1.6
Node: 12.4.0
OS: darwin x64

Angular: 9.1.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.6
@angular-devkit/build-angular 0.901.6
@angular-devkit/build-optimizer 0.901.6
@angular-devkit/build-webpack 0.901.6
@angular-devkit/core 9.1.6
@angular-devkit/schematics 9.1.6
@angular/cdk 9.2.4
@angular/cli 9.1.6
@angular/material 9.2.4
@ngtools/webpack 9.1.6
@schematics/angular 9.1.6
@schematics/update 0.901.6
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0

I am including angular-shepherd 0.6.0 and shepherd.js 7.1.5 in my package.json.

I will try to reproduce using the test project, but I am wondering if anyone has any ideas of why this might be happening.

Thanks,
HB

ERROR in node_modules/angular-shepherd/lib/shepherd.service.d.ts:64:21 - error TS2694: Namespace '"/controlpresencial/ControlPresencialEmpleados/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDef'.

I get the error of the title:

ERROR in node_modules/angular-shepherd/lib/shepherd.service.d.ts:64:21 - error TS2694: Namespace '"/controlpresencial/ControlPresencialEmpleados/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDef'.

I tried with Ionic4 and Ionic 5 (both with Angular 8).

Can you take a look to this link?

angular/angular#35291 (comment)

Thanks

Question: remove steps?

Hi there!

is there any way to remove all steps?

in the official documentation there is a destroy() method but it didn't work:

something like:

this.onboarding.addSteps([]); // exists
this.onboarding.removeStep(name);
this.onboarding.remove();
this.onboarding.destroy(); 

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Weird behavior after changing routes

Reproduction

1. Click Start Tour button. Now the tour flow works well and all buttons work as expected.
2. Click the About router link above at navigation and then back to home page.
3. Click Start Tour button again. Except close button at the top right conner,
   there will be something wrong with other buttons in step 1. If try to click them one by one, you will get the result as screenshot shown below.

Demo

https://codesandbox.io/s/guide-tour-65yrm

---

Edited:

I am using it in Angular v8.

It seems that there are multiple tour instance. If there is anything I can do to destroy the old tour instance when leaving the page(component)? How to fix it?

Thank you!

Shepherd Step Title Issues

If the Shepherd Title is too large the text will not wrap nor will the dialog box resize. The Text just rolls off the the side of the dialog box. Is there any fix for this?

No CSS files in the /dist folder, problems with theme customization in Angular

(sorry, I posted this in the Abraham project)

Hello @jabbett ,

Thank you for your support. I´m using Angular Shepherd in my project. Since the themes (css files) are not included in the dist folder, I´m REALLY having a hard time changing it´s colors, etc.

Since I didn´t want to include any CSS in the node_modules/shepherd.js, I tried to customize it through a shepherd-theme.scss file, placed in the /src folder of my angular project and @import it in the styles.scss. But doing things like this:

.shepherd { &-header { background: purple; } &-button { border: 1px solid red; } }
is not working....

Any help would be very much appreciated! Thank you

`keyboardNavigation` option in tour instance is not available

In 0.7.0, tour option keyboardNavigation is not available.

In 0.6.0, step button option disabled is not available, but it works in 0.7.0.

---

Compatibility

Angular 8: 0.5.0
Angular 9: 0.6.0
Angular 10: 0.7.0

About the compatibility in README, I think the code should be updated to work with latest Shepherd. Otherwise, user doesn't know which API is available in old version. Especially the Shepherd document is latest.

Even after updating the code to work with latest Shepherd, just keep the same minor version number, like this:

0.5.0 -> 0.5.1
0.6.0 -> 0.6.1
0.7.0 -> 0.7.1

Thanks!

Steps array empty

If add steps with "addStep" method and then I access to the service steps array, always is empty.

this.shepherdService.addSteps(stepsLogin); // stepsLogin is an array with the steps.

console.log(this.shepherdService.steps) 

Is this the normal behaviour?

Write tests

We should port the tests from ember-shepherd to here

useModalOverlay does not work on defaultStepOptions

When creating a new tour, the expected behavior is to set the useModalOverlay flag to true in defaultStepOptions and have the shepherd-modal-overlay-container svg element that is present in the DOM does not get the shepherd-modal-is-visible that is necessary to make it appear.

Digging into shepherd.js code, I found that the useModalOverlay setting is part of an options object passed in the tourObject but it's not present in angular-shepherd's typings.

Using this:
//@ts-ignore this._service.tourObject.options.useModalOverlay = true;

seems to be working for now. ts-ignore is needed to avoid compiler errors.

onTourFinish event doesn't fire

this.shepherdService.onTourFinish = event => {
    console.log(event);
  }

console.log is never executed

add shepherd types

hi
I see this types but in service methods like addsteps is any[], in typescript prefer have type .
I want to know why use any ?
and can I add type for some method ?

Custom action on button not working

So I just get started using Shepherd on my Angular 8 project, unfortunately, I can't do any custom actions inside my buttons.

builtInButtons = {
    complete: {
      classes: "finish-button",
      secondary: false,
      text: "Ok",
      type: "cancel",
      action() {
        console.log('finishing my tour')
      },
    },
    next: {
      classes: "next-button",
      text: "Next",
      type: "next"
    },
    back: {
      classes: "back-button",
      secondary: true,
      text: "Back",
      type: "back"
    }
  };

console.log() doesn't happen, and I can't see why. Basically what I'm seeking is a way to router.navigate when the user finishes the current tour by clicking or advancing via keyboard.

Add User Interactions

The Library looks very useful for better usage and user interactions.
Can this library allow user interactions with the modules that are highlighted
and continue the tour based on the user actions performed.

Add `attributes` on `StepOptionsButton`

Hello !
I would like to be able to add a data-testid attribute on the generated buttons for the tour, in order to ease the E2E tests of my application.
My code would look like

        const steps: Step.StepOptions[] = [
            {
                id: TourService.STEP_0_WELCOME,
                text: `<h1>Welcome !</h1>
                        <div>Let us take you on a quick tour.</div>`,
                buttons: [
                    {
                        classes: 'tour-button-secondary',
                        text: 'Skip tutorial',
                        attributes: {'data-testid', 'tutorial-button-skip'},
                        action: skip,
                    },
                    {
                        classes: 'tour-button-primary',
                        text: 'Next',
                        attributes: {'data-testid', 'tutorial-button-next'},
                        action: next,
                    },
                ],
            },
         }

Do you think this is a feature you could add ?

Does shepherd-theme-arrows work with angular-shepherd?

I am attempting to use shepherd-theme-arrows from the cloudflare cdn. It causes the model to look like this with the content missing but the arrow showing.

Is there something I am missing? Is the angular version compatible with the arrows theme?

Anybody working on Angular-Dart wrapper?

Hi,

Looks like a really great intro/tour package, we'd love to use it with our Angular/Dart application https://portal.aahi.io - has anyone looked at making an angular-dart wrapper?

Regards,

Alex

step only appears when window is resized in angular-shepherd

shepherd tour guide step only appears when window is resized in angular-shepherd.

How to Create Custom Theme?

Currently, I am trying to create custom styling to my first step but it seems like my styling is not taking precedence over the default styling.

this.shepherdService.addSteps([{ id: 'test', classes: 'shepherd', buttons: [ { text: 'Next', type: 'next' } ], text: 'Hello!', attachTo: { element: '.header-app-icon', on: 'right' }, }]);

.shepherd{ border-width: 2px !important; border-style: solid !important; background-color: red !important; }

The documentation is not clear to me how to go about this. Any help?

Does not work on ionic

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function

Ionic:

   ionic (Ionic CLI)  : 4.12.0 (/Users/victor/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 8.0.0, ios 5.0.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, (and 12 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/victor/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.15.3 (/Users/victor/.nvm/versions/node/v10.15.3/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001
```

Getting error while using

Execute action from service

Is possible to execute an action, like a "click" in a button from the service.

How can I do that.

Thanks

IE support?

Doesn't work in IE because shperd.js 2.5.0 uses class syntax. Is it possible to add support from the package side?

Any suggested solutions?

Thanks

No license

Is this library meant to be released under MIT, like the wrapped Shepherd library itself?

unused variable

hi
I see step property is not in use or in shepherd service but used in shepherd service test
Can remove this property ?

Mistake in readme addSteps

https://github.com/shipshapecode/angular-shepherd#addsteps

If i use this code

this.shepherdService.addSteps([
  {
    id: 'intro',
    options: {
      attachTo: '.first-element bottom',
      beforeShowPromise: function() {
        return new Promise(function(resolve) {
          setTimeout(function() {
            window.scrollTo(0, 0);
            resolve();
          }, 500);
        });
      },
      buttons: [
        {
          classes: 'shepherd-button-secondary',
          text: 'Exit',
          type: 'cancel'
        },
        {
          classes: 'shepherd-button-primary',
          text: 'Back',
          type: 'back'
        },
        {
          classes: 'shepherd-button-primary',
          text: 'Next',
          type: 'next'
        }
      ],
      cancelIcon: {
        enabled: true
      },
      classes: 'custom-class-name-1 custom-class-name-2',
      highlightClass: 'highlight',
      scrollTo: false,
      title: 'Welcome to Angular-Shepherd!',
      text: ['Angular-Shepherd is a JavaScript library for guiding users through your Angular app.'],
      when: {
        show: () => {
          console.log('show step');
        },
        hide: () => {
          console.log('hide step');
        }
      }
    }
  }
]);

I get an empty modal.

But if I (get rid of options and modify attachTo) change it to

this.shepherdService.addSteps([
  {
    id: 'intro',
    attachTo: { 
          element: '.first-element', 
          on: 'bottom'
    },
    beforeShowPromise: function() {
      return new Promise(function(resolve) {
        setTimeout(function() {
          window.scrollTo(0, 0);
          resolve();
        }, 500);
      });
    },
    buttons: [
      {
        classes: 'shepherd-button-secondary',
        text: 'Exit',
        type: 'cancel'
      },
      {
        classes: 'shepherd-button-primary',
        text: 'Back',
        type: 'back'
      },
      {
        classes: 'shepherd-button-primary',
        text: 'Next',
        type: 'next'
      }
    ],
    cancelIcon: {
      enabled: true
    },
    classes: 'custom-class-name-1 custom-class-name-2',
    highlightClass: 'highlight',
    scrollTo: false,
    title: 'Welcome to Angular-Shepherd!',
    text: ['Angular-Shepherd is a JavaScript library for guiding users through your Angular app.'],
    when: {
      show: () => {
        console.log('show step');
      },
      hide: () => {
        console.log('hide step');
      }
    }
  }
]);

then everything is alright. Is it a mistake in readme or the problem is deeper?

EMPTY this.shepherdService.steps

I want to remove all the steps of a tour.

May be with this command:

this.shepherdService.steps = []

but it not works.

I've noticed that the steps property is empty. See this example:

   this.shepherdService.modal = true;
   this.shepherdService.confirmCancel = false;

    this.shepherdService.addSteps([
      {
        id: 'ayuda',
        arrow: true,
        attachTo: {
          element: '.step100',
          on: 'bottom'
        },
        buttons: [
          {
            classes: 'boton-salir',
            text: 'Salir',
            type: 'cancel'
          },
          {
            text: 'Atrás',
            type: 'back'
          },
          {
            text: 'Siguiente',
            type: 'next'
          }
        ],
        cancelIcon: {
          enabled: true
        },
        canClickTarget: false,
        scrollTo: false,
        title: 'TITULO',
        text: ['Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500.'],
        modalOverlayOpeningPadding: 5,
        modalOverlayOpeningRadius: 3,
      }

    ]);

    console.log(this.shepherdService.steps);

    this.shepherdService.start();

The console.log(this.shepherdService.steps) throws an empty array.

Error after upgrade Angular to 9.1

Just updated Angular to 9.1.0 and I have this error when I run ng serve and build.

ERROR in node_modules/angular-shepherd/lib/shepherd.service.d.ts:64:18 - error TS2314: Generic type 'ɵɵFactoryDef' requires 2 type argument(s).
64 static ɵfac: i0.ɵɵFactoryDef;

In Angular/core/core.d.ts now there is this declaration:
export declare type ɵɵFactoryDef<T, CtorDependencies extends CtorDependency[]> = () => T;

in ./node_modules/angular-shepherd/fesm5/angular-shepherd.js 297:57-75 [ng] "export 'ɵɵdefineInjectable' was not found in '@angular/core'

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.1

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.19
   @capacitor/core           : 1.0.0-beta.19

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 24 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/../Android/Sdk)
   NodeJS            : v10.15.3 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : Linux 4.18

> 

Question: Using angular code/link in step

Hi there,

first of all thanks for the great library :) Exactly what I was looking for!

My question is if I can use internal links that triggers some angular code within a step? Example:

{
  id: 'example-step 1',
  attachTo: {
    element: '.myelement'
  },
  text: [
    'This is a text <a href="#" (click)="myCustomAction()">Click me!</a>'
  ]
}

I know I can add a button that triggers an action, but can that also be done within the text/element itself?

Best regards,
Jan

step number at step popup

is there any way to show current step/total steps in numbers?

navigate like routing

Hi,

There is any way to route a page using the router link or any other way ??

Like => this.router.navigateByUrl(['/redirecturl']);

Not using location.href="redirectUrl";

please update and thanks,

Setup Travis build

We need to run tests and such in travis

Angular 8.2.14

Hi, i use the exmaple https://github.com/shipshapecode/angular-shepherd but my error apears, when this line is added:
constructor(
private shepherdService: ShepherdService
) { }
Error:
AppComponent_Host.ngfactory.js? [sm]:1 ERROR NullInjectorError: StaticInjectorError(AppModule)[AppComponent -> ShepherdService]:
StaticInjectorError(Platform: core)[AppComponent -> ShepherdService]:
NullInjectorError: No provider for ShepherdService!

Please help!

zone.js dependency is outdated

code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: xxxxxxx
npm ERR! Found: [email protected]
npm ERR! node_modules/zone.js
npm ERR! zone.js@"^0.11.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer zone.js@"~0.10.3" from @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! @angular/core@"^10.2.3" from the root project
npm ERR! peer @angular/core@"10.2.5" from @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^10.2.3" from the root project

Would it be possible to update the angular-shepherd zone.js dependency to 0.11.x without issues?

disableScroll property in angular-shepherd service is not working.

Also Can't see any mapping of this property in shepherd tour instance

Add `type` to interface `StepOptionsButton`

If I try to add type to button using tourObject.getById().updateStepOptions() I get the following error:

Type '{ classes: string; text: string; type: string; }' is not assignable to type 'StepOptionsButton'.
Object literal may only specify known properties, and 'type' does not exist in type 'StepOptionsButton'.ts(2322)

This happens because interface StepOptionsButton doesn't have type, in comparison we can set type on button in addSteps() because its param is Array<any>.

Sample Project

Hi, Is there a sample project using shepherd I can look at.

Unable to install (sh: husky: command not found) because of shepherd.js > @popperjs/core dependency

@popperjs/core breaks shepherd.js which breaks angular-shepherd

$ npm i @popperjs/core

> @popperjs/[email protected] postinstall .../node_modules/@popperjs/core
> husky install .config/husky

sh: husky: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @popperjs/[email protected] postinstall: `husky install .config/husky`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @popperjs/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     .../.npm/_logs/2021-02-20T19_12_22_194Z-debug.log

I've reproduced the issue with all versions from 0.5.0 to 0.11.0

Wrong position of the dialog in some cases

In some case I see the dialog out of the screen, especially with a fixed button, for example this step:

{ id: 'contacts-new', attachTo: { element: '#newContact', on: 'top' }, buttons: [closeButton, backButton, nextButton], highlightClass: 'highlight', scrollTo: false, text: ['text.......'], }

show the dialog not correctly positioned:

this is the button behind the dialog, and I want to display the dialog on top of it, it is a Angular material button with position fixed:

P.S. It happens also with the element in the left sidebar.

Error Typescript 2709 Cannot use namespace 'Shepherd' as a type.`

Hi mate,

i trying your create angular library but when try to compile with typescript 2,9,2 i riceved this error:

ERROR in node_modules/angular-shepherd/lib/shepherd.service.d.ts(15,17): error TS2709: Cannot use namespace 'Shepherd' as a type.

Any idea?

export 'defineInjectable' was not found in '@angular/core

I am trying to installing this plugin in angular 4 (on local machine) and i am getting this warning

WARNING in ./node_modules/angular-shepherd/fesm5/angular-shepherd.js
394:57-73 "export 'defineInjectable' was not found in '@angular/core'
at HarmonyImportSpecifierDependency._getErrors (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:65:15)
at HarmonyImportSpecifierDependency.getWarnings (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:39:15)
at Compilation.reportDependencyErrorsAndWarnings (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\Compilation.js:694:24)
at Compilation.finish (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\Compilation.js:552:9)
at applyPluginsParallel.err (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\Compiler.js:512:17)
at E:\www\nginx\html\frontend-v2\node_modules\tapable\lib\Tapable.js:289:11
at E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\index.js:60:9
at tryCatcher (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\promise.js:512:31)
at Promise._settlePromise (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\promise.js:569:18)
at Promise._settlePromise0 (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\promise.js:614:10)
at Promise._settlePromises (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\promise.js:693:18)
at Async._drainQueue (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\async.js:133:16)
at Async._drainQueues (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\async.js:143:10)
at Immediate.Async.drainQueues (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\async.js:17:14)
at runCallback (timers.js:672:20)
at tryOnImmediate (timers.js:645:5)
at processImmediate [as _immediateCallback] (timers.js:617:5)

this is my packet.json

{
"name": "material-angularcli",
"version": "0.0.0",
"description": "Bootstrap 4 Admin Template",
"author": "Nirav joshi / Wrappixel",
"url": "https://wrappixel.com",
"copyright": "Copyright 2017 wrappixel.com",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
"@types/jquery": "^3.3.0",
"angular-froala-wysiwyg": "^2.7.5",
"angular-inline-editors": "^1.0.2",
"angular-shepherd": "0.0.2",
"angular2-highcharts": "^0.5.5",
"angular2-lightbox": "^1.3.0",
"angular2-signaturepad": "^2.8.0",
"angular4-social-login": "^1.1.1",
"angularx-social-login": "^1.1.1",
"core-js": "^2.4.1",
"countup.js-angular2": "^1.1.1",
"froiden-angular2-select": "^1.0.16",
"jquery": "^3.3.1",
"lightbox2": "^2.9.0",
"md5-typescript": "^1.0.5",
"moment": "^2.24.0",
"mydatepicker": "^2.6.2",
"mydaterangepicker": "^4.2.1",
"ng-recaptcha": "^3.0.5",
"ng2-ckeditor": "^1.1.9",
"ng2-dnd": "^4.2.0",
"ng2-select": "^2.0.0",
"ng2-toasty": "^4.0.3",
"ngx-chips": "^1.5.9",
"ngx-credit-cards": "^1.0.9",
"ngx-dropzone-wrapper": "^4.9.0",
"npm": "^3.10.10",
"rxjs": "^5.5.2",
"sweetalert2": "^7.12.12",
"zone.js": "^0.8.16"
},
"devDependencies": {
"@angular/cli": "^1.5.2",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/bootstrap": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "^9.4.6",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "^2.6.1"
}
}

Can you help me to solve this issue?

issues integrating with Ionic 4

Hi,

I've been looking for the perfect tutorial module for my Ionic app. I wrote a quick test project but ran into 2 major issues:

1. when I scroll, the Shepherd popup does not keep attached to its element. it stays in the same position on the screen (ie won't scroll up as the element scrolls up).

2. when the parent element is off screen, the Shepherd popup has its opacity set to 0. I think the intended behavior is for it to turn to 1 when the element scrolls back onto the screen. However, this does not happen in ionic.

I think the issue is that Ionic renders its content inside fo a shadow dom element.

If there's even the slightest possibility of this being fixed, I'm happy to help contribute to its solution, since it would GREATLY add value to my app.

Trouble styling and sizing pop-ups, specifically with images

Question: I am evaluating whether we can use Shepherd with our application.
For each step in the tour there is an image that we would like to display.
However whenever I do this the pop-up does not grow to encapsulate the image.
I have tried using a custom class to set the min-width but that doesn't seem to be working.
How do I specify the width and height of the pop-up?
Is this something that I need to do in tippy options?

Not Compatible with angular 12

Getting below error

npm ERR! code ERESOLVE
06:00:08 npm ERR! ERESOLVE unable to resolve dependency tree
06:00:08 npm ERR!
06:00:08 npm ERR! While resolving: [email protected]
06:00:08 npm ERR! Found: @angular/[email protected]
06:00:08 npm ERR! node_modules/@angular/common
06:00:08 npm ERR! @angular/common@"~12.0.0" from the root project
06:00:08 npm ERR!
06:00:08 npm ERR! Could not resolve dependency:
06:00:08 npm ERR! peer @angular/common@"^11.0.0" from [email protected]
06:00:08 npm ERR! node_modules/angular-shepherd
06:00:08 npm ERR! angular-shepherd@"^11.0.0" from the root project
06:00:08 npm ERR!
06:00:08 npm ERR! Fix the upstream dependency conflict, or retry
06:00:08 npm ERR! this command with --force, or --legacy-peer-deps
06:00:08 npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
06:00:08 npm ERR!
06:00:08 npm ERR! See /root/.npm/eresolve-report.txt for a full report.