sebgroup / ng-wizard Goto Github PK

The left menu item gets some spacing to the left when the step number has two digits. See image where step number 12 is marked in red. The same space is visible for step 10 and 11 when hovering on them or navigating to them.

requires history state to be updated when navigating between steps

Issue:

After installing and implementing the wizard I kept getting this error (and similar for each property in the model):

Error: node_modules/@sebgroup/ng-wizard/lib/models/wizard-texts.d.ts:2:5 - error TS2411: Property 'wiz_next_action' of type 'string | undefined' is not assignable to string index type 'string'.

2     wiz_next_action?: string;
      ~~~~~~~~~~~~~~~

The package itself has the strict property set to false in tsconfig, which is the reason why the package itself won't complain about this error. But as soon as the main project has strict set to true the error pasted above will appear.

Proposed solution:

Fix wizard-texts.ts model by correctly setting the types:

export interface WizardTexts {
    wiz_next_action?: string;
    wiz_prev_action?: string;
    wiz_close_action?: string;
    wiz_save_action?: string;
    wiz_header_title?: string;
    wiz_step_description?: string;
    [key: string]: string | undefined;
}

and set strict to true in tsconfig, since this is the default behavior of Angular projects.

If this is not fixed every project that wants to use the wizard won't be able to have strict typing enabled.

We have 12 steps and it works fine on larger screens, however on laptop the last step is not visible and the sidebar does not seem to allow any scrolling, so we can not access the 12th step from the sidebar menu.

When injecting WizardSteps service to an NgRx effect a warning occurs that breaks further WizardSteps usage:

sebgroup-ng-wizard.js:424 No valid route config found for current route: "".
Make sure route guards provide a fallback if a access to a step is restricted and that inactive sub steps are handled too, using a wildcard route.

In our case, routes are configured correctly as described in the documentation. What is more, this doesn't happen when injecting WizardSteps to a regular Angular service.

Reproducing the issue

This issue can be reproduced in a sample seb-ng-wizard project (e.g. https://github.com/sebgroup/ng-wizard/tree/master/projects/seb-ng-wizard-lazy-demo):

1. Install NgRx store and effects
2. Create any effect and provide it in a module
3. Inject WizardSteps to the created effect
4. Launch the application and the before mentioned warning will appear.

Workaround

After playing around with it a little, we discovered that by extracting WizardSteps constructor code into a method and placing it in a timeout, the issue is resolved:

constructor(private router: Router, private _location: Location) {
  setTimeout(() => {
    this.init();
  }, 0);
}

Uppon further investigation we saw that the error occurs because of undefined access to routes (line 43). In essence, this._config.config['_loadedConfig'].routes[0].children can't find _loadedConfig initially but works just fine with setTimeout(...). Perhaps a race condition occurs somewhere?

When calling setState with enum or string path (tried with several different paths as well), i get this undefined error:

The code where I call the setState method =

and our wizard-routing.module where I declare the path =

Do you have any ideas of what the reason might be? :)

Change display to block to fix this error.

The alignment of the text is off when the text in the left menu spans over two lines, see image:

• Alert should be placed on top of form
• Checkbox error message should be outside of box
• Set focus to first error in form

We have a use case where we need to disable a whole step. Refactoring it to sub-steps is not a good solution. In the documentation a disabled step state is shown. However, it is either not supported or not clear how to implement:

For our use case, we created a specific CanActivate guard to skip disabled steps. However, it would be nice to have a visual indication for this (e.g. like in the picture above).

It shouldn't be possible to navigate to a step unless route guard returns true.

Current solution using pure css to prevent navigation has some issues and doesn't prevent user from using keyboard or by typing the url in the browser.

Notes from meeting with CX DM 20200826:

• Remove placeholder texts
• Move warning alert to content
• Set default width for buttons to half on mobile (col 6)
• Center text on mobile buttons
• Remove alert icon from secondary content
• Help text for input field should be placed between label and input

Notes from meeting with CX DM 20200902:

• Adjust margin for help text in form
• Change pending progress color to black
• Adjust margin for chevron in mobile header
• Remove text for valid input
• Update "here" links to something meaningful
• Center text and icons in buttons on mobile

Notes from meeting with CX Component Review 20200910:

• Move step chevron to the right
• Add skeleton loader for modals (not part of wizard)
• Modals should add a history state when opened so that they can be closed by going back (not part of wizard)

The main content area is too wide, it should have a maximum width that matches the navigation area with the next / previous buttons. See this image:

Header is not displayed and sometimes not even the steps eg.

The wizard should have a fixed footer on desktop and tabled view (the content should scroll) while it should flow with content on mobile devices (small screens).

🚨 The automated release from the 3.x.x branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the 3.x.x branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The release 2.0.0 on branch 3.x.x cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=3.0.0 <1.4.1 can be published from branch 3.x.x.

