{"_id":"@diegoso4/ngx-orbit-tour","name":"@diegoso4/ngx-orbit-tour","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@diegoso4/ngx-orbit-tour","version":"0.1.0","description":"Guided tours, onboarding y ayuda contextual para Angular 17+ — Signals, spotlight SVG y API standalone.","keywords":["angular","tour","onboarding","coach-mark","spotlight","ngx-orbit"],"author":{"name":"Diego Osorio","email":"diegoso4@users.noreply.github.com"},"license":"MIT","homepage":"https://github.com/diegoso4/ngx-orbit/tree/main/projects/ngx-orbit-tour#readme","bugs":{"url":"https://github.com/diegoso4/ngx-orbit/issues"},"repository":{"type":"git","url":"git+https://github.com/diegoso4/ngx-orbit.git","directory":"projects/ngx-orbit-tour"},"publishConfig":{"access":"public"},"peerDependencies":{"@angular/cdk":"^20.2.0","@angular/common":"^20.3.0","@angular/core":"^20.3.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/diegoso4-ngx-orbit-tour.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/diegoso4-ngx-orbit-tour.mjs"}},"_id":"@diegoso4/ngx-orbit-tour@0.1.0","gitHead":"d94a7f10d9c0b1cbdd3f54d7e6197827e5cd0d1c","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-lPY5XVI6Sc7MDZr0HgqC3X5whH6tx5+MVASSYHmr+y3OTLj5NkW4OFmeWk/nkmLsFksdg6+y8dH6vlgmuPaw7Q==","shasum":"e7aa0cc98a747f4b71bd97587368a87c4dd35224","tarball":"https://registry.npmjs.org/@diegoso4/ngx-orbit-tour/-/ngx-orbit-tour-0.1.0.tgz","fileCount":5,"unpackedSize":110245,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICsY+3F/1vBD0p2yU/TFOZVhDvsOSLYjAm0xC9GUwP4fAiB5XwNSEXfciyD719Al+s+AFa3K+CWW59khFLSwyUTIWA=="}]},"_npmUser":{"name":"diegoso4","email":"dosorio4@outlook.com"},"directories":{},"maintainers":[{"name":"diegoso4","email":"dosorio4@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-orbit-tour_0.1.0_1779282831276_0.6947691531375011"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-20T13:13:51.141Z","0.1.0":"2026-05-20T13:13:51.449Z","modified":"2026-05-20T13:13:51.653Z"},"maintainers":[{"name":"diegoso4","email":"dosorio4@outlook.com"}],"description":"Guided tours, onboarding y ayuda contextual para Angular 17+ — Signals, spotlight SVG y API standalone.","homepage":"https://github.com/diegoso4/ngx-orbit/tree/main/projects/ngx-orbit-tour#readme","keywords":["angular","tour","onboarding","coach-mark","spotlight","ngx-orbit"],"repository":{"type":"git","url":"git+https://github.com/diegoso4/ngx-orbit.git","directory":"projects/ngx-orbit-tour"},"author":{"name":"Diego Osorio","email":"diegoso4@users.noreply.github.com"},"bugs":{"url":"https://github.com/diegoso4/ngx-orbit/issues"},"license":"MIT","readme":"# ngx-orbit-tour 🛰️\n\n[](https://www.npmjs.com/package/@diegoso4/ngx-orbit-tour)\n[](https://github.com/diegoso4/ngx-orbit/blob/main/LICENSE)\n[](https://angular.dev)\n\n**ngx-orbit-tour** es una librería de **guided tours**, **onboarding** y **ayuda contextual** para **Angular 17+**. Pensada para dashboards, SaaS y apps enterprise: API standalone, **Signals**, overlay con **máscara SVG** (spotlight) y motor desacoplado del DOM de tu producto.\n\n**Autor:** [Diego Osorio](https://www.npmjs.com/~diegoso4) · **Repositorio:** [github.com/diegoso4/ngx-orbit](https://github.com/diegoso4/ngx-orbit)\n\n---\n\n## Características ✨\n\n- **Tours guiados** con registro declarativo (`OrbitTourDefinition`) y pasos anclados por ID.\n- **Spotlight SVG** — resalta elementos sin hacks de `querySelector` global.\n- **Signals** — estado reactivo del tour (paso actual, visibilidad, progreso).\n- **Standalone-first** — `provideOrbitTour()`, directivas y componentes importables por piezas.\n- **Anclas** — directiva `[orbitAnchor]` + registro automático en runtime.\n- **Ayuda contextual** — `orbitTourHelp` y botón `orbit-tour-help-button`.\n- **Persistencia opcional** — `startIfNotCompleted()` con clave en `localStorage`.\n- **SSR-safe** — el motor no arranca overlay fuera del navegador.\n- **Angular CDK** — scroll y posicionamiento integrados (^20).\n- **Sin UI framework extra** — no depende de Bootstrap ni Tailwind.\n\n---\n\n## Requisitos 📋\n\n| Requisito | Versión |\n| --------- | ------- |\n| Node.js | `>=20.19` o `>=22.12` |\n| Angular | `17+` (peers **^20**) |\n| `@angular/cdk` | `^20.2` |\n\n---\n\n## Instalación 🚀\n\nUsa el gestor de tu proyecto (**orden recomendado: pnpm → yarn → npm**).\n\n### pnpm *(recomendado)*\n\n```bash\npnpm add @diegoso4/ngx-orbit-tour\n```\n\n### Yarn\n\n```bash\nyarn add @diegoso4/ngx-orbit-tour\n```\n\n### npm\n\n```bash\nnpm install @diegoso4/ngx-orbit-tour\n```\n\n### Peer dependencies\n\nSi tu app aún no las tiene:\n\n```bash\npnpm add @angular/core @angular/common @angular/cdk\n```\n\n```json\n{\n \"dependencies\": {\n \"@diegoso4/ngx-orbit-tour\": \"^0.1.0\"\n }\n}\n```\n\n> npm, pnpm y yarn avisan si faltan peer dependencies de Angular/CDK.\n\n---\n\n## Uso 🔥\n\n### 1. Registrar el motor\n\nEn `app.config.ts` (o `bootstrapApplication`):\n\n```typescript\nimport { ApplicationConfig } from '@angular/core';\nimport { provideOrbitTour } from '@diegoso4/ngx-orbit-tour';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideOrbitTour(),\n // provideOrbitTour({ engine: { storagePrefix: 'my-app' } }),\n ],\n};\n```\n\n### 2. Marcar anclas en la plantilla\n\n```typescript\nimport { OrbitAnchorDirective } from '@diegoso4/ngx-orbit-tour';\n\n@Component({\n standalone: true,\n imports: [OrbitAnchorDirective],\n template: `\n \n ...\n `,\n})\nexport class DashboardComponent {}\n```\n\n### 3. Registrar tours y arrancarlos\n\n```typescript\nimport { Component, inject, OnInit } from '@angular/core';\nimport {\n OrbitTourService,\n type OrbitTourDefinition,\n} from '@diegoso4/ngx-orbit-tour';\n\n@Component({ /* ... */ })\nexport class AppComponent implements OnInit {\n private readonly tour = inject(OrbitTourService);\n\n ngOnInit(): void {\n const dashboardTour: OrbitTourDefinition = {\n id: 'dashboard-tour',\n skippable: true,\n showStepCounter: true,\n steps: [\n {\n id: 'welcome',\n anchor: 'dashboard-header',\n title: 'Bienvenido',\n description: 'Este es el encabezado principal.',\n placement: 'bottom',\n },\n {\n id: 'content',\n anchor: 'dashboard-main',\n title: 'Contenido',\n description: 'Aquí vive el área de trabajo.',\n placement: 'right',\n },\n ],\n };\n\n this.tour.register(dashboardTour);\n void this.tour.startIfNotCompleted('dashboard-tour');\n }\n}\n```\n\n### 4. Ayuda contextual (opcional)\n\n```typescript\nimport {\n OrbitTourHelpDirective,\n OrbitTourHelpButtonComponent,\n} from '@diegoso4/ngx-orbit-tour';\n\n@Component({\n imports: [OrbitTourHelpDirective, OrbitTourHelpButtonComponent],\n template: `\n \n \n `,\n})\nexport class ShellComponent {}\n```\n\n### API principal\n\n| Método | Descripción |\n| ------ | ----------- |\n| `register(definition)` | Añade un tour al catálogo |\n| `registerMany(definitions)` | Registro en lote |\n| `start(tourId)` | Inicia el tour |\n| `startIfNotCompleted(tourId)` | Inicia solo si no está marcado como completado |\n| `next()` / `previous()` | Navegación entre pasos |\n| `skip()` / `end()` | Salir o finalizar |\n\n---\n\n## Soporte 📚\n\n- **Issues y código:** [github.com/diegoso4/ngx-orbit](https://github.com/diegoso4/ngx-orbit)\n- **Documentación extendida:** [ngx-orbit-tour — docs](https://github.com/diegoso4/ngx-orbit/blob/main/projects/ngx-orbit-tour/docs/ngx-orbit-tour.md)\n\n---\n\n## Licencia 📄\n\n[MIT](https://github.com/diegoso4/ngx-orbit/blob/main/LICENSE) · © Diego Osorio\n","readmeFilename":"README.md","_rev":"1-58f655d29942d88128fd9aa57be26c4b"}