{"id":25638714,"url":"https://github.com/harvest-dev/ng-walkthrough","last_synced_at":"2025-04-15T00:22:38.251Z","repository":{"id":25762830,"uuid":"106009157","full_name":"Harvest-Dev/ng-walkthrough","owner":"Harvest-Dev","description":"A walkthrough for Angular","archived":false,"fork":false,"pushed_at":"2024-07-02T09:04:52.000Z","size":14988,"stargazers_count":21,"open_issues_count":14,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-13T19:50:26.172Z","etag":null,"topics":["angular","angular6","highlight","typescript","walkthrough"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Harvest-Dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-06T13:42:37.000Z","updated_at":"2024-07-02T09:04:28.000Z","dependencies_parsed_at":"2024-06-19T05:32:12.164Z","dependency_job_id":"25842145-7d21-4fb3-8e52-ca7d48b412b5","html_url":"https://github.com/Harvest-Dev/ng-walkthrough","commit_stats":null,"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-walkthrough","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-walkthrough/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-walkthrough/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-walkthrough/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Harvest-Dev","download_url":"https://codeload.github.com/Harvest-Dev/ng-walkthrough/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240261392,"owners_count":19773474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular6","highlight","typescript","walkthrough"],"created_at":"2025-02-23T02:32:39.116Z","updated_at":"2025-02-23T02:32:39.616Z","avatar_url":"https://github.com/Harvest-Dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/angular-walkthrough.svg)](https://badge.fury.io/js/angular-walkthrough) [![Downloads](https://img.shields.io/npm/dm/angular-walkthrough.svg)](https://www.npmjs.com/package/angular-walkthrough) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/harvest-dev/ng-walkthrough/master/LICENSE.md)\n\n# Walkthrough\n\nThis Angular model is inspired in part by [ng-walkthrough](https://github.com/souly1/ng-walkthrough) for AngularJS.\n\n## Installation\n\n```\nnpm i angular-walkthrough --save\n```\n\n## Requirements\n\n-   Angular `18.0` and more\n-   Angular/cdk `18.0` and more\n\nOld versions:\n\n-   For Angular 6~11 use `0.8.2`\n-   For Angular 11~15 use `0.9.8`\n-   For Angular 16~17 use `0.10.2`\n\n## Demo\n\n[See a demo](https://harvest-dev.github.io/ng-walkthrough/dist/ng-walkthrough/browser).\n\n## Usage\n\n### `ng-walkthrough` attributes\n\nAll attributes are optional.\n\n-   `id`: HTML id.\n\n**Output events**\n\n-   `ready`: fired when the walkthrough is completely ready\n-   `closed`: fired when the walkthrough has been closed. It sends a boolean value set to true if the walkthrough has been closed with the \"finishButton\" button.\n-   `finished`: fired when the walkthrough has been finished, which means : closed on last step.\n\n**Focus zone**:\n\n-   `focusElementSelector`: CSS selector for focus a HTML element. If the selector detect more that one, the only the first will be chosen.\n-   `focusElementCSSClass`: Add a class on focusElement\n-   `focusHighlightAnimation`: `true` for show highlight animation on the focus element. By default `false`.\n-   `focusBackdrop`: `true` for show a dark backdrop around the focus element. By default `false`.\n-   `focusGlow`: `true` for show a glow on the focus element. By default `false`.\n-   `focusClick`: add an action `click` on the highlight zone.\n-   `typeSelector`: type of selection. Two modes possible: `element` (one unique HTML element), `zone` (a zone with contains the first and last element). By default : `element`.\n-   `radius`: apply a “borderRadius” on highlight zone. If `number` the value as change in percent. If `auto` use the focused element borderRadius. If it's a simple `string`, use it without changes. By default, no radius.\n-   `marginZone`: add a margin of focus zone in px. (e.g. `12 15 12 13` for CSS `12px 15px 12px 13px`, `12 15` for `12px 15px 12px 15px`, `12` for `12px 12px 12px 12px`.)\n-   `scrollOnTarget`: if the walkthrough detects that `focusElementSelector` is outside of the current view, scrolls automatically. By default : `true`\n-   `visibilityCallback`: callback to check if `focusElementSelector` is hidden, only if the walkthrough needs specific verification. By default : `optional`\n-   `notScrollOnResize`: do not scroll when resizing (e.g. may be required with dynamic menu on mobile)\n-   `observerOptions`: options of DOM detection changes (default: `{ attributes: false, childList: true, subtree: true }`)\n\n**Content**:\n\n-   `contentTemplate`: add a `ng-template` with your description.\n-   `contentText`: show a simple description without formatting in content.\n-   `contentStyle`: background style for content container. By default : `darken`. Possible values: `none`, `darken`.\n-   `alignContent`: align the `contentTemplate` horizontally. . By default : `left`.\n    -   `left` : on the left\n    -   `center` : on the center of the page\n    -   `right`: on the right\n    -   `content`: center to the target content\n-   `verticalAlignContent`: align the `contentTemplate` vertically. By default : `top`. Possible values :\n    -   With target :\n        -   `above` : above content\n        -   `top` : top of content\n        -   `center` : center of content\n        -   `bottom` : bottom of content\n        -   `below` : below content\n        -   `top-screen-center` : no effect\n    -   Without target\n        -   `above` or `top` : top of the page\n        -   `center` : center of the page\n        -   `bottom` or `below` : bottom of the page\n        -   `top-screen-center` : center on the screen with scroll on top\n-   `contentSpacing`: The max space which separates the content to the focus zone horizontally, default is 0 (opposite of the focusZone)\n-   `verticalContentSpacing`: The max space which separates the content to the focus zone vertically, default is 50\n-   `rootElement`: root element on which walkthrough will scroll to after each positioning, as to avoid hidden zones\n\n**Navigation**:\n\n-   `hidePrevious`: `true` to hide the previous button. By default `false`\n-   `previousStep`: add a link to go to the previous `ng-walkthrough`.\n-   `nextStep`: add a link to go to the next `ng-walkthrough`.\n-   `hideNext`: hide the next step link.\n-   `HiveNav`: hide the navigation step links.\n-   `closeButton`: `true` for show the button. By default `false`.\n-   `closeAnywhere`: `false` for click anywhere to close. By default `true`.\n-   `finishButton`: `true` for show a link to exit. By default `false`.\n-   `disabled`: `true` for ignoring the walkthrough based on a boolean flag. By default `false`.\n-   `texts`: change texts. It's an overlay of `WalkthroughText`.\n\n**Arrow**:\n\n-   `showArrow`: `true` for show the arrow. By default `false`.\n-   `arrowColor`: change the arrow color. By default `#FFF`.\n\n### `ng-walkthrough-flow` attributes\n\nAll attributes are optional and not overriding the sub-components attributes except `previousStep`, `nextStep` that will be ignored.\n\n-   `id`: HTML id.\n\n**Output events**\n\n-   `closed`: fired when a walkthrough has been closed. It sends a boolean value set to true if the walkthrough has been closed with the \"finishButton\" button.\n-   `finished`: fired when the last walkthrough has been closed.\n\n**Focus zone**:\n\n-   `focusHighlightAnimation`: `true` for show highlight animation on the focus element.\n-   `focusBackdrop`: `true` for show a dark backdrop around the focus element.\n-   `focusGlow`: `true` for show a glow on the focus element.\n-   `radius`: apply a “borderRadius” on highlight zone. If `number` the value as change in percent. If `auto` use the focused element borderRadius. If it's a simple `string`, use it without changes.\n-   `marginZone`: add a margin of focus zone in px. (e.g. `12 15 12 13` for CSS `12px 15px 12px 13px`, `12 15` for `12px 15px 12px 15px`, `12` for `12px 12px 12px 12px`.)\n-   `notScrollOnResize`: do not scroll when resizing (e.g. may be required with dynamic menu on mobile)\n-   `observerOptions`: options of DOM detection changes (default: `{ attributes: false, childList: true, subtree: true }`)\n\n**Content**:\n\n-   `contentStyle`: background style for content container. Possible values: `none`, `darken`.\n-   `rootElement`: root element on which walkthrough will scroll to after each positioning, as to avoid hidden zones (facultative)\n\n**Navigation**:\n\n-   `hidePrevious`: `true` to hide the previous button. By default `false`\n-   `closeButton`: `true` for show the button.\n-   `closeAnywhere`: `false` for for click anywhere to close.\n-   `texts`: change texts. It's a overlay of `WalkthroughText`.\n-   `finishButton`: `true` for show a link to exit. By default `false`. Always `true` on the last step.\n\n**Arrow**:\n\n-   `showArrow`: `true` for show the arrow. By default `false`.\n-   `arrowColor`: change the arrow color. By default `#FFF`.\n\n### Change texts\n\nIt's possible to change all texts. With the `texts` directive attribute.\n\n```typescript\nWalkthroughText {\n    previous = 'Previous';\n    next     = 'Next';\n    close    = 'Close';\n}\n```\n\n### Statics methods\n\n-   `WalkthroughComponent.walkthroughStop()`: hide and stop the current walkthrough (impossible to open a new walkthrough).\n    Does not work if no walkthrough is showed.\n-   `WalkthroughComponent.walkthroughContinue()`: show and continue the current walkthrough. Does not work if no walkthrough is paused.\n-   `WalkthroughComponent.walkthroughHasShow()`: if the a walkthrough is currently showing.\n-   `WalkthroughComponent.walkthroughNext()`: to load the next walkthrough.\n-   `WalkthroughComponent.walkthroughPrevious()`: to load the previous walkthrough.\n\n### Statics observable\n\n-   `WalkthroughComponent.onOpen`: on open\n-   `WalkthroughComponent.onRefresh`: on reshowing the current step\n-   `WalkthroughComponent.onClose`: on close\n-   `WalkthroughComponent.onFinish`: on close in the last step\n-   `WalkthroughComponent.onNavigate`: on navigate\n-   `WalkthroughComponent.onNavigatePrevious`: on navigate on the previous step\n-   `WalkthroughComponent.onNavigateNext`: on navigate on the next step\n\n### Example\n\nHighlighting `#selectorId` element with example text in `ng-template`.\n\n```html\n\u003cng-walkthrough\n    id=\"wt-test\"\n    focusElementSelector=\"#selectorId\"\n    focusBackdrop=\"true\"\n    [contentTemplate]=\"template\"\n    closeButton=\"true\"\n\u003e\n    \u003cng-template #template\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit...\u003c/p\u003e\n    \u003c/ng-template\u003e\n\u003c/ng-walkthrough\u003e\n```\n\nExample of scenario with `ng-walkthrough-flow`:\n\n```html\n\u003cng-walkthrough-flow\n    #walkFlow\n    id=\"wt-test-flow\"\n    focusBackdrop=\"true\"\n    focusHighlightAnimation=\"true\"\n    closeButton=\"true\"\n    closeAnywhere=\"false\"\n    showArrow=\"true\"\n    radius=\"auto\"\n    [texts]=\"frenchText\"\n\u003e\n    \u003cng-walkthrough\n        id=\"wt-test1-flow\"\n        focusElementSelector=\"#test1\"\n        [contentText]=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit...\"\n    \u003e\n    \u003c/ng-walkthrough\u003e\n    \u003cng-walkthrough\n        id=\"wt-test2-flow\"\n        focusElementSelector=\"#test2\"\n        [contentText]=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit...\"\n    \u003e\n    \u003c/ng-walkthrough\u003e\n    \u003cng-walkthrough\n        id=\"wt-test3-flow\"\n        focusElementSelector=\"#test3\"\n        closeButton=\"true\"\n        [contentText]=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit...\"\n    \u003e\n    \u003c/ng-walkthrough\u003e\n\u003c/ng-walkthrough-flow\u003e\n```\n\nFor more examples, see `examples/example.component.html`.\n\n## Publishing the library\n\n```\nnpm run build:lib\ncd dist/angular-walkthrough\nnpm publish\n```\n\n## License\n\nLike Angular, this module is released under the permissive MIT license. Your contributions are always welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharvest-dev%2Fng-walkthrough","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharvest-dev%2Fng-walkthrough","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharvest-dev%2Fng-walkthrough/lists"}