wontfix-sdk 0.0.1 → 0.0.2

package/fesm2022/wontfix-sdk.mjs

@@ -1,5 +1,1288 @@
 import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
+import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, inject, ApplicationRef, Injector, createComponent, Injectable } from '@angular/core';
+import { BehaviorSubject, firstValueFrom, filter, take } from 'rxjs';
+import { Router, NavigationEnd } from '@angular/router';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Mock tooltip data for demo purposes
+ * Paths are in format: tag_index/tag_index/.../
+ * Index indicates which child with that tag name (0-based)
+ * templateId: 1 = product tour, 2 = tooltip
+ */
+const MOCK_TOOLTIPS = [
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_0/div_0/button_0/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'hover',
+            position: 'top',
+            text: '💾 Save your work! All changes will be stored securely.'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_0/div_0/button_1/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'hover',
+            position: 'top',
+            text: '⚠️ Warning: This action cannot be undone!'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_0/div_0/button_2/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'hover',
+            position: 'top',
+            text: '🔄 Refresh the page to get latest updates'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_1/div_0/button_0/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'right',
+            text: '❓ Need help? Click here to view our documentation and FAQs.'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_1/div_0/button_1/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'right',
+            text: '⚙️ Configure app settings and preferences'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_1/div_0/button_2/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'right',
+            text: 'ℹ️ Learn more about Wontfix Tooltip SDK v1.0'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_2/form_0/div_0/input_0/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'right',
+            text: '📧 Enter a valid email address (e.g., user@example.com)'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_2/form_0/div_1/input_0/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'right',
+            text: '🔒 Use a strong password with at least 8 characters'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_2/form_0/div_2/input_0/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'right',
+            text: '✓ Must match the password above'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_3/div_0/button_0/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'top',
+            text: '⬆️ This tooltip appears at the TOP'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_3/div_0/button_1/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'right',
+            text: '➡️ This tooltip appears on the RIGHT'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_3/div_0/button_2/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'bottom',
+            text: '⬇️ This tooltip appears at the BOTTOM'
+        }
+    },
+    {
+        templateId: 2,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_3/div_0/button_3/',
+        pageUrl: '*',
+        metadata: {
+            interaction: 'click',
+            position: 'left',
+            text: '⬅️ This tooltip appears on the LEFT'
+        }
+    },
+    {
+        templateId: 1,
+        path: '*',
+        pageUrl: '/product-tour',
+        metadata: {
+            assetUrl: '/assets/product-tour.mp4',
+            header: 'Cool Product Tour',
+            buttonText: 'Awesome!'
+        }
+    },
+    {
+        templateId: 3,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_2/div_0/button_0/',
+        pageUrl: '*',
+        metadata: {
+            position: 'left',
+            label: ''
+        }
+    },
+    {
+        templateId: 3,
+        path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_2/div_0/button_1/',
+        pageUrl: '*',
+        metadata: {
+            position: 'right',
+            label: 'Hot'
+        }
+    },
+    {
+        templateId: 4,
+        path: '*',
+        pageUrl: '*',
+        metadata: {
+            title: 'Getting Started Tour',
+            steps: [
+                {
+                    path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_0/div_0/button_0/',
+                    position: 'bottom',
+                    title: 'Save Your Work',
+                    text: 'Click the Save button to securely store all your changes.',
+                    order: 1
+                },
+                {
+                    path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_0/div_0/button_1/',
+                    position: 'bottom',
+                    title: 'Delete Items',
+                    text: 'Use this button to permanently delete items. This action cannot be undone!',
+                    order: 2
+                },
+                {
+                    path: 'html_0/body_0/app-root_0/app-tooltip-demo_0/div_0/section_1/div_0/button_0/',
+                    position: 'right',
+                    title: 'Get Help',
+                    text: 'Need assistance? Click here to access our comprehensive help documentation.',
+                    order: 3
+                }
+            ]
+        }
+    },
+    {
+        templateId: 5,
+        path: '*',
+        pageUrl: '/popup-demo',
+        metadata: {
+            title: 'Welcome to Wontfix! 🎉',
+            text: 'We\'re excited to have you here. This popup demonstrates how you can show important announcements, feature updates, or onboarding messages to your users.',
+            buttonText: 'Got it'
+        }
+    }
+];
+
+/**
+ * Path matcher utility for DOM element targeting
+ * Matches elements based on their path in the DOM tree
+ *
+ * Path format: "body_0/app-root_0/app-tooltip-demo_0/div_0/button_1/"
+ * Numbers indicate the child index (0-based) among siblings of the same tag name
+ */
+class PathMatcher {
+    /**
+     * Find DOM element by path
+     * @param path DOM path like "html_0/body_0/div_0/button_1/"
+     * @returns The matching element or null
+     */
+    static findElementByPath(path) {
+        // Remove leading/trailing slashes and split
+        const segments = path.split('/').filter(s => s.length > 0);
+        if (segments.length === 0) {
+            return null;
+        }
+        // Start from the appropriate root
+        let currentElement = null;
+        let startIndex = 0;
+        // Check if first segment is the html element
+        if (segments[0].startsWith('html')) {
+            currentElement = document.documentElement;
+            startIndex = 1;
+        }
+        else if (segments[0].startsWith('body')) {
+            currentElement = document.body;
+            startIndex = 1;
+        }
+        else {
+            currentElement = document.documentElement;
+        }
+        // Process remaining segments
+        for (let i = startIndex; i < segments.length; i++) {
+            if (!currentElement) {
+                return null;
+            }
+            const segment = segments[i];
+            const [tagName, indexStr] = this.parseSegment(segment);
+            const index = parseInt(indexStr, 10);
+            // Find all children with the same tag name
+            const childrenWithTag = Array.from(currentElement.children).filter((child) => {
+                const matches = child.tagName.toLowerCase() === tagName.toLowerCase();
+                return matches;
+            });
+            // Get the element at the specified index
+            if (index >= 0 && index < childrenWithTag.length) {
+                currentElement = childrenWithTag[index];
+            }
+            else {
+                return null; // Index out of bounds
+            }
+        }
+        return currentElement instanceof HTMLElement ? currentElement : null;
+    }
+    /**
+     * Get the path for a given DOM element
+     * @param element The element to get the path for
+     * @returns Path string like "body_0/div_0/button_1/"
+     */
+    static getPathForElement(element) {
+        const segments = [];
+        let currentElement = element;
+        while (currentElement && currentElement !== document.documentElement) {
+            const parent = currentElement.parentElement;
+            if (!parent)
+                break;
+            // Count siblings with same tag name that come before this element
+            const siblings = Array.from(parent.children).filter((child) => child.tagName === currentElement.tagName);
+            const index = siblings.indexOf(currentElement);
+            if (index >= 0) {
+                segments.unshift(`${currentElement.tagName.toLowerCase()}_${index}`);
+            }
+            currentElement = parent;
+        }
+        // Add root element
+        if (currentElement === document.documentElement) {
+            segments.unshift(`${document.documentElement.tagName.toLowerCase()}_0`);
+        }
+        return segments.join('/') + '/';
+    }
+    /**
+     * Parse a path segment like "button_1" into ["button", "1"]
+     */
+    static parseSegment(segment) {
+        const lastUnderscoreIndex = segment.lastIndexOf('_');
+        if (lastUnderscoreIndex === -1) {
+            return [segment, '0'];
+        }
+        return [
+            segment.substring(0, lastUnderscoreIndex),
+            segment.substring(lastUnderscoreIndex + 1)
+        ];
+    }
+}
+
+class TooltipComponent {
+    tooltip;
+    close = new EventEmitter();
+    top = 0;
+    left = 0;
+    closeTooltip() {
+        this.close.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TooltipComponent, isStandalone: true, selector: "app-tooltip-popover", inputs: { tooltip: "tooltip" }, outputs: { close: "close" }, ngImport: i0, template: `
+    <div 
+      class="tooltip-container"
+      [ngClass]="'tooltip-' + tooltip.position"
+      [style.top.px]="top"
+      [style.left.px]="left"
+    >
+      <div class="tooltip-content">
+        {{ tooltip.text }}
+      </div>
+      <div class="tooltip-arrow"></div>
+    </div>
+  `, isInline: true, styles: [".tooltip-container{position:fixed;background-color:#333;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;z-index:9999;box-shadow:0 2px 8px #00000026;max-width:300px;word-wrap:break-word;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip-top{transform:translate(-50%) translateY(-100%)}.tooltip-top .tooltip-arrow{bottom:-4px;left:50%;transform:translate(-50%);border-width:4px 4px 0 4px;border-color:#333 transparent transparent transparent}.tooltip-bottom{transform:translate(-50%) translateY(8px)}.tooltip-bottom .tooltip-arrow{top:-4px;left:50%;transform:translate(-50%);border-width:0 4px 4px 4px;border-color:transparent transparent #333 transparent}.tooltip-left{transform:translate(-8px) translateY(-50%)}.tooltip-left .tooltip-arrow{right:-4px;top:50%;transform:translateY(-50%);border-width:4px 0 4px 4px;border-color:transparent transparent transparent #333}.tooltip-right{transform:translate(8px) translateY(-50%)}.tooltip-right .tooltip-arrow{left:-4px;top:50%;transform:translateY(-50%);border-width:4px 4px 4px 0;border-color:transparent #333 transparent transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-tooltip-popover', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div 
+      class="tooltip-container"
+      [ngClass]="'tooltip-' + tooltip.position"
+      [style.top.px]="top"
+      [style.left.px]="left"
+    >
+      <div class="tooltip-content">
+        {{ tooltip.text }}
+      </div>
+      <div class="tooltip-arrow"></div>
+    </div>
+  `, styles: [".tooltip-container{position:fixed;background-color:#333;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;z-index:9999;box-shadow:0 2px 8px #00000026;max-width:300px;word-wrap:break-word;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip-top{transform:translate(-50%) translateY(-100%)}.tooltip-top .tooltip-arrow{bottom:-4px;left:50%;transform:translate(-50%);border-width:4px 4px 0 4px;border-color:#333 transparent transparent transparent}.tooltip-bottom{transform:translate(-50%) translateY(8px)}.tooltip-bottom .tooltip-arrow{top:-4px;left:50%;transform:translate(-50%);border-width:0 4px 4px 4px;border-color:transparent transparent #333 transparent}.tooltip-left{transform:translate(-8px) translateY(-50%)}.tooltip-left .tooltip-arrow{right:-4px;top:50%;transform:translateY(-50%);border-width:4px 0 4px 4px;border-color:transparent transparent transparent #333}.tooltip-right{transform:translate(8px) translateY(-50%)}.tooltip-right .tooltip-arrow{left:-4px;top:50%;transform:translateY(-50%);border-width:4px 4px 4px 0;border-color:transparent #333 transparent transparent}\n"] }]
+        }], propDecorators: { tooltip: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+
+class BeaconComponent {
+    elementRef;
+    config;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        // Position beacon relative to its parent container
+        // The beacon container will be positioned at top-left, then adjusted via CSS classes
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BeaconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: BeaconComponent, isStandalone: true, selector: "app-beacon", inputs: { config: "config" }, ngImport: i0, template: `
+    <div class="beacon-container" [class]="'beacon-' + config.position">
+      <div class="beacon-pulse"></div>
+      <div class="beacon-dot"></div>
+    </div>
+    @if (config.label) {
+        <span class="beacon-label">{{ config.label }}</span>
+    }
+  `, isInline: true, styles: [".beacon-container{display:flex;justify-content:center;align-items:center;gap:6px;z-index:100}.beacon-pulse{position:absolute;width:18px;height:18px;border-radius:50%;background:#e74c3c4d;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(.8);opacity:1}70%{transform:scale(1.8);opacity:0}to{transform:scale(2);opacity:0}}.beacon-dot{position:relative;width:10px;height:10px;border-radius:50%;background:#e74c3c;box-shadow:0 2px 6px #e74c3c80;z-index:1;flex-shrink:0}.beacon-label{display:block;margin-top:8px;font-size:10px;font-weight:700;color:#fff;background:#e74c3c;padding:2px 5px;border-radius:3px;white-space:nowrap;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BeaconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beacon', standalone: true, template: `
+    <div class="beacon-container" [class]="'beacon-' + config.position">
+      <div class="beacon-pulse"></div>
+      <div class="beacon-dot"></div>
+    </div>
+    @if (config.label) {
+        <span class="beacon-label">{{ config.label }}</span>
+    }
+  `, styles: [".beacon-container{display:flex;justify-content:center;align-items:center;gap:6px;z-index:100}.beacon-pulse{position:absolute;width:18px;height:18px;border-radius:50%;background:#e74c3c4d;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(.8);opacity:1}70%{transform:scale(1.8);opacity:0}to{transform:scale(2);opacity:0}}.beacon-dot{position:relative;width:10px;height:10px;border-radius:50%;background:#e74c3c;box-shadow:0 2px 6px #e74c3c80;z-index:1;flex-shrink:0}.beacon-label{display:block;margin-top:8px;font-size:10px;font-weight:700;color:#fff;background:#e74c3c;padding:2px 5px;border-radius:3px;white-space:nowrap;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class NavFlowComponent {
+    step;
+    currentStep;
+    totalSteps;
+    next = new EventEmitter();
+    previous = new EventEmitter();
+    close = new EventEmitter();
+    top = 0;
+    left = 0;
+    onNextClick() {
+        if (this.currentStep === this.totalSteps) {
+            this.close.emit();
+        }
+        else {
+            this.next.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NavFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: NavFlowComponent, isStandalone: true, selector: "app-nav-flow", inputs: { step: "step", currentStep: "currentStep", totalSteps: "totalSteps" }, outputs: { next: "next", previous: "previous", close: "close" }, ngImport: i0, template: `
+    <div 
+      class="nav-flow-container"
+      [ngClass]="'nav-flow-' + step.position"
+      [style.top.px]="top"
+      [style.left.px]="left"
+    >
+      <div class="nav-flow-header">
+        <span class="step-indicator">{{ currentStep }} of {{ totalSteps }}</span>
+        <button class="close-btn" (click)="close.emit()">✕</button>
+      </div>
+      <h3 class="nav-flow-title">{{ step.title }}</h3>
+      <p class="nav-flow-text">{{ step.text }}</p>
+      <div class="nav-flow-footer">
+        <button 
+          class="nav-btn" 
+          [disabled]="currentStep === 1"
+          (click)="previous.emit()"
+        >
+          ← Previous
+        </button>
+        <button 
+          class="nav-btn primary" 
+          (click)="onNextClick()"
+        >
+          {{ currentStep === totalSteps ? 'Finish' : 'Next →' }}
+        </button>
+      </div>
+      <div class="nav-flow-arrow"></div>
+    </div>
+  `, isInline: true, styles: [".nav-flow-container{position:fixed;background:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 20px #0003;max-width:350px;z-index:10001;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.nav-flow-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.step-indicator{font-size:12px;color:#7f8c8d;font-weight:600}.close-btn{background:transparent;border:none;font-size:20px;cursor:pointer;color:#7f8c8d;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.close-btn:hover{background-color:#f0f0f0}.nav-flow-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#2c3e50}.nav-flow-text{margin:0 0 16px;font-size:14px;line-height:1.5;color:#34495e}.nav-flow-footer{display:flex;gap:8px;justify-content:flex-end}.nav-btn{padding:8px 16px;border:1px solid #ddd;background:#fff;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.nav-btn:hover:not(:disabled){background:#f8f9fa}.nav-btn:disabled{opacity:.5;cursor:not-allowed}.nav-btn.primary{background:#3498db;color:#fff;border-color:#3498db}.nav-btn.primary:hover{background:#2980b9}.nav-flow-arrow{position:absolute;width:0;height:0;border-style:solid}.nav-flow-top .nav-flow-arrow{bottom:-8px;left:50%;transform:translate(-50%);border-width:8px 8px 0 8px;border-color:white transparent transparent transparent}.nav-flow-bottom .nav-flow-arrow{top:-8px;left:50%;transform:translate(-50%);border-width:0 8px 8px 8px;border-color:transparent transparent white transparent}.nav-flow-left .nav-flow-arrow{right:-8px;top:50%;transform:translateY(-50%);border-width:8px 0 8px 8px;border-color:transparent transparent transparent white}.nav-flow-right .nav-flow-arrow{left:-8px;top:50%;transform:translateY(-50%);border-width:8px 8px 8px 0;border-color:transparent white transparent transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NavFlowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nav-flow', standalone: true, imports: [CommonModule], template: `
+    <div 
+      class="nav-flow-container"
+      [ngClass]="'nav-flow-' + step.position"
+      [style.top.px]="top"
+      [style.left.px]="left"
+    >
+      <div class="nav-flow-header">
+        <span class="step-indicator">{{ currentStep }} of {{ totalSteps }}</span>
+        <button class="close-btn" (click)="close.emit()">✕</button>
+      </div>
+      <h3 class="nav-flow-title">{{ step.title }}</h3>
+      <p class="nav-flow-text">{{ step.text }}</p>
+      <div class="nav-flow-footer">
+        <button 
+          class="nav-btn" 
+          [disabled]="currentStep === 1"
+          (click)="previous.emit()"
+        >
+          ← Previous
+        </button>
+        <button 
+          class="nav-btn primary" 
+          (click)="onNextClick()"
+        >
+          {{ currentStep === totalSteps ? 'Finish' : 'Next →' }}
+        </button>
+      </div>
+      <div class="nav-flow-arrow"></div>
+    </div>
+  `, styles: [".nav-flow-container{position:fixed;background:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 20px #0003;max-width:350px;z-index:10001;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.nav-flow-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.step-indicator{font-size:12px;color:#7f8c8d;font-weight:600}.close-btn{background:transparent;border:none;font-size:20px;cursor:pointer;color:#7f8c8d;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.close-btn:hover{background-color:#f0f0f0}.nav-flow-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#2c3e50}.nav-flow-text{margin:0 0 16px;font-size:14px;line-height:1.5;color:#34495e}.nav-flow-footer{display:flex;gap:8px;justify-content:flex-end}.nav-btn{padding:8px 16px;border:1px solid #ddd;background:#fff;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.nav-btn:hover:not(:disabled){background:#f8f9fa}.nav-btn:disabled{opacity:.5;cursor:not-allowed}.nav-btn.primary{background:#3498db;color:#fff;border-color:#3498db}.nav-btn.primary:hover{background:#2980b9}.nav-flow-arrow{position:absolute;width:0;height:0;border-style:solid}.nav-flow-top .nav-flow-arrow{bottom:-8px;left:50%;transform:translate(-50%);border-width:8px 8px 0 8px;border-color:white transparent transparent transparent}.nav-flow-bottom .nav-flow-arrow{top:-8px;left:50%;transform:translate(-50%);border-width:0 8px 8px 8px;border-color:transparent transparent white transparent}.nav-flow-left .nav-flow-arrow{right:-8px;top:50%;transform:translateY(-50%);border-width:8px 0 8px 8px;border-color:transparent transparent transparent white}.nav-flow-right .nav-flow-arrow{left:-8px;top:50%;transform:translateY(-50%);border-width:8px 8px 8px 0;border-color:transparent white transparent transparent}\n"] }]
+        }], propDecorators: { step: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], totalSteps: [{
+                type: Input
+            }], next: [{
+                type: Output
+            }], previous: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+class TooltipService {
+    appRef = inject(ApplicationRef);
+    injector = inject(Injector);
+    router = inject(Router, { optional: true });
+    tooltipsSubject = new BehaviorSubject([]);
+    config = null;
+    guidanceCollections = [];
+    tooltipComponentRefs = new Map();
+    tooltipElements = new Map();
+    tooltipListenerCleanup = new Map();
+    beaconComponentRefs = new Map();
+    beaconElements = new Map();
+    navFlowComponentRef = null;
+    navFlowElement = null;
+    currentNavFlowStep = 0;
+    navFlowData = null;
+    popupComponentRef = null;
+    popupElement = null;
+    popupOpen = false;
+    routeSubscription = null;
+    windowRouteListenersAttached = false;
+    tooltips$ = this.tooltipsSubject.asObservable();
+    /**
+     * Initialize tooltips by fetching from API on app load
+     * Waits for Angular to stabilize before matching paths
+     */
+    async initializeTooltips(config) {
+        this.config = config;
+        if (config.debug) {
+            console.log('[Wontfix] Initializing tooltips...');
+        }
+        try {
+            // Wait for Angular to stabilize (all components rendered and change detection complete)
+            await firstValueFrom(this.appRef.isStable.pipe(filter(stable => stable === true), take(1)));
+            if (config.debug) {
+                console.log('[Wontfix] Angular stable, fetching tooltips');
+            }
+            await this.fetchTooltips();
+            // After initial load, keep reacting to host route changes.
+            this.setupRouteListener();
+        }
+        catch (error) {
+            console.error('[Wontfix] Failed to initialize tooltips:', error);
+        }
+    }
+    /**
+     * Fetch tooltips (currently using mock data)
+     */
+    async fetchTooltips() {
+        if (!this.config)
+            return;
+        const collections = await this.fetchGuidanceCollections();
+        this.guidanceCollections = collections;
+        if (this.config.debug) {
+            console.log(`[Wontfix] Loaded ${collections.length} guidance collections`);
+        }
+        // Map new API contract -> existing TooltipInstance shape used by TooltipComponent.
+        const tooltips = collections
+            .filter((c) => c?.type === 'tooltip')
+            .reduce((accumulator, collection) => {
+            const pageUrl = this.normalizeUrlToPathPattern(collection.url);
+            const elements = Array.isArray(collection.elements) ? collection.elements : [];
+            for (const el of elements) {
+                const position = (el.position ?? 'top');
+                const interaction = (el.interaction ?? 'hover');
+                const text = el.content ?? '';
+                accumulator.push({
+                    templateId: 2,
+                    path: el.selector,
+                    pageUrl,
+                    metadata: {
+                        interaction,
+                        position,
+                        text,
+                    },
+                    priority: el.order ?? undefined,
+                    id: `tooltip-${collection.id}-${el.id}`,
+                    isVisible: false,
+                    interaction,
+                    position,
+                    text,
+                });
+            }
+            return accumulator;
+        }, []);
+        this.tooltipsSubject.next(tooltips);
+        this.matchSelectorsToDOM();
+        // Also initialize beacons
+        this.initializeBeacons();
+        // Check for popups on current route
+        this.checkPopups();
+        // Check for product tours on current route
+        this.checkProductTours();
+    }
+    /**
+     * Initialize beacons (templateId: 3)
+     */
+    initializeBeacons() {
+        const currentUrl = window.location.pathname;
+        const beacons = this.guidanceCollections.filter((c) => c?.type === 'beacon' && this.urlMatches(c.url, currentUrl));
+        beacons.forEach((beacon, collectionIndex) => {
+            const elements = Array.isArray(beacon.elements) ? beacon.elements : [];
+            elements.forEach((beaconElement, elementIndex) => {
+                try {
+                    const element = this.resolveTargetElement(beaconElement.selector);
+                    if (element instanceof HTMLElement) {
+                        this.attachBeaconToElement(element, beacon, beaconElement, collectionIndex, elementIndex);
+                    }
+                }
+                catch (error) {
+                    console.error(`[Wontfix] ERROR matching beacon selector "${beaconElement.selector}":`, error);
+                }
+            });
+        });
+    }
+    /**
+     * Attach beacon to an element
+     */
+    attachBeaconToElement(element, beacon, beaconElementConfig, collectionIndex, elementIndex) {
+        const beaconId = `beacon-${beacon.id}-${beaconElementConfig.id ?? `${collectionIndex}-${elementIndex}`}`;
+        const componentRef = createComponent(BeaconComponent, {
+            environmentInjector: this.appRef.injector,
+        });
+        componentRef.instance.config = {
+            position: (beaconElementConfig.position ?? 'top'),
+            label: beaconElementConfig.content
+        };
+        this.appRef.attachView(componentRef.hostView);
+        const beaconElement = componentRef.location.nativeElement;
+        // Get parent button group
+        const parent = element.parentElement;
+        if (parent) {
+            parent.style.position = 'relative';
+            // Calculate button position within parent
+            const buttonRect = element.getBoundingClientRect();
+            const parentRect = parent.getBoundingClientRect();
+            const relativeTop = buttonRect.top - parentRect.top;
+            const relativeLeft = buttonRect.left - parentRect.left;
+            const buttonWidth = buttonRect.width;
+            const buttonHeight = buttonRect.height;
+            // Set beacon position based on position prop
+            const position = beaconElementConfig.position;
+            let top = relativeTop;
+            let left = relativeLeft;
+            switch (position) {
+                case 'top':
+                    top = relativeTop - 18;
+                    left = relativeLeft + buttonWidth / 2 - 5;
+                    break;
+                case 'bottom':
+                    top = relativeTop + buttonHeight + 8;
+                    left = relativeLeft + buttonWidth / 2 - 5;
+                    break;
+                case 'left':
+                    top = relativeTop + buttonHeight / 2 - 5;
+                    left = relativeLeft - 18;
+                    break;
+                case 'right':
+                    top = relativeTop + buttonHeight / 2 - 5;
+                    left = relativeLeft + buttonWidth + 8;
+                    break;
+                default:
+                    break;
+            }
+            beaconElement.style.position = 'absolute';
+            beaconElement.style.top = top + 'px';
+            beaconElement.style.left = left + 'px';
+            parent.appendChild(beaconElement);
+        }
+        else {
+            element.appendChild(beaconElement);
+        }
+        this.beaconElements.set(beaconId, beaconElement);
+        this.beaconComponentRefs.set(beaconId, componentRef);
+    }
+    /**
+     * Check if current route should show a product tour
+     */
+    checkProductTours() {
+        const currentUrl = window.location.pathname;
+        const productTours = this.guidanceCollections.filter(item => item?.type === 'product-tour' && this.urlMatches(item.url, currentUrl));
+        if (productTours.length > 0 && this.config?.debug) {
+            console.log('[Wontfix] Product tour found for route:', currentUrl);
+            // Product tour will be handled by the ProductTourComponent on that route
+        }
+    }
+    /**
+     * Get all tooltips for current page
+     */
+    getTooltipsForCurrentPage() {
+        const currentUrl = window.location.pathname;
+        return this.tooltipsSubject.value.filter(tooltip => this.urlMatches(tooltip.pageUrl, currentUrl));
+    }
+    /**
+     * Match tooltip paths to actual DOM elements
+     */
+    matchSelectorsToDOM() {
+        const tooltips = this.tooltipsSubject.value;
+        const currentUrl = window.location.pathname;
+        tooltips.forEach((tooltip) => {
+            if (!this.urlMatches(tooltip.pageUrl, currentUrl)) {
+                return;
+            }
+            try {
+                const element = this.resolveTargetElement(tooltip.path);
+                if (element instanceof HTMLElement) {
+                    tooltip.element = element;
+                    this.attachTooltipToElement(tooltip);
+                }
+            }
+            catch (error) {
+                console.error(`[Wontfix] ERROR matching path "${tooltip.path}":`, error);
+            }
+        });
+        this.tooltipsSubject.next(tooltips);
+    }
+    /**
+     * Attach tooltip event listeners to an element
+     */
+    attachTooltipToElement(tooltip) {
+        const element = tooltip.element;
+        if (!element) {
+            return;
+        }
+        const existingCleanup = this.tooltipListenerCleanup.get(tooltip.id);
+        if (existingCleanup) {
+            existingCleanup();
+            this.tooltipListenerCleanup.delete(tooltip.id);
+        }
+        if (tooltip.interaction === 'hover') {
+            const onEnter = () => this.showTooltip(tooltip.id);
+            const onLeave = () => this.hideTooltip(tooltip.id);
+            element.addEventListener('mouseenter', onEnter);
+            element.addEventListener('mouseleave', onLeave);
+            this.tooltipListenerCleanup.set(tooltip.id, () => {
+                element.removeEventListener('mouseenter', onEnter);
+                element.removeEventListener('mouseleave', onLeave);
+            });
+        }
+        else if (tooltip.interaction === 'click') {
+            const onElementClick = (e) => {
+                e.stopPropagation();
+                const isVisible = this.tooltipsSubject.value.find(t => t.id === tooltip.id)?.isVisible;
+                if (isVisible) {
+                    this.hideTooltip(tooltip.id);
+                }
+                else {
+                    this.showTooltip(tooltip.id);
+                }
+            };
+            element.addEventListener('click', onElementClick);
+            // Close on outside click
+            const onDocumentClick = () => this.hideTooltip(tooltip.id);
+            document.addEventListener('click', onDocumentClick);
+            this.tooltipListenerCleanup.set(tooltip.id, () => {
+                element.removeEventListener('click', onElementClick);
+                document.removeEventListener('click', onDocumentClick);
+            });
+        }
+    }
+    /**
+     * Show tooltip
+     */
+    showTooltip(tooltipId) {
+        const tooltip = this.tooltipsSubject.value.find(t => t.id === tooltipId);
+        if (!tooltip || tooltip.isVisible)
+            return;
+        tooltip.isVisible = true;
+        this.createAndShowTooltip(tooltip);
+        this.tooltipsSubject.next(this.tooltipsSubject.value);
+    }
+    /**
+     * Create and show tooltip component
+     */
+    createAndShowTooltip(tooltip) {
+        if (!tooltip.element) {
+            return;
+        }
+        // Remove existing tooltip
+        this.hideTooltip(tooltip.id);
+        // Create component
+        const componentRef = createComponent(TooltipComponent, {
+            environmentInjector: this.appRef.injector,
+            elementInjector: this.injector
+        });
+        componentRef.instance.tooltip = tooltip;
+        componentRef.instance.close.subscribe(() => {
+            this.hideTooltip(tooltip.id);
+        });
+        this.appRef.attachView(componentRef.hostView);
+        const tooltipElement = componentRef.location.nativeElement;
+        document.body.appendChild(tooltipElement);
+        this.tooltipElements.set(tooltip.id, tooltipElement);
+        this.tooltipComponentRefs.set(tooltip.id, componentRef);
+        // Position tooltip
+        this.positionTooltip(tooltip, tooltipElement);
+    }
+    /**
+     * Position tooltip relative to element
+     */
+    positionTooltip(tooltip, tooltipElement) {
+        if (!tooltip.element)
+            return;
+        const rect = tooltip.element.getBoundingClientRect();
+        const tooltipRect = tooltipElement.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        const offset = 8;
+        switch (tooltip.position) {
+            case 'top':
+                top = rect.top - tooltipRect.height - offset;
+                left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'bottom':
+                top = rect.bottom + offset;
+                left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'left':
+                top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                left = rect.left - tooltipRect.width - offset;
+                break;
+            case 'right':
+                top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                left = rect.right + offset;
+                break;
+        }
+        // Don't add scroll offset for position: fixed elements
+        // Fixed positioning is relative to viewport, not document
+        // Set position on component instance
+        const componentInstance = this.tooltipComponentRefs.get(tooltip.id)?.instance;
+        if (componentInstance) {
+            componentInstance.top = top;
+            componentInstance.left = left;
+        }
+    }
+    /**
+     * Hide tooltip
+     */
+    hideTooltip(tooltipId) {
+        const tooltip = this.tooltipsSubject.value.find(t => t.id === tooltipId);
+        if (tooltip) {
+            tooltip.isVisible = false;
+        }
+        const componentRef = this.tooltipComponentRefs.get(tooltipId);
+        const tooltipElement = this.tooltipElements.get(tooltipId);
+        if (componentRef) {
+            this.appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+            this.tooltipComponentRefs.delete(tooltipId);
+        }
+        if (tooltipElement && tooltipElement.parentNode) {
+            tooltipElement.parentNode.removeChild(tooltipElement);
+            this.tooltipElements.delete(tooltipId);
+        }
+        this.tooltipsSubject.next(this.tooltipsSubject.value);
+    }
+    closeAllTooltips() {
+        for (const tooltipId of Array.from(this.tooltipComponentRefs.keys())) {
+            const tooltip = this.tooltipsSubject.value.find(t => t.id === tooltipId);
+            if (tooltip) {
+                tooltip.isVisible = false;
+            }
+            const componentRef = this.tooltipComponentRefs.get(tooltipId);
+            const tooltipElement = this.tooltipElements.get(tooltipId);
+            if (componentRef) {
+                this.appRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+            }
+            if (tooltipElement && tooltipElement.parentNode) {
+                tooltipElement.parentNode.removeChild(tooltipElement);
+            }
+        }
+        this.tooltipComponentRefs.clear();
+        this.tooltipElements.clear();
+        this.tooltipsSubject.next(this.tooltipsSubject.value);
+    }
+    detachAllTooltipListeners() {
+        this.tooltipListenerCleanup.forEach((cleanup) => cleanup());
+        this.tooltipListenerCleanup.clear();
+    }
+    /**
+     * Re-scan DOM for new elements (useful for dynamically added content)
+     */
+    rescanDOM() {
+        this.matchSelectorsToDOM();
+    }
+    /**
+     * Update tooltip visibility
+     */
+    setTooltipVisible(tooltipId, visible) {
+        const tooltips = this.tooltipsSubject.value.map(t => t.id === tooltipId ? { ...t, isVisible: visible } : t);
+        this.tooltipsSubject.next(tooltips);
+    }
+    /**
+     * Check if page URL matches the tooltip's pageUrl pattern
+     * Supports:
+     * - Exact match: "/dashboard"
+     * - Wildcard: "/dashboard/*"
+     * - All pages: "*"
+     */
+    urlMatches(pattern, currentUrl) {
+        const normalizedPattern = this.normalizeUrlToPathPattern(pattern);
+        const normalizedCurrent = this.normalizeUrlToPathPattern(currentUrl);
+        if (normalizedPattern === '*')
+            return true;
+        if (normalizedPattern === normalizedCurrent)
+            return true;
+        // Handle wildcard patterns like "/dashboard/*"
+        const regexPattern = normalizedPattern
+            .replace(/\//g, '\\/')
+            .replace(/\*/g, '.*');
+        try {
+            return new RegExp(`^${regexPattern}$`).test(currentUrl);
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Get tooltip by ID
+     */
+    getTooltipById(id) {
+        return this.tooltipsSubject.value.find(t => t.id === id);
+    }
+    /**
+     * Get all available tooltips (for debugging)
+     */
+    getAvailableTooltips() {
+        return this.tooltipsSubject.value.map(t => t.id);
+    }
+    /**
+     * Get product tour data for current route
+     */
+    getProductTourForRoute(route) {
+        const productTour = this.guidanceCollections.find(item => item?.type === 'product-tour' && this.urlMatches(item.url, route));
+        return productTour;
+    }
+    /**
+     * Reinitialize tooltips and beacons (useful when navigating back to a route)
+     */
+    reinitializeTooltips() {
+        this.closeAllTooltips();
+        this.closeNavFlow();
+        this.closePopup();
+        this.detachAllTooltipListeners();
+        // Clear existing beacons
+        this.beaconComponentRefs.forEach(ref => {
+            this.appRef.detachView(ref.hostView);
+            ref.destroy();
+        });
+        this.beaconComponentRefs.clear();
+        this.beaconElements.forEach(el => {
+            if (el && el.parentNode) {
+                el.parentNode.removeChild(el);
+            }
+        });
+        this.beaconElements.clear();
+        // Reinitialize beacons
+        this.initializeBeacons();
+        // Rematch tooltips to DOM
+        this.matchSelectorsToDOM();
+        this.checkPopups();
+        this.checkProductTours();
+    }
+    /**
+     * Start a nav-flow for the current page
+     */
+    startNavFlow() {
+        const currentUrl = window.location.pathname;
+        const navFlow = this.guidanceCollections.find(item => item?.type === 'nav-flow' && this.urlMatches(item.url, currentUrl));
+        if (!navFlow || !navFlow.metadata.steps) {
+            console.warn('[Wontfix] No nav-flow found for current page');
+            return;
+        }
+        this.navFlowData = navFlow;
+        this.currentNavFlowStep = 0;
+        this.showNavFlowStep(0);
+    }
+    /**
+     * Show a specific nav-flow step
+     */
+    showNavFlowStep(stepIndex) {
+        if (!this.navFlowData)
+            return;
+        const steps = this.navFlowData.metadata.steps;
+        if (stepIndex < 0 || stepIndex >= steps.length)
+            return;
+        // Clean up existing nav-flow component without resetting state
+        if (this.navFlowComponentRef) {
+            this.appRef.detachView(this.navFlowComponentRef.hostView);
+            this.navFlowComponentRef.destroy();
+            this.navFlowComponentRef = null;
+        }
+        if (this.navFlowElement && this.navFlowElement.parentNode) {
+            this.navFlowElement.parentNode.removeChild(this.navFlowElement);
+            this.navFlowElement = null;
+        }
+        const step = steps[stepIndex];
+        this.currentNavFlowStep = stepIndex;
+        try {
+            const element = this.resolveTargetElement(step.path);
+            if (element instanceof HTMLElement) {
+                this.createAndShowNavFlow(element, step, stepIndex + 1, steps.length);
+            }
+        }
+        catch (error) {
+            console.error(`[Wontfix] ERROR finding element for nav-flow step:`, error);
+        }
+    }
+    /**
+     * Create and show nav-flow component
+     */
+    createAndShowNavFlow(element, step, currentStep, totalSteps) {
+        const componentRef = createComponent(NavFlowComponent, {
+            environmentInjector: this.appRef.injector,
+        });
+        componentRef.instance.step = step;
+        componentRef.instance.currentStep = currentStep;
+        componentRef.instance.totalSteps = totalSteps;
+        this.appRef.attachView(componentRef.hostView);
+        const navFlowElement = componentRef.location.nativeElement;
+        document.body.appendChild(navFlowElement);
+        this.navFlowElement = navFlowElement;
+        this.navFlowComponentRef = componentRef;
+        // Position nav-flow
+        this.positionNavFlow(element, step, navFlowElement, componentRef);
+        // Subscribe to events after setting refs
+        componentRef.instance.next.subscribe(() => {
+            this.nextNavFlowStep();
+        });
+        componentRef.instance.previous.subscribe(() => {
+            this.previousNavFlowStep();
+        });
+        componentRef.instance.close.subscribe(() => {
+            this.closeNavFlow();
+        });
+    }
+    /**
+     * Position nav-flow relative to element
+     */
+    positionNavFlow(element, step, navFlowElement, componentRef) {
+        const rect = element.getBoundingClientRect();
+        const navFlowRect = navFlowElement.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        const offset = 8;
+        // Use actual dimensions or fallback if not rendered yet
+        const navFlowWidth = navFlowRect.width || 350;
+        const navFlowHeight = navFlowRect.height || 200; // Approximate height
+        switch (step.position) {
+            case 'top':
+                top = rect.top - navFlowHeight - offset;
+                left = rect.left + rect.width / 2 - navFlowWidth / 2;
+                break;
+            case 'bottom':
+                top = rect.bottom + offset;
+                left = rect.left + rect.width / 2 - navFlowWidth / 2;
+                break;
+            case 'left':
+                top = rect.top + rect.height / 2 - navFlowHeight / 2;
+                left = rect.left - navFlowWidth - offset;
+                break;
+            case 'right':
+                top = rect.top + rect.height / 2 - navFlowHeight / 2;
+                left = rect.right + offset;
+                break;
+        }
+        componentRef.instance.top = top;
+        componentRef.instance.left = left;
+    }
+    /**
+     * Go to next nav-flow step
+     */
+    nextNavFlowStep() {
+        this.showNavFlowStep(this.currentNavFlowStep + 1);
+    }
+    /**
+     * Go to previous nav-flow step
+     */
+    previousNavFlowStep() {
+        this.showNavFlowStep(this.currentNavFlowStep - 1);
+    }
+    /**
+     * Close nav-flow
+     */
+    closeNavFlow() {
+        if (this.navFlowComponentRef) {
+            this.appRef.detachView(this.navFlowComponentRef.hostView);
+            this.navFlowComponentRef.destroy();
+            this.navFlowComponentRef = null;
+        }
+        if (this.navFlowElement && this.navFlowElement.parentNode) {
+            this.navFlowElement.parentNode.removeChild(this.navFlowElement);
+            this.navFlowElement = null;
+        }
+        this.navFlowData = null;
+        this.currentNavFlowStep = 0;
+    }
+    /**
+     * Check if current route should show a popup
+     */
+    checkPopups() {
+        const currentUrl = window.location.pathname;
+        const popup = this.guidanceCollections.find(item => item?.type === 'popup' && this.urlMatches(item.url, currentUrl));
+        if (popup && this.config?.debug) {
+            console.log('[Wontfix] Popup found for route:', currentUrl);
+            // Popup will be handled by the PopupComponent on that route
+        }
+    }
+    /**
+     * Get popup data for current route
+     */
+    getPopupForRoute(route) {
+        const popup = this.guidanceCollections.find(item => item?.type === 'popup' && this.urlMatches(item.url, route));
+        return popup;
+    }
+    setupRouteListener() {
+        if (this.routeSubscription || this.windowRouteListenersAttached) {
+            return;
+        }
+        if (this.router) {
+            this.routeSubscription = this.router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd) {
+                    this.onRouteChanged();
+                }
+            });
+            return;
+        }
+        window.addEventListener('popstate', this.onRouteChanged);
+        window.addEventListener('hashchange', this.onRouteChanged);
+        this.windowRouteListenersAttached = true;
+    }
+    onRouteChanged = async () => {
+        try {
+            await firstValueFrom(this.appRef.isStable.pipe(filter(stable => stable === true), take(1)));
+            this.reinitializeTooltips();
+        }
+        catch (error) {
+            if (this.config?.debug) {
+                console.warn('[Wontfix] Route-change reinit failed:', error);
+            }
+        }
+    };
+    async fetchGuidanceCollections() {
+        const fallbackToMock = this.config?.fallbackToMock ?? true;
+        try {
+            if (!this.config?.apiUrl) {
+                return fallbackToMock ? this.normalizeGuidanceCollections(MOCK_TOOLTIPS) : [];
+            }
+            const hasPayload = this.config.payload !== undefined;
+            const response = await fetch(this.config.apiUrl, {
+                method: hasPayload ? 'POST' : 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: hasPayload ? JSON.stringify(this.config.payload) : undefined,
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const json = await response.json();
+            const raw = Array.isArray(json)
+                ? json
+                : Array.isArray(json?.data)
+                    ? json.data
+                    : Array.isArray(json?.items)
+                        ? json.items
+                        : [];
+            return this.normalizeGuidanceCollections(raw);
+        }
+        catch (error) {
+            console.error('[Wontfix] Failed to fetch guidance elements:', error);
+            return fallbackToMock ? this.normalizeGuidanceCollections(MOCK_TOOLTIPS) : [];
+        }
+    }
+    normalizeGuidanceCollections(raw) {
+        if (!Array.isArray(raw))
+            return [];
+        const result = [];
+        raw.forEach((item, index) => {
+            if (item && typeof item === 'object' && typeof item.type === 'string' && typeof item.url === 'string') {
+                if (item.isActive === false)
+                    return;
+                if (Array.isArray(item.elements)) {
+                    item.elements = item.elements.filter((el) => el?.isActive !== false);
+                }
+                result.push(item);
+                return;
+            }
+            if (item && typeof item === 'object' && typeof item.templateId === 'number') {
+                const templateId = item.templateId;
+                const type = templateId === 2 ? 'tooltip' :
+                    templateId === 3 ? 'beacon' :
+                        templateId === 1 ? 'product-tour' :
+                            templateId === 4 ? 'nav-flow' :
+                                templateId === 5 ? 'popup' :
+                                    'unknown';
+                result.push({
+                    id: item.id ?? `legacy-${templateId}-${index}`,
+                    type,
+                    url: item.pageUrl ?? '*',
+                    elements: [
+                        {
+                            id: item.elements?.[0]?.id ?? `legacy-el-${index}`,
+                            selector: item.path ?? item.selector,
+                            position: item.metadata?.position,
+                            interaction: item.metadata?.interaction,
+                            content: item.metadata?.text,
+                            order: item.priority ?? item.order ?? item.elements?.[0]?.order,
+                        },
+                    ],
+                    metadata: item.metadata,
+                });
+            }
+        });
+        return result;
+    }
+    resolveTargetElement(selectorOrPath) {
+        if (!selectorOrPath)
+            return null;
+        if (selectorOrPath.includes('/')) {
+            return PathMatcher.findElementByPath(selectorOrPath);
+        }
+        try {
+            const element = document.querySelector(selectorOrPath);
+            return element instanceof HTMLElement ? element : null;
+        }
+        catch {
+            return PathMatcher.findElementByPath(selectorOrPath);
+        }
+    }
+    normalizeUrlToPathPattern(value) {
+        if (!value)
+            return '';
+        if (value === '*')
+            return '*';
+        if (value.startsWith('/')) {
+            return value;
+        }
+        try {
+            const parsed = new URL(value);
+            return parsed.pathname || '/';
+        }
+        catch {
+            return value;
+        }
+    }
+    /**
+     * Close popup
+     */
+    closePopup() {
+        this.popupOpen = false;
+        if (this.popupComponentRef) {
+            this.appRef.detachView(this.popupComponentRef.hostView);
+            this.popupComponentRef.destroy();
+            this.popupComponentRef = null;
+        }
+        if (this.popupElement && this.popupElement.parentNode) {
+            this.popupElement.parentNode.removeChild(this.popupElement);
+            this.popupElement = null;
+        }
+    }
+    /**
+     * Check if popup is open
+     */
+    isPopupOpen() {
+        return this.popupOpen;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/*
+ * Tooltips are fetched once on app load.
+ * Updates are only available on next app reload.
+ */
+function wontfixInitializer(config) {
+    return () => {
+        const tooltipService = inject(TooltipService);
+        return tooltipService.initializeTooltips(config);
+    };
+}
+
+/**
+ * Wontfix Tooltip SDK - Public API
+ *
+ * This is the main entry point for applications using the Wontfix SDK.
+ * Export only the public-facing APIs that consumers should use.
+ */
 
 class WontfixSdk {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WontfixSdk, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -21,10 +1304,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 /*
  * Public API Surface of wontfix-sdk
  */
+// Main SDK surface (service + initializer + types)
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WontfixSdk };
+export { TooltipService, WontfixSdk, wontfixInitializer };
 //# sourceMappingURL=wontfix-sdk.mjs.map