{"id":16433506,"url":"https://github.com/miraxes/ngx-custom-tour","last_synced_at":"2025-03-23T08:31:46.255Z","repository":{"id":65370510,"uuid":"424716556","full_name":"miraxes/ngx-custom-tour","owner":"miraxes","description":"Custom tours for angular applications","archived":false,"fork":false,"pushed_at":"2023-02-14T13:16:02.000Z","size":421,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T18:58:08.565Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miraxes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-11-04T19:31:37.000Z","updated_at":"2023-02-14T13:19:21.000Z","dependencies_parsed_at":"2024-10-28T15:29:48.428Z","dependency_job_id":"cd1ad286-b780-4b73-8de2-4e8fbba4bf88","html_url":"https://github.com/miraxes/ngx-custom-tour","commit_stats":{"total_commits":12,"total_committers":3,"mean_commits":4.0,"dds":"0.33333333333333337","last_synced_commit":"4e903c8b0f005956d7d042e7f2854824b8ab07e5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miraxes%2Fngx-custom-tour","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miraxes%2Fngx-custom-tour/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miraxes%2Fngx-custom-tour/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miraxes%2Fngx-custom-tour/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miraxes","download_url":"https://codeload.github.com/miraxes/ngx-custom-tour/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245078067,"owners_count":20557274,"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"],"created_at":"2024-10-11T08:46:19.464Z","updated_at":"2025-03-23T08:31:45.882Z","avatar_url":"https://github.com/miraxes.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Onboarding and Product Tours"],"readme":"This is new a bit extended version of\n[https://github.com/miraxes/angular-custom-tour](https://github.com/miraxes/angular-custom-tour).\n\nFor versions less than Angular v6, please use older version of this library.\n\n[![Downloads](https://img.shields.io/npm/dt/ngx-custom-tour.svg?style=flat-square)](https://www.npmjs.com/package/ngx-custom-tour)\n[![Versions](https://img.shields.io/npm/v/ngx-custom-tour.svg?style=flat-square)](https://www.npmjs.com/package/ngx-custom-tour)\n[![License](https://img.shields.io/npm/l/ngx-custom-tour.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n\n# Versions\n| angular           | library     |\n| ----------------- |:-----------:|\n| below v12         | 0.1.6       |\n| v13               | 0.1.7       |\n| v14               | 1.1.0       |\n\n## Breaking change\nStarting from 1.x.x `selector` is not required anymore.\nInstead we have `order` which REQUIRED and must be UNIQUE.\n\n# Usage\n\n* install `npm install ngx-custom-tour --save`\n\nIn your module (app.module.ts)\n  ```typescript\n  import { NgxCustomTourModule } from 'ngx-custom-tour'\n\n  @NgModule({\n    ...\n    imports: [\n      ...\n      NgxCustomTourModule // Put here\n      ...\n    ]\n    ...\n  ]\n  ```\nNote: You'll need to import BrowserAnimationsModule too;\n\nInitialize it in your page component\n\n\u003e In case you want to init slider after pageload, you should use ngAfterViewInit\n  ```typescript\n  import { NgxCustomTourService } from 'ngx-custom-tour'\n\n  @Component({\n    ...\n    providers: [... NgxCustomTourService ... ],\n    ...\n  })\n\n  class AppComponent {\n\n    constructor(public customTourService: NgxCustomTourService){ }\n\n    startTour() {\n      this.customTourService.initialize();\n    }\n\n  }\n  ```\n\n  ```html\n  \u003c!-- start TOUR --\u003e\n  \u003cbutton name=\"button\" (click)=\"startTour()\"\u003e START!\u003c/button\u003e\n\n  \u003c!-- Each step could be placed at ANYWHERE --\u003e\n  \u003cdiv class=\"i-want-highlight-this\" id=\"highlight-me\"\u003e WOW!\u003c/div\u003e\n\n  \u003ctour-step selector=\"highlight-me\" [order]=\"3\" position=\"right\" title=\"title string\"\u003e\n    \u003c!-- ANY HTML HERE\n      NOTE: ONLY order attribute is required! others is up to you\n    --\u003e\n  \u003c/tour-step\u003e\n  ```\n  ## NOTE:\n\n  \u003e order MUST BE unique\n\n## Styles\n\nYou need to inject styles from `node_modules/ngx-custom-tour/styles/styles.scss`\n\nFeel free to import those styles directly to your scss\nAlso, we added some scss variables to let you adjust styles just in one line.\n# Scss variables\n| variable                   | default           |\n| -------------------------- |:-----------------:|\n| $ct-overlay-opacity        | rgba(0, 0, 0, .6) |\n| $ct-header-font-size       | 14px              |\n| $ct-container-min-width    | 200px             |\n| $ct-primary-color          | #00b2f2           |\n| $ct-secondary-color        | #8D0876           |\n\n# Custom options Usage\n\n```typescript\n  startTour() {\n    this.customTourService.initialize({elementsDisabled: false}); // HintOptions\n  }\n```\n\n## HintOptions\n\n| option                     | default   | Usage  |\n| -------------------------- |:---------:| ------ |\n| elementsDisabled: boolean  | true      | Disabling highlightedElement (click) wont work|\n| dismissOnOverlay: boolean  | false     | Go to next step when clicking on overlay (close tour if this is last step)|\n| defaultPosition: string    | 'bottom'  | Position of tour step to highlightedElement |\n| defaultLayer: number       | 15        | Distance between highlightedElement and step in px |\n| applyRelative: boolean     | true      | Applying position:relative to highlightedElement (disable in case you want to highlight absolute positioned elements) |\n\n\n##  Hint service events\n\n| event         | Description  |\n| ------------- | ------------ |\n| finish$       | When tour is finished |\n| showingStep$  | On each step show (Params \u003e CurrentStep) |\n\n\nThis module in ~active~ development mode, if you have any suggestions feel free to contact me.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiraxes%2Fngx-custom-tour","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiraxes%2Fngx-custom-tour","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiraxes%2Fngx-custom-tour/lists"}