@styloviz/product-tour 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# @styloviz/product-tour
+
+> 8 onboarding variants: modal (free) plus slideshow, tooltip, spotlight, beacon, checklist, progress steps and announcement (Pro). Portal-based overlay with keyboard navigation.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/product-tour
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvProductTourComponent } from '@styloviz/product-tour';
+
+@Component({
+  standalone: true,
+  imports: [SvProductTourComponent],
+  template: `
+    <sv-product-tour [steps]="steps" [active]="touring" (complete)="finish()" (skip)="finish()" />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `steps` | `TourStep[]` | `[]` | Step definitions. |
+| `variant` | `TourVariant` | `'modal'` | Visual variant. Free tier supports `'modal'` only. |
+| `active` | `boolean (two-way)` | `false` | Two-way: controls tour visibility. Set to `true` to launch the tour. |
+| `stepIndex` | `number (two-way)` | `0` | Two-way: current step index. |
+| `nextLabel` | `string` | `'Next'` | — |
+| `prevLabel` | `string` | `'Back'` | — |
+| `skipLabel` | `string` | `'Skip tour'` | — |
+| `doneLabel` | `string` | `'Done'` | — |
+| `allowSkip` | `boolean` | `true` | Show the skip / close controls. |
+| `showStepCount` | `boolean` | `true` | Show the "step X of N" counter. |
+| `showProgress` | `boolean` | `true` | Show the dot progress indicator. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `stepChange` | `number` | Fires with the new step index whenever navigation occurs. |
+| `complete` | `void` | Fires when the last step is confirmed (Next on final step). |
+| `skip` | `void` | Fires when the user explicitly skips the tour. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/product-tour
+
+## License
+
+MIT

package/fesm2022/styloviz-product-tour.mjs

@@ -0,0 +1,236 @@
+import * as i0 from '@angular/core';
+import { input, model, output, inject, ApplicationRef, computed, effect, HostListener, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * SvProductTourComponent — Onboarding & product-tour overlay (Free tier).
+ *
+ * Ships the **modal** variant: a centered lightbox dialog with an optional
+ * image, icon, tag badge, dot pagination, skip control and CTA link. The
+ * card is rendered into `document.body` via an `ApplicationRef` portal so it
+ * escapes every `overflow` / `transform` / `z-index` stacking context, and it
+ * behaves like a dialog: focus moves inside on open, Tab is trapped, and focus
+ * is restored on close.
+ *
+ * The Pro package (`@styloviz-pro/product-tour`) adds seven further variants:
+ * slideshow, tooltip, spotlight, beacon, checklist, progress-steps and
+ * announcement.
+ *
+ * @example
+ * <sv-product-tour
+ *   [(active)]="tourOpen"
+ *   [(stepIndex)]="tourStep"
+ *   [steps]="tourSteps"
+ *   (complete)="onTourDone()"
+ * />
+ */
+class SvProductTourComponent {
+    // ── Inputs ─────────────────────────────────────────────────────────────────
+    /** Step definitions. */
+    steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /** Visual variant. Free tier supports `'modal'` only. */
+    variant = input('modal', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Two-way: controls tour visibility. Set to `true` to launch the tour. */
+    active = model(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Two-way: current step index. */
+    stepIndex = model(0, ...(ngDevMode ? [{ debugName: "stepIndex" }] : /* istanbul ignore next */ []));
+    // ── Labels (override for i18n) ─────────────────────────────────────────────
+    nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    prevLabel = input('Back', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
+    skipLabel = input('Skip tour', ...(ngDevMode ? [{ debugName: "skipLabel" }] : /* istanbul ignore next */ []));
+    doneLabel = input('Done', ...(ngDevMode ? [{ debugName: "doneLabel" }] : /* istanbul ignore next */ []));
+    // ── Behaviour ──────────────────────────────────────────────────────────────
+    /** Show the skip / close controls. */
+    allowSkip = input(true, ...(ngDevMode ? [{ debugName: "allowSkip" }] : /* istanbul ignore next */ []));
+    /** Show the "step X of N" counter. */
+    showStepCount = input(true, ...(ngDevMode ? [{ debugName: "showStepCount" }] : /* istanbul ignore next */ []));
+    /** Show the dot progress indicator. */
+    showProgress = input(true, ...(ngDevMode ? [{ debugName: "showProgress" }] : /* istanbul ignore next */ []));
+    // ── Outputs ────────────────────────────────────────────────────────────────
+    /** Fires with the new step index whenever navigation occurs. */
+    stepChange = output();
+    /** Fires when the last step is confirmed (Next on final step). */
+    complete = output();
+    /** Fires when the user explicitly skips the tour. */
+    skip = output();
+    // ── Template refs ──────────────────────────────────────────────────────────
+    tourTpl;
+    // ── Services ───────────────────────────────────────────────────────────────
+    appRef = inject(ApplicationRef);
+    // ── Portal state ───────────────────────────────────────────────────────────
+    portalEl = null;
+    portalView = null;
+    /** Element focused before the tour opened, restored when it closes. */
+    _previouslyFocused = null;
+    // ── Computed ───────────────────────────────────────────────────────────────
+    currentStep = computed(() => this.steps()[this.stepIndex()] ?? null, ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    isFirstStep = computed(() => this.stepIndex() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : /* istanbul ignore next */ []));
+    isLastStep = computed(() => this.stepIndex() >= this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : /* istanbul ignore next */ []));
+    tagColorClass = computed(() => {
+        const map = {
+            blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+            green: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+            purple: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+            amber: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
+            rose: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
+        };
+        return (color) => map[color ?? 'blue'];
+    }, ...(ngDevMode ? [{ debugName: "tagColorClass" }] : /* istanbul ignore next */ []));
+    // ── Constructor ────────────────────────────────────────────────────────────
+    constructor() {
+        // Attach / detach portal as `active` changes (+ focus management).
+        effect(() => {
+            if (this.active()) {
+                if (typeof document !== 'undefined') {
+                    this._previouslyFocused = document.activeElement;
+                }
+                Promise.resolve().then(() => this._attachPortal());
+            }
+            else {
+                this._detachPortal();
+                this._previouslyFocused?.focus?.();
+                this._previouslyFocused = null;
+            }
+        });
+    }
+    // ── Navigation ─────────────────────────────────────────────────────────────
+    goNext() {
+        if (this.isLastStep()) {
+            this._finish();
+        }
+        else {
+            this._setStep(this.stepIndex() + 1);
+        }
+    }
+    goPrev() {
+        if (!this.isFirstStep())
+            this._setStep(this.stepIndex() - 1);
+    }
+    goToStep(idx) {
+        this._setStep(Math.max(0, Math.min(idx, this.steps().length - 1)));
+    }
+    skipTour() {
+        this.active.set(false);
+        this.skip.emit();
+    }
+    dismiss() {
+        this.active.set(false);
+    }
+    // ── Keyboard ───────────────────────────────────────────────────────────────
+    onKeydown(e) {
+        if (!this.active())
+            return;
+        // Trap Tab focus within the portalled dialog card.
+        if (e.key === 'Tab') {
+            const focusable = this._focusablesIn(this.portalEl);
+            if (focusable.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const activeEl = this.portalEl?.getRootNode()?.activeElement
+                ?? document.activeElement;
+            if (e.shiftKey && activeEl === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && activeEl === last) {
+                e.preventDefault();
+                first.focus();
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                e.preventDefault();
+                this.goNext();
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                e.preventDefault();
+                this.goPrev();
+                break;
+            case 'Escape':
+                if (this.allowSkip())
+                    this.skipTour();
+                break;
+        }
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    ngOnDestroy() {
+        this._detachPortal();
+    }
+    // ── Private — navigation ───────────────────────────────────────────────────
+    _setStep(idx) {
+        this.stepIndex.set(idx);
+        this.stepChange.emit(idx);
+        this.portalView?.detectChanges();
+    }
+    _finish() {
+        this.active.set(false);
+        this.stepIndex.set(0);
+        this.complete.emit();
+    }
+    // ── Private — portal ──────────────────────────────────────────────────────
+    _attachPortal() {
+        if (this.portalEl) {
+            this.portalView?.detectChanges();
+            return;
+        }
+        const el = document.createElement('div');
+        document.body.appendChild(el);
+        this.portalEl = el;
+        const view = this.tourTpl.createEmbeddedView({});
+        this.appRef.attachView(view);
+        view.rootNodes.forEach(n => el.appendChild(n));
+        this.portalView = view;
+        view.detectChanges();
+        // Move focus into the dialog card so keyboard / SR users land inside.
+        setTimeout(() => {
+            const first = this._focusableIn(this.portalEl);
+            first?.focus();
+        }, 30);
+    }
+    /** First focusable element inside the given container, if any. */
+    _focusableIn(container) {
+        if (!container)
+            return null;
+        return container.querySelector('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');
+    }
+    _focusablesIn(container) {
+        if (!container)
+            return [];
+        return Array.from(container.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'));
+    }
+    _detachPortal() {
+        if (this.portalView) {
+            this.appRef.detachView(this.portalView);
+            this.portalView.destroy();
+            this.portalView = null;
+        }
+        if (this.portalEl) {
+            this.portalEl.remove();
+            this.portalEl = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvProductTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvProductTourComponent, isStandalone: true, selector: "sv-product-tour", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, stepIndex: { classPropertyName: "stepIndex", publicName: "stepIndex", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLabel: { classPropertyName: "skipLabel", publicName: "skipLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null }, allowSkip: { classPropertyName: "allowSkip", publicName: "allowSkip", isSignal: true, isRequired: false, transformFunction: null }, showStepCount: { classPropertyName: "showStepCount", publicName: "showStepCount", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", stepIndex: "stepIndexChange", stepChange: "stepChange", complete: "complete", skip: "skip" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "tourTpl", first: true, predicate: ["tourTpl"], descendants: true }], ngImport: i0, template: "<!--\n  SvProductTourComponent (Free) \u2014 all visual output lives inside #tourTpl.\n  The template is appended to document.body via ApplicationRef portal,\n  escaping every overflow / transform / z-index stacking context.\n\n  Free tier ships the MODAL variant only. The full set of eight variants\n  lives in @styloviz-pro/product-tour.\n-->\n\n<ng-template #tourTpl>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MODAL \u2014 centered lightbox dialog\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 z-[9990] bg-black/50 backdrop-blur-sm\"\n    (click)=\"allowSkip() && skipTour()\"\n  ></div>\n\n  <!-- Dialog -->\n  <div\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"currentStep()?.title\"\n    class=\"fixed inset-0 z-[9991] flex items-center justify-center p-4 pointer-events-none\"\n  >\n    <div class=\"pointer-events-auto w-full max-w-lg rounded-2xl overflow-hidden\n                bg-white shadow-2xl ring-1 ring-black/10\n                dark:bg-gray-900 dark:ring-white/10\">\n\n      <!-- Optional step image -->\n      @if (currentStep()?.imageUrl) {\n        <div class=\"relative h-52 overflow-hidden bg-gray-100 dark:bg-gray-800\">\n          <img\n            [src]=\"currentStep()!.imageUrl\"\n            [alt]=\"currentStep()!.title\"\n            class=\"w-full h-full object-cover\"\n          />\n          <!-- Step count badge over image -->\n          @if (showStepCount() && steps().length > 1) {\n            <span class=\"absolute top-3 right-3 rounded-full bg-black/50 px-2.5 py-1\n                         text-[11px] font-medium text-white backdrop-blur-sm\">\n              {{ stepIndex() + 1 }} / {{ steps().length }}\n            </span>\n          }\n        </div>\n      }\n\n      <div class=\"px-7 pt-6 pb-7 flex flex-col gap-4\">\n        <!-- Tag + step count (no image case) -->\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            @if (currentStep()?.tag) {\n              <span class=\"rounded-full px-2.5 py-0.5 text-[11px] font-semibold\n                           {{ tagColorClass()(currentStep()!.tagColor) }}\">\n                {{ currentStep()!.tag }}\n              </span>\n            }\n          </div>\n          @if (showStepCount() && steps().length > 1 && !currentStep()?.imageUrl) {\n            <span class=\"text-xs text-gray-500 dark:text-gray-400\">\n              {{ stepIndex() + 1 }} / {{ steps().length }}\n            </span>\n          }\n          <!-- Close button -->\n          @if (allowSkip()) {\n            <button\n              type=\"button\"\n              aria-label=\"Skip tour\"\n              (click)=\"skipTour()\"\n              class=\"flex items-center justify-center w-7 h-7 rounded-full\n                     text-gray-400 hover:text-gray-600 hover:bg-gray-100\n                     dark:hover:bg-gray-800 dark:hover:text-gray-300 transition\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" class=\"w-4 h-4\">\n                <path d=\"M3 3l10 10M13 3L3 13\"/>\n              </svg>\n            </button>\n          }\n        </div>\n\n        <!-- Icon (no image) -->\n        @if (currentStep()?.icon && !currentStep()?.imageUrl) {\n          <div class=\"flex h-11 w-11 items-center justify-center rounded-xl\n                      bg-blue-50 dark:bg-blue-900/30\">\n            <span class=\"text-2xl\">{{ currentStep()!.icon }}</span>\n          </div>\n        }\n\n        <!-- Title + content -->\n        <div class=\"flex flex-col gap-2\">\n          <h2 class=\"text-xl font-bold text-gray-900 dark:text-gray-50 leading-snug\">\n            {{ currentStep()?.title }}\n          </h2>\n          <p class=\"text-sm text-gray-500 dark:text-gray-400 leading-relaxed whitespace-pre-line\">\n            {{ currentStep()?.content }}\n          </p>\n        </div>\n\n        <!-- Optional CTA link -->\n        @if (currentStep()?.actionLabel && currentStep()?.actionUrl) {\n          <a\n            [href]=\"currentStep()!.actionUrl\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"inline-flex items-center gap-1.5 text-sm font-medium text-blue-600\n                   dark:text-blue-400 hover:underline\"\n          >\n            {{ currentStep()!.actionLabel }}\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" class=\"w-3.5 h-3.5\">\n              <path d=\"M7 3H3v10h10V9M9 3h4v4M13 3L8 8\"/>\n            </svg>\n          </a>\n        }\n\n        <!-- Progress dots -->\n        @if (showProgress() && steps().length > 1) {\n          <div class=\"flex items-center gap-1.5\">\n            @for (s of steps(); track s.id; let i = $index) {\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"'Go to step ' + (i + 1)\"\n                (click)=\"goToStep(i)\"\n                class=\"rounded-full transition-all duration-200\n                       {{ i === stepIndex()\n                         ? 'w-5 h-2 bg-blue-500'\n                         : 'w-2 h-2 bg-gray-200 dark:bg-gray-700 hover:bg-blue-300' }}\"\n              ></button>\n            }\n          </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"flex items-center justify-between pt-1\">\n          <div>\n            @if (allowSkip() && !isLastStep()) {\n              <button\n                type=\"button\"\n                (click)=\"skipTour()\"\n                class=\"text-sm text-gray-400 hover:text-gray-600\n                       dark:text-gray-500 dark:hover:text-gray-300 transition\"\n              >{{ skipLabel() }}</button>\n            }\n          </div>\n          <div class=\"flex items-center gap-2\">\n            @if (!isFirstStep()) {\n              <button\n                type=\"button\"\n                (click)=\"goPrev()\"\n                class=\"px-4 py-2 rounded-lg text-sm font-medium text-gray-600\n                       hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition\"\n              >{{ prevLabel() }}</button>\n            }\n            <button\n              type=\"button\"\n              (click)=\"goNext()\"\n              class=\"inline-flex items-center gap-1.5 px-5 py-2 rounded-lg text-sm font-semibold\n                     bg-blue-600 text-white hover:bg-blue-700 active:scale-95 transition\n                     shadow-sm shadow-blue-500/30\"\n            >\n              {{ isLastStep() ? doneLabel() : nextLabel() }}\n              @if (!isLastStep()) {\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                     stroke-width=\"2.5\" stroke-linecap=\"round\" class=\"w-3.5 h-3.5\">\n                  <path d=\"M3 8h10M9 4l4 4-4 4\"/>\n                </svg>\n              }\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvProductTourComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-product-tour', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  SvProductTourComponent (Free) \u2014 all visual output lives inside #tourTpl.\n  The template is appended to document.body via ApplicationRef portal,\n  escaping every overflow / transform / z-index stacking context.\n\n  Free tier ships the MODAL variant only. The full set of eight variants\n  lives in @styloviz-pro/product-tour.\n-->\n\n<ng-template #tourTpl>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MODAL \u2014 centered lightbox dialog\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 z-[9990] bg-black/50 backdrop-blur-sm\"\n    (click)=\"allowSkip() && skipTour()\"\n  ></div>\n\n  <!-- Dialog -->\n  <div\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"currentStep()?.title\"\n    class=\"fixed inset-0 z-[9991] flex items-center justify-center p-4 pointer-events-none\"\n  >\n    <div class=\"pointer-events-auto w-full max-w-lg rounded-2xl overflow-hidden\n                bg-white shadow-2xl ring-1 ring-black/10\n                dark:bg-gray-900 dark:ring-white/10\">\n\n      <!-- Optional step image -->\n      @if (currentStep()?.imageUrl) {\n        <div class=\"relative h-52 overflow-hidden bg-gray-100 dark:bg-gray-800\">\n          <img\n            [src]=\"currentStep()!.imageUrl\"\n            [alt]=\"currentStep()!.title\"\n            class=\"w-full h-full object-cover\"\n          />\n          <!-- Step count badge over image -->\n          @if (showStepCount() && steps().length > 1) {\n            <span class=\"absolute top-3 right-3 rounded-full bg-black/50 px-2.5 py-1\n                         text-[11px] font-medium text-white backdrop-blur-sm\">\n              {{ stepIndex() + 1 }} / {{ steps().length }}\n            </span>\n          }\n        </div>\n      }\n\n      <div class=\"px-7 pt-6 pb-7 flex flex-col gap-4\">\n        <!-- Tag + step count (no image case) -->\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            @if (currentStep()?.tag) {\n              <span class=\"rounded-full px-2.5 py-0.5 text-[11px] font-semibold\n                           {{ tagColorClass()(currentStep()!.tagColor) }}\">\n                {{ currentStep()!.tag }}\n              </span>\n            }\n          </div>\n          @if (showStepCount() && steps().length > 1 && !currentStep()?.imageUrl) {\n            <span class=\"text-xs text-gray-500 dark:text-gray-400\">\n              {{ stepIndex() + 1 }} / {{ steps().length }}\n            </span>\n          }\n          <!-- Close button -->\n          @if (allowSkip()) {\n            <button\n              type=\"button\"\n              aria-label=\"Skip tour\"\n              (click)=\"skipTour()\"\n              class=\"flex items-center justify-center w-7 h-7 rounded-full\n                     text-gray-400 hover:text-gray-600 hover:bg-gray-100\n                     dark:hover:bg-gray-800 dark:hover:text-gray-300 transition\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" class=\"w-4 h-4\">\n                <path d=\"M3 3l10 10M13 3L3 13\"/>\n              </svg>\n            </button>\n          }\n        </div>\n\n        <!-- Icon (no image) -->\n        @if (currentStep()?.icon && !currentStep()?.imageUrl) {\n          <div class=\"flex h-11 w-11 items-center justify-center rounded-xl\n                      bg-blue-50 dark:bg-blue-900/30\">\n            <span class=\"text-2xl\">{{ currentStep()!.icon }}</span>\n          </div>\n        }\n\n        <!-- Title + content -->\n        <div class=\"flex flex-col gap-2\">\n          <h2 class=\"text-xl font-bold text-gray-900 dark:text-gray-50 leading-snug\">\n            {{ currentStep()?.title }}\n          </h2>\n          <p class=\"text-sm text-gray-500 dark:text-gray-400 leading-relaxed whitespace-pre-line\">\n            {{ currentStep()?.content }}\n          </p>\n        </div>\n\n        <!-- Optional CTA link -->\n        @if (currentStep()?.actionLabel && currentStep()?.actionUrl) {\n          <a\n            [href]=\"currentStep()!.actionUrl\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"inline-flex items-center gap-1.5 text-sm font-medium text-blue-600\n                   dark:text-blue-400 hover:underline\"\n          >\n            {{ currentStep()!.actionLabel }}\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" class=\"w-3.5 h-3.5\">\n              <path d=\"M7 3H3v10h10V9M9 3h4v4M13 3L8 8\"/>\n            </svg>\n          </a>\n        }\n\n        <!-- Progress dots -->\n        @if (showProgress() && steps().length > 1) {\n          <div class=\"flex items-center gap-1.5\">\n            @for (s of steps(); track s.id; let i = $index) {\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"'Go to step ' + (i + 1)\"\n                (click)=\"goToStep(i)\"\n                class=\"rounded-full transition-all duration-200\n                       {{ i === stepIndex()\n                         ? 'w-5 h-2 bg-blue-500'\n                         : 'w-2 h-2 bg-gray-200 dark:bg-gray-700 hover:bg-blue-300' }}\"\n              ></button>\n            }\n          </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"flex items-center justify-between pt-1\">\n          <div>\n            @if (allowSkip() && !isLastStep()) {\n              <button\n                type=\"button\"\n                (click)=\"skipTour()\"\n                class=\"text-sm text-gray-400 hover:text-gray-600\n                       dark:text-gray-500 dark:hover:text-gray-300 transition\"\n              >{{ skipLabel() }}</button>\n            }\n          </div>\n          <div class=\"flex items-center gap-2\">\n            @if (!isFirstStep()) {\n              <button\n                type=\"button\"\n                (click)=\"goPrev()\"\n                class=\"px-4 py-2 rounded-lg text-sm font-medium text-gray-600\n                       hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition\"\n              >{{ prevLabel() }}</button>\n            }\n            <button\n              type=\"button\"\n              (click)=\"goNext()\"\n              class=\"inline-flex items-center gap-1.5 px-5 py-2 rounded-lg text-sm font-semibold\n                     bg-blue-600 text-white hover:bg-blue-700 active:scale-95 transition\n                     shadow-sm shadow-blue-500/30\"\n            >\n              {{ isLastStep() ? doneLabel() : nextLabel() }}\n              @if (!isLastStep()) {\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                     stroke-width=\"2.5\" stroke-linecap=\"round\" class=\"w-3.5 h-3.5\">\n                  <path d=\"M3 8h10M9 4l4 4-4 4\"/>\n                </svg>\n              }\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], stepIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepIndex", required: false }] }, { type: i0.Output, args: ["stepIndexChange"] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], skipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], allowSkip: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSkip", required: false }] }], showStepCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStepCount", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], complete: [{ type: i0.Output, args: ["complete"] }], skip: [{ type: i0.Output, args: ["skip"] }], tourTpl: [{
+                type: ViewChild,
+                args: ['tourTpl']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvProductTourComponent };
+//# sourceMappingURL=styloviz-product-tour.mjs.map

package/fesm2022/styloviz-product-tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-product-tour.mjs","sources":["../../../../projects/product-tour-free/src/lib/product-tour.component.ts","../../../../projects/product-tour-free/src/lib/product-tour.component.html","../../../../projects/product-tour-free/src/styloviz-product-tour.ts"],"sourcesContent":["import {\n  ApplicationRef,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  EmbeddedViewRef,\n  HostListener,\n  inject,\n  input,\n  model,\n  OnDestroy,\n  output,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\n\nimport type { TourVariant } from './product-tour.types';\nimport { type TourStep } from './product-tour.types';\n\n// Re-export types so consumers can import from the component file if desired.\nexport type { TourVariant, TourPlacement, TourStep } from './product-tour.types';\n\n/**\n * SvProductTourComponent — Onboarding & product-tour overlay (Free tier).\n *\n * Ships the **modal** variant: a centered lightbox dialog with an optional\n * image, icon, tag badge, dot pagination, skip control and CTA link. The\n * card is rendered into `document.body` via an `ApplicationRef` portal so it\n * escapes every `overflow` / `transform` / `z-index` stacking context, and it\n * behaves like a dialog: focus moves inside on open, Tab is trapped, and focus\n * is restored on close.\n *\n * The Pro package (`@styloviz-pro/product-tour`) adds seven further variants:\n * slideshow, tooltip, spotlight, beacon, checklist, progress-steps and\n * announcement.\n *\n * @example\n * <sv-product-tour\n *   [(active)]=\"tourOpen\"\n *   [(stepIndex)]=\"tourStep\"\n *   [steps]=\"tourSteps\"\n *   (complete)=\"onTourDone()\"\n * />\n */\n@Component({\n  selector: 'sv-product-tour',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './product-tour.component.html',\n})\nexport class SvProductTourComponent implements OnDestroy {\n\n  // ── Inputs ─────────────────────────────────────────────────────────────────\n\n  /** Step definitions. */\n  steps = input<TourStep[]>([]);\n  /** Visual variant. Free tier supports `'modal'` only. */\n  variant = input<TourVariant>('modal');\n  /** Two-way: controls tour visibility. Set to `true` to launch the tour. */\n  active = model<boolean>(false);\n  /** Two-way: current step index. */\n  stepIndex = model<number>(0);\n\n  // ── Labels (override for i18n) ─────────────────────────────────────────────\n\n  nextLabel = input('Next');\n  prevLabel = input('Back');\n  skipLabel = input('Skip tour');\n  doneLabel = input('Done');\n\n  // ── Behaviour ──────────────────────────────────────────────────────────────\n\n  /** Show the skip / close controls. */\n  allowSkip     = input(true);\n  /** Show the \"step X of N\" counter. */\n  showStepCount = input(true);\n  /** Show the dot progress indicator. */\n  showProgress  = input(true);\n\n  // ── Outputs ────────────────────────────────────────────────────────────────\n\n  /** Fires with the new step index whenever navigation occurs. */\n  readonly stepChange = output<number>();\n  /** Fires when the last step is confirmed (Next on final step). */\n  readonly complete   = output<void>();\n  /** Fires when the user explicitly skips the tour. */\n  readonly skip       = output<void>();\n\n  // ── Template refs ──────────────────────────────────────────────────────────\n\n  @ViewChild('tourTpl') private tourTpl!: TemplateRef<unknown>;\n\n  // ── Services ───────────────────────────────────────────────────────────────\n\n  private readonly appRef = inject(ApplicationRef);\n\n  // ── Portal state ───────────────────────────────────────────────────────────\n\n  private portalEl:     HTMLDivElement | null           = null;\n  protected portalView: EmbeddedViewRef<unknown> | null = null;\n\n  /** Element focused before the tour opened, restored when it closes. */\n  private _previouslyFocused: HTMLElement | null = null;\n\n  // ── Computed ───────────────────────────────────────────────────────────────\n\n  readonly currentStep = computed((): TourStep | null => this.steps()[this.stepIndex()] ?? null);\n  readonly isFirstStep = computed(() => this.stepIndex() === 0);\n  readonly isLastStep  = computed(() => this.stepIndex() >= this.steps().length - 1);\n\n  readonly tagColorClass = computed(() => {\n    const map: Record<NonNullable<TourStep['tagColor']>, string> = {\n      blue:   'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',\n      green:  'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',\n      purple: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',\n      amber:  'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',\n      rose:   'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',\n    };\n    return (color: TourStep['tagColor']) => map[color ?? 'blue'];\n  });\n\n  // ── Constructor ────────────────────────────────────────────────────────────\n\n  constructor() {\n    // Attach / detach portal as `active` changes (+ focus management).\n    effect(() => {\n      if (this.active()) {\n        if (typeof document !== 'undefined') {\n          this._previouslyFocused = document.activeElement as HTMLElement | null;\n        }\n        Promise.resolve().then(() => this._attachPortal());\n      } else {\n        this._detachPortal();\n        this._previouslyFocused?.focus?.();\n        this._previouslyFocused = null;\n      }\n    });\n  }\n\n  // ── Navigation ─────────────────────────────────────────────────────────────\n\n  goNext(): void {\n    if (this.isLastStep()) {\n      this._finish();\n    } else {\n      this._setStep(this.stepIndex() + 1);\n    }\n  }\n\n  goPrev(): void {\n    if (!this.isFirstStep()) this._setStep(this.stepIndex() - 1);\n  }\n\n  goToStep(idx: number): void {\n    this._setStep(Math.max(0, Math.min(idx, this.steps().length - 1)));\n  }\n\n  skipTour(): void {\n    this.active.set(false);\n    this.skip.emit();\n  }\n\n  dismiss(): void {\n    this.active.set(false);\n  }\n\n  // ── Keyboard ───────────────────────────────────────────────────────────────\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(e: KeyboardEvent): void {\n    if (!this.active()) return;\n\n    // Trap Tab focus within the portalled dialog card.\n    if (e.key === 'Tab') {\n      const focusable = this._focusablesIn(this.portalEl);\n      if (focusable.length === 0) { e.preventDefault(); return; }\n      const first = focusable[0];\n      const last  = focusable[focusable.length - 1];\n      const activeEl = (this.portalEl?.getRootNode() as Document | ShadowRoot)?.activeElement\n                       ?? document.activeElement;\n      if (e.shiftKey && activeEl === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && activeEl === last) {\n        e.preventDefault();\n        first.focus();\n      }\n      return;\n    }\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        e.preventDefault();\n        this.goNext();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        e.preventDefault();\n        this.goPrev();\n        break;\n      case 'Escape':\n        if (this.allowSkip()) this.skipTour();\n        break;\n    }\n  }\n\n  // ── Lifecycle ──────────────────────────────────────────────────────────────\n\n  ngOnDestroy(): void {\n    this._detachPortal();\n  }\n\n  // ── Private — navigation ───────────────────────────────────────────────────\n\n  private _setStep(idx: number): void {\n    this.stepIndex.set(idx);\n    this.stepChange.emit(idx);\n    this.portalView?.detectChanges();\n  }\n\n  private _finish(): void {\n    this.active.set(false);\n    this.stepIndex.set(0);\n    this.complete.emit();\n  }\n\n  // ── Private — portal ──────────────────────────────────────────────────────\n\n  private _attachPortal(): void {\n    if (this.portalEl) {\n      this.portalView?.detectChanges();\n      return;\n    }\n    const el = document.createElement('div');\n    document.body.appendChild(el);\n    this.portalEl = el;\n    const view = this.tourTpl.createEmbeddedView({});\n    this.appRef.attachView(view);\n    (view.rootNodes as Node[]).forEach(n => el.appendChild(n));\n    this.portalView = view;\n\n    view.detectChanges();\n\n    // Move focus into the dialog card so keyboard / SR users land inside.\n    setTimeout(() => {\n      const first = this._focusableIn(this.portalEl);\n      first?.focus();\n    }, 30);\n  }\n\n  /** First focusable element inside the given container, if any. */\n  private _focusableIn(container: HTMLElement | null): HTMLElement | null {\n    if (!container) return null;\n    return container.querySelector<HTMLElement>(\n      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n    );\n  }\n\n  private _focusablesIn(container: HTMLElement | null): HTMLElement[] {\n    if (!container) return [];\n    return Array.from(\n      container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n      )\n    );\n  }\n\n  private _detachPortal(): void {\n    if (this.portalView) {\n      this.appRef.detachView(this.portalView);\n      this.portalView.destroy();\n      this.portalView = null;\n    }\n    if (this.portalEl) {\n      this.portalEl.remove();\n      this.portalEl = null;\n    }\n  }\n}\n","<!--\n  SvProductTourComponent (Free) — all visual output lives inside #tourTpl.\n  The template is appended to document.body via ApplicationRef portal,\n  escaping every overflow / transform / z-index stacking context.\n\n  Free tier ships the MODAL variant only. The full set of eight variants\n  lives in @styloviz-pro/product-tour.\n-->\n\n<ng-template #tourTpl>\n\n  <!-- ══════════════════════════════════════════════════════════════════════\n       MODAL — centered lightbox dialog\n       ════════════════════════════════════════════════════════════════════ -->\n\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 z-[9990] bg-black/50 backdrop-blur-sm\"\n    (click)=\"allowSkip() && skipTour()\"\n  ></div>\n\n  <!-- Dialog -->\n  <div\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"currentStep()?.title\"\n    class=\"fixed inset-0 z-[9991] flex items-center justify-center p-4 pointer-events-none\"\n  >\n    <div class=\"pointer-events-auto w-full max-w-lg rounded-2xl overflow-hidden\n                bg-white shadow-2xl ring-1 ring-black/10\n                dark:bg-gray-900 dark:ring-white/10\">\n\n      <!-- Optional step image -->\n      @if (currentStep()?.imageUrl) {\n        <div class=\"relative h-52 overflow-hidden bg-gray-100 dark:bg-gray-800\">\n          <img\n            [src]=\"currentStep()!.imageUrl\"\n            [alt]=\"currentStep()!.title\"\n            class=\"w-full h-full object-cover\"\n          />\n          <!-- Step count badge over image -->\n          @if (showStepCount() && steps().length > 1) {\n            <span class=\"absolute top-3 right-3 rounded-full bg-black/50 px-2.5 py-1\n                         text-[11px] font-medium text-white backdrop-blur-sm\">\n              {{ stepIndex() + 1 }} / {{ steps().length }}\n            </span>\n          }\n        </div>\n      }\n\n      <div class=\"px-7 pt-6 pb-7 flex flex-col gap-4\">\n        <!-- Tag + step count (no image case) -->\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            @if (currentStep()?.tag) {\n              <span class=\"rounded-full px-2.5 py-0.5 text-[11px] font-semibold\n                           {{ tagColorClass()(currentStep()!.tagColor) }}\">\n                {{ currentStep()!.tag }}\n              </span>\n            }\n          </div>\n          @if (showStepCount() && steps().length > 1 && !currentStep()?.imageUrl) {\n            <span class=\"text-xs text-gray-500 dark:text-gray-400\">\n              {{ stepIndex() + 1 }} / {{ steps().length }}\n            </span>\n          }\n          <!-- Close button -->\n          @if (allowSkip()) {\n            <button\n              type=\"button\"\n              aria-label=\"Skip tour\"\n              (click)=\"skipTour()\"\n              class=\"flex items-center justify-center w-7 h-7 rounded-full\n                     text-gray-400 hover:text-gray-600 hover:bg-gray-100\n                     dark:hover:bg-gray-800 dark:hover:text-gray-300 transition\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" class=\"w-4 h-4\">\n                <path d=\"M3 3l10 10M13 3L3 13\"/>\n              </svg>\n            </button>\n          }\n        </div>\n\n        <!-- Icon (no image) -->\n        @if (currentStep()?.icon && !currentStep()?.imageUrl) {\n          <div class=\"flex h-11 w-11 items-center justify-center rounded-xl\n                      bg-blue-50 dark:bg-blue-900/30\">\n            <span class=\"text-2xl\">{{ currentStep()!.icon }}</span>\n          </div>\n        }\n\n        <!-- Title + content -->\n        <div class=\"flex flex-col gap-2\">\n          <h2 class=\"text-xl font-bold text-gray-900 dark:text-gray-50 leading-snug\">\n            {{ currentStep()?.title }}\n          </h2>\n          <p class=\"text-sm text-gray-500 dark:text-gray-400 leading-relaxed whitespace-pre-line\">\n            {{ currentStep()?.content }}\n          </p>\n        </div>\n\n        <!-- Optional CTA link -->\n        @if (currentStep()?.actionLabel && currentStep()?.actionUrl) {\n          <a\n            [href]=\"currentStep()!.actionUrl\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"inline-flex items-center gap-1.5 text-sm font-medium text-blue-600\n                   dark:text-blue-400 hover:underline\"\n          >\n            {{ currentStep()!.actionLabel }}\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" class=\"w-3.5 h-3.5\">\n              <path d=\"M7 3H3v10h10V9M9 3h4v4M13 3L8 8\"/>\n            </svg>\n          </a>\n        }\n\n        <!-- Progress dots -->\n        @if (showProgress() && steps().length > 1) {\n          <div class=\"flex items-center gap-1.5\">\n            @for (s of steps(); track s.id; let i = $index) {\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"'Go to step ' + (i + 1)\"\n                (click)=\"goToStep(i)\"\n                class=\"rounded-full transition-all duration-200\n                       {{ i === stepIndex()\n                         ? 'w-5 h-2 bg-blue-500'\n                         : 'w-2 h-2 bg-gray-200 dark:bg-gray-700 hover:bg-blue-300' }}\"\n              ></button>\n            }\n          </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"flex items-center justify-between pt-1\">\n          <div>\n            @if (allowSkip() && !isLastStep()) {\n              <button\n                type=\"button\"\n                (click)=\"skipTour()\"\n                class=\"text-sm text-gray-400 hover:text-gray-600\n                       dark:text-gray-500 dark:hover:text-gray-300 transition\"\n              >{{ skipLabel() }}</button>\n            }\n          </div>\n          <div class=\"flex items-center gap-2\">\n            @if (!isFirstStep()) {\n              <button\n                type=\"button\"\n                (click)=\"goPrev()\"\n                class=\"px-4 py-2 rounded-lg text-sm font-medium text-gray-600\n                       hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition\"\n              >{{ prevLabel() }}</button>\n            }\n            <button\n              type=\"button\"\n              (click)=\"goNext()\"\n              class=\"inline-flex items-center gap-1.5 px-5 py-2 rounded-lg text-sm font-semibold\n                     bg-blue-600 text-white hover:bg-blue-700 active:scale-95 transition\n                     shadow-sm shadow-blue-500/30\"\n            >\n              {{ isLastStep() ? doneLabel() : nextLabel() }}\n              @if (!isLastStep()) {\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\n                     stroke-width=\"2.5\" stroke-linecap=\"round\" class=\"w-3.5 h-3.5\">\n                  <path d=\"M3 8h10M9 4l4 4-4 4\"/>\n                </svg>\n              }\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@styloviz/product-tour",
+  "version": "0.1.1",
+  "description": "8 onboarding variants: modal (free) plus slideshow, tooltip, spotlight, beacon, checklist, progress steps and announcement (Pro). Portal-based overlay with keyboard navigation.",
+  "keywords": [
+    "angular",
+    "tailwind",
+    "product-tour",
+    "onboarding"
+  ],
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/product-tour-free"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "module": "fesm2022/styloviz-product-tour.mjs",
+  "typings": "types/styloviz-product-tour.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-product-tour.d.ts",
+      "default": "./fesm2022/styloviz-product-tour.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-product-tour.d.ts

@@ -0,0 +1,141 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, EmbeddedViewRef } from '@angular/core';
+
+/**
+ * Visual variant of the product tour.
+ *
+ * The **free** tier ships the `modal` variant only. The full set of eight
+ * variants — slideshow, tooltip, spotlight, beacon, checklist, progress-steps
+ * and announcement — is available in `@styloviz-pro/product-tour`.
+ *
+ * | Variant | Description                                                 |
+ * |---------|-------------------------------------------------------------|
+ * | modal   | Centered lightbox dialog — image, rich text, dot pagination |
+ */
+type TourVariant = 'modal';
+/** Preferred tooltip / popover placement relative to the target element. */
+type TourPlacement = 'top' | 'bottom' | 'left' | 'right' | 'auto';
+/**
+ * A single step in a tour.
+ *
+ * The free `modal` variant uses `title`, `content`, `imageUrl`, `icon`, `tag`,
+ * `tagColor`, `actionLabel` and `actionUrl`. The positioning fields
+ * (`targetSelector`, `placement`) and behaviour flags (`completable`,
+ * `initiallyCompleted`, `accentColor`) are consumed by the Pro-only variants
+ * and are kept here so step data stays interchangeable when upgrading.
+ */
+interface TourStep {
+    /** Unique identifier — used as a key and for checklist completion tracking. */
+    readonly id: string;
+    /** Short heading shown in all variants. */
+    readonly title: string;
+    /** Body copy — HTML is NOT supported (XSS safe). Use `\n` for line breaks. */
+    readonly content: string;
+    /** CSS selector (`#id`, `.class`, `[data-attr]`) that identifies the target element. */
+    readonly targetSelector?: string;
+    /** Preferred tooltip placement. `'auto'` picks the side with the most space. */
+    readonly placement?: TourPlacement;
+    /** URL of an illustration or screenshot — shown in the `modal` variant. */
+    readonly imageUrl?: string;
+    /**
+     * SVG path data OR an emoji for the step icon.
+     * Used in `modal` steps without images.
+     */
+    readonly icon?: string;
+    /**
+     * Accent badge text, e.g. `"New"`, `"Pro"`, `"Step 1"`.
+     * Shown in the `modal` variant.
+     */
+    readonly tag?: string;
+    /** Tag colour. Defaults to `'blue'`. */
+    readonly tagColor?: 'blue' | 'green' | 'purple' | 'amber' | 'rose';
+    /** Checklist: whether this item can be manually checked off by the user. */
+    readonly completable?: boolean;
+    /** Checklist: pre-populate as already completed. */
+    readonly initiallyCompleted?: boolean;
+    /** `announcement` variant: accent colour of the banner strip. */
+    readonly accentColor?: 'blue' | 'indigo' | 'emerald' | 'amber' | 'rose';
+    /** Optional primary CTA button label in the `modal` variant. */
+    readonly actionLabel?: string;
+    /** Optional URL the CTA opens (blank tab). */
+    readonly actionUrl?: string;
+}
+
+/**
+ * SvProductTourComponent — Onboarding & product-tour overlay (Free tier).
+ *
+ * Ships the **modal** variant: a centered lightbox dialog with an optional
+ * image, icon, tag badge, dot pagination, skip control and CTA link. The
+ * card is rendered into `document.body` via an `ApplicationRef` portal so it
+ * escapes every `overflow` / `transform` / `z-index` stacking context, and it
+ * behaves like a dialog: focus moves inside on open, Tab is trapped, and focus
+ * is restored on close.
+ *
+ * The Pro package (`@styloviz-pro/product-tour`) adds seven further variants:
+ * slideshow, tooltip, spotlight, beacon, checklist, progress-steps and
+ * announcement.
+ *
+ * @example
+ * <sv-product-tour
+ *   [(active)]="tourOpen"
+ *   [(stepIndex)]="tourStep"
+ *   [steps]="tourSteps"
+ *   (complete)="onTourDone()"
+ * />
+ */
+declare class SvProductTourComponent implements OnDestroy {
+    /** Step definitions. */
+    steps: _angular_core.InputSignal<TourStep[]>;
+    /** Visual variant. Free tier supports `'modal'` only. */
+    variant: _angular_core.InputSignal<"modal">;
+    /** Two-way: controls tour visibility. Set to `true` to launch the tour. */
+    active: _angular_core.ModelSignal<boolean>;
+    /** Two-way: current step index. */
+    stepIndex: _angular_core.ModelSignal<number>;
+    nextLabel: _angular_core.InputSignal<string>;
+    prevLabel: _angular_core.InputSignal<string>;
+    skipLabel: _angular_core.InputSignal<string>;
+    doneLabel: _angular_core.InputSignal<string>;
+    /** Show the skip / close controls. */
+    allowSkip: _angular_core.InputSignal<boolean>;
+    /** Show the "step X of N" counter. */
+    showStepCount: _angular_core.InputSignal<boolean>;
+    /** Show the dot progress indicator. */
+    showProgress: _angular_core.InputSignal<boolean>;
+    /** Fires with the new step index whenever navigation occurs. */
+    readonly stepChange: _angular_core.OutputEmitterRef<number>;
+    /** Fires when the last step is confirmed (Next on final step). */
+    readonly complete: _angular_core.OutputEmitterRef<void>;
+    /** Fires when the user explicitly skips the tour. */
+    readonly skip: _angular_core.OutputEmitterRef<void>;
+    private tourTpl;
+    private readonly appRef;
+    private portalEl;
+    protected portalView: EmbeddedViewRef<unknown> | null;
+    /** Element focused before the tour opened, restored when it closes. */
+    private _previouslyFocused;
+    readonly currentStep: _angular_core.Signal<TourStep | null>;
+    readonly isFirstStep: _angular_core.Signal<boolean>;
+    readonly isLastStep: _angular_core.Signal<boolean>;
+    readonly tagColorClass: _angular_core.Signal<(color: TourStep["tagColor"]) => string>;
+    constructor();
+    goNext(): void;
+    goPrev(): void;
+    goToStep(idx: number): void;
+    skipTour(): void;
+    dismiss(): void;
+    onKeydown(e: KeyboardEvent): void;
+    ngOnDestroy(): void;
+    private _setStep;
+    private _finish;
+    private _attachPortal;
+    /** First focusable element inside the given container, if any. */
+    private _focusableIn;
+    private _focusablesIn;
+    private _detachPortal;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvProductTourComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvProductTourComponent, "sv-product-tour", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "stepIndex": { "alias": "stepIndex"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "skipLabel": { "alias": "skipLabel"; "required": false; "isSignal": true; }; "doneLabel": { "alias": "doneLabel"; "required": false; "isSignal": true; }; "allowSkip": { "alias": "allowSkip"; "required": false; "isSignal": true; }; "showStepCount": { "alias": "showStepCount"; "required": false; "isSignal": true; }; "showProgress": { "alias": "showProgress"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "stepIndex": "stepIndexChange"; "stepChange": "stepChange"; "complete": "complete"; "skip": "skip"; }, never, never, true, never>;
+}
+
+export { SvProductTourComponent };
+export type { TourPlacement, TourStep, TourVariant };