The following commits are responsible for the invalid release:

• Merge remote-tracking branch 'origin/release/rc' (f174627)
• ci(github-actions): update build order (eab8923)
• ci(github-actions): update build order (b98ead3)
• build: use prod configuration (9771279)
• chore: update build scripts (e6094a2)
• docs: add header title (f3aceaf)
• docs: fix angular 12 scss compilation error (243bb30)
• chore: npm audit (63e344d)
• docs(simple-usage): add font awesome (7ff082a)
• fix(wizard-steps): path generation for sub step (315db97)
• docs: update to angular 12 (df55ca8)
• chore(deps): npm audit (60809d6)
• chore(dev-deps): bump fontawesome (75234ec)
• chore: bump to angular 12 (2a68293)
• fix(top-bar): update style for close and allow overflow to scroll (16c90aa)
• docs(language): fix markup (8e3f9f7)
• docs(language): add missing translations (5a6f1e6)
• fix: missing language support for step description (cada251)
• fix: handle issue with grid in old bootstrap versions (af594e0)
• fix(controls): add missing print type to interface (e3fb6ac)
• docs: improve markup (1fc0bcb)
• chore: bump to angular 11 (eed5c39)
• chore: bump to angular 10 (5724ea6)
• chore: bump to angular 9 (7c5ff69)
• chore(dev-deps): bump node-sass (bca20ab)
• docs: add project for simple usage (without nested routes) (8dccd26)
• fix(wizard-steps): generate steps for routes at root level (f9d869b)
• fix: add null checks (48ae044)
• chore: remove unused code (9b69c47)
• fix: add config option for useFullWidth (907d473)
• refactor: wizard config (83c2ff8)
• docs: add missing entry component (ee3c932)
• docs(language): fix load path (f26bc89)
• chore(deps): npm audit fix (269bda2)
• fix(wizard-steps): use correct location for step generation (ab6e0f0)
• Merge pull request #63 from sebgroup/release/design-update (fa8bc66)
• docs(basic): update example (d0248ed)
• docs(form-and-route-guard): update example (b7df625)
• feat(wizard-steps): add getter for activeStep (40de7ce)
• fix(wizard-steps): return full path for ordered step list (fc9ccf6)
• fix(wizard-steps): remove inactive sub steps from ordered step list (64cbc07)
• perf(wizard-steps): implement share replay and distinct until changed (80c03ef)
• feat(wizard-steps): add updateSubSteps method (10bfd89)
• feat(wizard-steps): add getPreviousStep(path: string) method (5f15c26)
• refactor(wizard-steps): interface for update step method (5c82781)
• fix(controls): don't add next/prev by default on first/last step (7d9999c)
• feat: return id with getStepByUrl (c04dbf5)
• fix: setup steps based on location instead of loaded route (66e87ef)
• fix(wizard-component): add null checks (1484e01)
• refactor(controls): use ng if with async in object (e838887)
• docs: update base documentation (c9a693a)
• docs(language): update example (652e838)
• fix(left-navigation): update styling (3cd18bd)
• fix: add type for wizard step state (846ed94)
• refactor: interface for wizard module config (5ccc96b)
• feat: optional step controls (caa6aa2)
• refactor: improve language support (484cbf6)
• fix(controls): improve language support (3399b1c)
• fix: improve language support (0c0b678)
• refactor(wizard-steps-service): rename to wizard steps (50591ee)
• chore(deps): npm audit fix (ab9ae26)
• chore(dev-deps): bump semantic release (71f2f96)
• docs(form-and-route-guard): add missing component (e06e591)
• chore(deps): add transloco for demo (f9bc801)
• docs: update (b70f851)
• docs(language): add basic example (d2d851c)
• docs(form-and-route-guard): update (c214581)
• docs(wizard-tutorial): update (80312e1)
• refactor: update module (f891c38)
• fix: update interfaces (4b5e417)
• refactor: wizard base component (b3f420c)
• feat(navigation): support for states, translations and sub steps (216e263)
• fix(controls): keep query params when navigating (2613a75)
• feat(controls): add lang support and simplify prev/next links (80fda28)
• feat: add service for wizard steps (08176d4)
• chore(left-navigation): add experimental support for sub steps (ae111b4)
• fix(left-navigation): update active state style (65ede24)
• Merge branch 'release/hide-navigation' into release/design-update (005eda7)
• feat: add ability to use full width (d5dbeb2)
• fix: handle query params for active route check (1a2c685)
• fix(left-navigation): make it wider (20e124c)
• fix(left-navigation): updated style (ddb9a8f)
• chore(local-dev): update scripts (8f0173c)
• fix(footer): responsive layout when navigation is hidden (824bc94)
• fix: add container for footer (10c072f)
• style: make hide navigation property optional (3f5b183)
• ci(github-actions): update config (bddeda3)
• docs: add example with hidden navigation (eddbb42)
• docs: fix examples (80357c7)
• feat: add ability to hide navigation (5e8e223)
• fix: scroll behaviour for tablets (4dec5a5)
• fix(navigation): chevron position on small screens (7ad168e)
• ci(semantic-release): update release rules (6f4c2e6)
• docs: use forRoot (cc299d7)
• docs: update imports (c85e58d)
• docs: use correct import (84b4578)
• refactor: move directive to separate file (7b99748)
• fix(left-navigation): alignment of chevron on small screens (728fc90)
• fix(left-navigation): active item color (fade8ee)
• chore: remove console log (c7615f3)
• feat(config): add wizard config and basic support for translations (4ee8553)
• fix(controls): sizes and layout for buttons (cfe2439)
• docs: update (789de03)
• docs(protected-step): adjust example (431784c)
• docs: change references (dc5c3ee)
• refactor: module name and structure (656d610)
• fix(controls): correctly set max width (b062970)
• docs: add missing entry components (79a6ec5)
• docs: update example (ee1c446)
• fix: remove temporary fix for disabling steps (a254055)
• chore(deps): remove travis (655f80a)
• chore(deps): remove copyfiles (3e1e326)
• docs: remove old example (95da2ff)
• docs(gh-pages): redirect fix (40c325d)
• ci(github-actions): use last part of branch name (a888ab1)
• ci(github-actions): test static target folder (0a93e96)
• ci(github-actions): fix typo (7461dfb)
• ci(github-actions): get branch name (a94fd6f)
• ci(github-actions): print branch name (ce57a52)
• ci(github-actions): fix typo (ca844ef)
• ci(github-actions): update config (caf8c06)
• chore(dev-deps): add replace (e1a190a)
• ci(github-actions): update config (a6026fe)
• ci(github-actions): fix typ in config (b0deb4b)
• ci(github-actions): add config (b04aa1b)
• build: fix npm scripts (6cbe2fa)
• chore: fix merge conflict (2421deb)
• Merge branch 'feature/update-design' into next-major (db1d176)
• refactor: use routes for steps, add control service and footer controls (509b658)
• docs: add more examples (c356a82)
• docs: remove old example (92b8e1c)
• chore(deps): update dependencies (5768fbe)
• Merge pull request #33 from sebgroup/feature/temp-disable (87fce41)
• fix(navigation): disable navigation for upcoming steps (1bde7fd)
• chore(deps): audit fix (5bb99da)
• fix(footer): use fixed position for desktop (e964954)
• fix(accordion): correct chevron rotation (5072f5e)
• feat(footer): add initial version (7f6655b)
• fix: remove fifth element from navigation (cb12480)
• chore(deps): update (91e5151)
• ci: add config for font awesome (391ee39)
• fix: background image for navigation on small screens (3473c5d)
• chore(dev-deps): bump sebgroup/bootstrap (e57bf85)
• docs: add app for lazy-loaded routes (c652dea)
• chore(peer-deps): update angular version (4d12caa)
• fix: support for child routes (7079bf9)
• fix: use different style for previous/completed steps (004adae)
• fix: bind close method to close button (d53f323)
• fix: remove browser animation module (e740c2d)
• Merge pull request #31 from sebgroup/feature/fix-responsiveness (2f90f04)
• fix: size and order of content declared by consumer (315ee6f)
• Merge pull request #30 from sebgroup/feature/fix-responsiveness (3ddab78)
• chore(deps): fix dependencies and lock file (a7aa6cd)
• fix: improve responsivness and fix breakpoints (5d1e97d)
• refactor(navigation): use angular animations module (020b974)
• style: fix typos and lint errors (5b81442)
• chore(deps): bump semantic-release (a73e0f0)
• chore(deps): bump @sebgroup/bootstrap (af77a3a)
• chore(deps): bump dependencies (96b5798)
• Merge remote-tracking branch 'origin/master' into feature/angular-8 (abcdaa4)
• Merge branch 'master' into feature/angular-8 (3c72288)
• chore(deps): update to angular 8 (e8b3680)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch 3.x.x with git revert or git reset.

A valid branch could be master or next-major.

See the workflow configuration documentation for more details.

Good luck with your project ✨

Your semantic-release bot 📦🚀

For us it would be better to have the cancel button next to the previous button (left adjusted).

we have an issue that everything works fine we run applications directly from the browser but since we have to load applications in MPS or another shell we are loading them inside an iframe.
but when we load them from iframe in iPhone, Android, iPad, and Android tablet, some parts in ng-wizard and also some other packages like ng-modal are not working properly. height of ng-wizard is more than the whole page, you can't see the buttons. and then the z-index of the page is not working properly. like ng-modal is going behind the ng-wizard top-nav and footer and playing with z-index is not helping.

Next and previous action should have default text.

Next/Nästa
Previous/Tillbaka (or Föregående?)