@ruc-lib/tour-guide 2.1.8 → 3.1.0

package/{fesm2020 → fesm2022}/ruc-lib-tour-guide.mjs

@@ -1,431 +1,417 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Input, ViewChild, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/card';
+import * as i2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, ViewChild, Input, Output, Component } from '@angular/core';
 
-const defaultTourGuideConfig = {
-    type: "advance",
-    showSkipButton: true,
-    buttonsFontSize: "14px",
-    titleFontSize: '16px',
-    contentFontSize: '14px',
-    buttonsAlignment: 'end',
-    stepCountAlignment: 'start',
-    stepCountStartText: 'Step',
-    stepCountMiddleText: 'of',
-    skipButtonText: 'Skip',
-    prevButtonText: 'Back',
-    nextButtonText: 'Next',
-    finishButtonText: 'Finish',
-    highlightBorderColor: '#007bff',
-    highlightBorderWidth: '2px',
-    defaultPopupWidth: '250px',
-};
-const DEFAULT_VALUES = {
-    arrowRight: 'ArrowRight',
-    arrowLeft: 'ArrowLeft',
-    escape: 'Escape',
-    popup: { width: 300, height: 150, top: 0, left: 0, padding: 10, safeMargin: 64 },
-    startTourButtonLabel: 'Start Tour Guide'
+const defaultTourGuideConfig = {
+    type: "advance",
+    showSkipButton: true,
+    buttonsFontSize: "14px",
+    titleFontSize: '16px',
+    contentFontSize: '14px',
+    buttonsAlignment: 'end',
+    stepCountAlignment: 'start',
+    stepCountStartText: 'Step',
+    stepCountMiddleText: 'of',
+    skipButtonText: 'Skip',
+    prevButtonText: 'Back',
+    nextButtonText: 'Next',
+    finishButtonText: 'Finish',
+    highlightBorderColor: '#007bff',
+    highlightBorderWidth: '2px',
+    defaultPopupWidth: '250px',
+};
+const DEFAULT_VALUES = {
+    arrowRight: 'ArrowRight',
+    arrowLeft: 'ArrowLeft',
+    escape: 'Escape',
+    popup: { width: 300, height: 150, top: 0, left: 0, padding: 10, safeMargin: 64 },
+    startTourButtonLabel: 'Start Tour Guide'
 };
 
-class RuclibTourGuideComponent {
-    /**
-     * class constructor
-     * @param tourGuideService
-     * @param renderer
-     */
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.rucEvent = new EventEmitter();
-        this.showStartButton = false;
-        this.dataSource = [];
-        this.currentStepIndex = 0;
-        this.showTour = false;
-        this.startTourButtonLabel = DEFAULT_VALUES?.startTourButtonLabel;
-        this.config = defaultTourGuideConfig;
-        /**
-         * method to navigate between tour slides or skip tour using left, right and skip key
-         * @param event
-         * @returns
-         */
-        this.handleKey = (event) => {
-            if (!this.showTour)
-                return;
-            if (event.key === DEFAULT_VALUES.arrowRight)
-                this.nextStep();
-            else if (event.key === DEFAULT_VALUES.arrowLeft)
-                this.previousStep();
-            else if (event.key === DEFAULT_VALUES.escape)
-                this.skip();
-        };
-    }
-    /**
-      * handling input data changes
-      * updating default config with user provided config
-      * @param changes
-      */
-    ngOnChanges(changes) {
-        if (changes && changes['rucInputData'] && changes['rucInputData'].currentValue) {
-            this.config = { ...this.config, ...changes['rucInputData'].currentValue };
-        }
-    }
-    /**
-     * handling change on component initilization
-     */
-    ngOnInit() {
-        document.addEventListener('keydown', this.handleKey);
-        this.resizeListener = this.debounce(() => this.highlightElement(), 150);
-        window.addEventListener('resize', this.resizeListener);
-        if (!this.showStartButton) {
-            this.startTour();
-        }
-    }
-    /**
-     * this method handle the start of tour guide fetaure
-     */
-    startTour() {
-        this.showTour = true;
-        this.lockScroll();
-        setTimeout(() => {
-            if (!this.originalParent) {
-                this.originalParent = this.renderer.parentNode(this.overlayRef?.nativeElement);
-            }
-            if (this.overlayRef) {
-                this.renderer.appendChild(document.body, this.overlayRef?.nativeElement);
-            }
-            this.currentStepIndex = 0;
-            if (this.config.type === 'advance') {
-                this.highlightElement();
-            }
-        }, 10);
-    }
-    /**
-     * this method handle the navigation to next tour guide feature
-     */
-    nextStep() {
-        this.removeHighlight();
-        this.currentStepIndex++;
-        if (this.currentStepIndex < this.dataSource.length) {
-            if (this.config.type === 'advance')
-                this.highlightElement();
-        }
-        else {
-            this.currentStepIndex--;
-            this.showTour = false;
-            this.unlockScroll();
-            this.rucEvent.emit({ eventName: 'onTourComplete', eventOutput: null });
-            if (this.overlayRef) {
-                this.renderer.removeChild(document.body, this.overlayRef.nativeElement);
-            }
-        }
-    }
-    /**
-     * this method allow us to navigate back to previous tour guide feature
-     */
-    previousStep() {
-        if (this.currentStepIndex > 0) {
-            this.removeHighlight();
-            this.currentStepIndex--;
-            if (this.config.type === 'advance')
-                this.highlightElement();
-        }
-    }
-    /**
-     * method to skip the tour guide thats in progress
-     */
-    skip() {
-        this.removeHighlight();
-        this.showTour = false;
-        this.unlockScroll();
-        this.rucEvent.emit({ eventName: 'onTourSkip', eventOutput: null });
-        if (this.overlayRef) {
-            this.renderer.removeChild(document.body, this.overlayRef.nativeElement);
-        }
-    }
-    /**
-     * method to highlight feature area and changin details popup based on provide config
-     * @returns
-     */
-    async highlightElement() {
-        const step = this.dataSource[this.currentStepIndex];
-        if (this.config.type === 'simple' || !step?.selector) {
-            return;
-        }
-        // 1. Find and scroll to the element
-        this.currentElement = await this.findElementAndScroll(step.selector);
-        if (!this.currentElement) {
-            return;
-        }
-        // 2. Apply highlight styles
-        this.applyHighlightStyles(this.currentElement);
-        // 3. Calculate and apply popup position
-        this.calculateAndApplyPopupPosition(this.currentElement, step.position);
-        // 4. Create the visual hole in the overlay
-        this.createTransparentHole();
-    }
-    /**
-     * Finds an element by its selector, scrolls it into view, and waits for the scroll to complete.
-     * @param selector The CSS selector for the target element.
-     * @returns A promise that resolves to the HTMLElement or undefined if not found.
-     */
-    async findElementAndScroll(selector) {
-        const element = document.querySelector(selector);
-        if (!element) {
-            return undefined;
-        }
-        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        await this.waitForScroll();
-        return element;
-    }
-    /**
-     * Applies CSS classes and styles to visually highlight the target element.
-     * @param element The element to highlight.
-     */
-    applyHighlightStyles(element) {
-        this.renderer.addClass(element, 'tour-highlight');
-        this.renderer.setStyle(element, 'position', 'relative');
-        this.renderer.setStyle(element, 'z-index', '10000');
-    }
-    /**
-     * Calculates the optimal position for the tour popup and applies it.
-     * @param element The highlighted element.
-     * @param position The desired position ('auto', 'top', 'bottom', 'left', 'right').
-     */
-    calculateAndApplyPopupPosition(element, position = 'auto') {
-        const rect = element.getBoundingClientRect();
-        const offset = this.getAbsoluteOffset(element);
-        // Determine the best position if set to 'auto'
-        const finalPosition = this.determineAutoPosition(position, rect);
-        // Get the top/left coordinates based on the position
-        let coords = this.computePopupCoordinates(finalPosition, offset, element);
-        // Ensure the coordinates are within the viewport
-        coords = this.clampPopupCoordinates(coords);
-        // Apply the final styles to the popup
-        this.popupStyle = {
-            top: `${coords.top}px`,
-            left: `${coords.left}px`
-        };
-        // Ensure the popup itself is visible
-        this.scrollPopupIntoView();
-    }
-    /**
-     * Determines the best placement for the popup when position is 'auto'.
-     * @param position The configured position.
-     * @param rect The BoundingClientRect of the target element.
-     * @returns The calculated final position.
-     */
-    determineAutoPosition(position, rect) {
-        if (position !== 'auto') {
-            return position;
-        }
-        const { padding, width: popupWidth, height: popupHeight, safeMargin } = DEFAULT_VALUES.popup;
-        const fitsTop = rect.top >= popupHeight + padding;
-        const fitsBottom = window.innerHeight - rect.bottom >= popupHeight + padding + safeMargin;
-        const fitsRight = window.innerWidth - rect.right >= popupWidth + padding;
-        const fitsLeft = rect.left >= popupWidth + padding;
-        if (fitsRight)
-            return 'right';
-        if (fitsBottom)
-            return 'bottom';
-        if (fitsLeft)
-            return 'left';
-        if (fitsTop)
-            return 'top';
-        return 'bottom'; // fallback
-    }
-    /**
-     * Computes the top and left coordinates for the popup based on the target element and desired position.
-     * @param position The final position for the popup.
-     * @param offset The absolute offset of the target element.
-     * @param element The target element.
-     * @returns An object with top and left coordinates.
-     */
-    computePopupCoordinates(position, offset, element) {
-        const { padding, width: popupWidth, height: popupHeight } = DEFAULT_VALUES.popup;
-        let top = DEFAULT_VALUES.popup.top;
-        let left = DEFAULT_VALUES.popup.left;
-        switch (position) {
-            case 'top':
-                top = offset.top - popupHeight - padding - 20;
-                left = offset.left + element.offsetWidth / 2 - popupWidth / 2;
-                break;
-            case 'bottom':
-                top = offset.top + element.offsetHeight + padding;
-                left = offset.left + element.offsetWidth / 2 - popupWidth / 2;
-                break;
-            case 'left':
-                top = offset.top + element.offsetHeight / 2 - popupHeight / 2;
-                left = offset.left - popupWidth - padding + 50;
-                break;
-            case 'right':
-                top = offset.top + element.offsetHeight / 2 - popupHeight / 2;
-                left = offset.left + element.offsetWidth + padding;
-                break;
-        }
-        return { top, left };
-    }
-    /**
-     * Clamps the popup's coordinates to ensure it stays within the visible viewport.
-     * @param coords The calculated top and left coordinates.
-     * @returns The adjusted coordinates.
-     */
-    clampPopupCoordinates(coords) {
-        const { padding, width: popupWidth, height: popupHeight, safeMargin } = DEFAULT_VALUES.popup;
-        const scrollTop = window.scrollY;
-        const scrollLeft = window.scrollX;
-        const maxTop = scrollTop + window.innerHeight - popupHeight - safeMargin;
-        const maxLeft = scrollLeft + window.innerWidth - popupWidth - padding;
-        const top = Math.max(scrollTop + padding, Math.min(coords.top, maxTop));
-        const left = Math.max(scrollLeft + padding, Math.min(coords.left, maxLeft));
-        return { top, left };
-    }
-    /**
-     * If the popup is rendered inside a scrollable container, this ensures it's scrolled into view.
-     */
-    scrollPopupIntoView() {
-        setTimeout(() => {
-            const popupEl = document.querySelector('.tour-popup');
-            popupEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        }, 50);
-    }
-    /**
-     * method to execute highlight process after scroll
-     * @returns
-     */
-    waitForScroll() {
-        return new Promise(resolve => setTimeout(resolve, 100)); // ⏱️ Adjust delay if needed
-    }
-    /**
-     * method to create transparent hole in overlay for visibility of highlighted area
-     */
-    createTransparentHole() {
-        if (!this.currentElement)
-            return;
-        setTimeout(() => {
-            const padding = 5;
-            const rect = this.currentElement?.getBoundingClientRect();
-            const top = Math.max(rect?.top - padding, 0);
-            const left = Math.max(rect?.left - padding, 0);
-            const width = rect?.width + padding * 2;
-            const height = rect?.height + padding * 2;
-            const holeElement = document.querySelector('.hole');
-            this.renderer.setStyle(holeElement, 'left', `${left}px`);
-            this.renderer.setStyle(holeElement, 'top', `${top}px`);
-            this.renderer.setStyle(holeElement, 'width', `${width}px`);
-            this.renderer.setStyle(holeElement, 'height', `${height}px`);
-        }, 50);
-    }
-    /**
-     * method to get absolute offset
-     * @param element
-     * @returns
-     */
-    getAbsoluteOffset(element) {
-        let top = 0, left = 0;
-        let el = element;
-        while (el) {
-            top += el.offsetTop - el.scrollTop + el.clientTop;
-            left += el.offsetLeft - el.scrollLeft + el.clientLeft;
-            el = el.offsetParent;
-        }
-        return { top, left };
-    }
-    /**
-     * method to lock scroll when tour guide is active
-     */
-    lockScroll() {
-        this.renderer.setStyle(document.body, 'overflow', 'hidden');
-        this.renderer.setStyle(document.documentElement, 'overflow', 'hidden');
-        document.documentElement.classList.add('tour-scroll-lock');
-    }
-    /**
-     * method to unlock scroll when tour guide is not active
-     */
-    unlockScroll() {
-        this.renderer.removeStyle(document.body, 'overflow');
-        this.renderer.removeStyle(document.documentElement, 'overflow');
-        document.documentElement.classList.remove('tour-scroll-lock');
-    }
-    /**
-     * method to remove highlight when tour is skipped or done
-     */
-    removeHighlight() {
-        if (this.currentElement) {
-            this.renderer.removeClass(this.currentElement, 'tour-highlight');
-            this.renderer.removeStyle(this.currentElement, 'z-index');
-            this.renderer.removeStyle(this.currentElement, 'position');
-            this.renderer.removeStyle(this.currentElement, 'box-shadow');
-        }
-    }
-    /**
-     * debounce method for smooth operation
-     * @param fn
-     * @param delay
-     * @returns
-     */
-    debounce(fn, delay) {
-        let timeout;
-        return () => {
-            clearTimeout(timeout);
-            timeout = setTimeout(() => fn(), delay);
-        };
-    }
-    /**
-     * handling change on component destroy
-     */
-    ngOnDestroy() {
-        document.removeEventListener('keydown', this.handleKey);
-        // Clean up: move overlay back (optional)
-        if (this.overlayRef && this.originalParent) {
-            this.renderer.appendChild(this.originalParent, this.overlayRef.nativeElement);
-        }
-        if (this.resizeListener) {
-            window.removeEventListener('resize', this.resizeListener);
-        }
-    }
-}
-RuclibTourGuideComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibTourGuideComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-RuclibTourGuideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RuclibTourGuideComponent, selector: "uxp-ruclib-tour-guide", inputs: { rucInputData: "rucInputData", customTheme: "customTheme", showStartButton: "showStartButton", dataSource: "dataSource" }, outputs: { rucEvent: "rucEvent" }, viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button color=\"primary\" *ngIf=\"showStartButton\" mat-raised-button (click)=\"startTour()\">\r\n    {{startTourButtonLabel}}\r\n</button>\r\n\r\n<div id=\"tour-container\" class=\"{{ customTheme }}\" *ngIf=\"showTour\">\r\n    <div #overlayRef class=\"tour-overlay\" *ngIf=\"currentStepIndex < dataSource.length\">\r\n        <mat-card appearance=\"outlined\" class=\"tour-popup\" [style.minWidth]=\"config.defaultPopupWidth\"\r\n            [style.minHeight]=\"dataSource[currentStepIndex].shape === 'circle' ? config.defaultPopupWidth : 'auto'\"\r\n            [style.width]=\"dataSource[currentStepIndex].width || config.defaultPopupWidth\"\r\n            [style.height]=\"dataSource[currentStepIndex].shape === 'circle' ? dataSource[currentStepIndex].width || config.defaultPopupWidth : 'auto'\"\r\n            [ngClass]=\"dataSource[currentStepIndex].shape || 'rounded'\"\r\n            [ngStyle]=\"config.type === 'advance' ? popupStyle : null\" class=\"{{config.type}}\">\r\n\r\n            <!-- tour modal title -->\r\n            <mat-card-header class=\"tour-guide-title\">\r\n                <mat-card-title [style.fontSize]=\"config.titleFontSize\" *ngIf=\"dataSource[currentStepIndex].title\">\r\n                    {{ dataSource[currentStepIndex].title }}\r\n                </mat-card-title>\r\n            </mat-card-header>\r\n\r\n            <mat-card-content>\r\n                <!-- tour content details -->\r\n                <div class=\"tour-guide-content\" [style.fontSize]=\"config.contentFontSize\">\r\n                    <div [innerHTML]=\"dataSource[currentStepIndex].content\"></div>\r\n                </div>\r\n\r\n                <!-- tour step counter -->\r\n                <div class=\"tour-guide-step-counter\" [style.justifyContent]=\"config.stepCountAlignment\">\r\n                    {{config.stepCountStartText}} {{ currentStepIndex + 1 }} {{config.stepCountMiddleText}} {{\r\n                    dataSource.length }}\r\n                </div>\r\n            </mat-card-content>\r\n\r\n            <!-- tour action buttons -->\r\n            <mat-card-actions class=\"tour-guide-action-buttons\" [style.justifyContent]=\"config.buttonsAlignment\">\r\n                <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" *ngIf=\"config.showSkipButton\"\r\n                    (click)=\"skip()\">{{config.skipButtonText}}</button>\r\n\r\n                <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" (click)=\"previousStep()\"\r\n                    [disabled]=\"currentStepIndex === 0\">{{config.prevButtonText}}</button>\r\n\r\n                <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" (click)=\"nextStep()\">\r\n                    {{ currentStepIndex === dataSource.length - 1 ? config.finishButtonText : config.nextButtonText\r\n                    }}\r\n                </button>\r\n            </mat-card-actions>\r\n        </mat-card>\r\n\r\n        <!-- hole on overlayer for highlighted content -->\r\n        <div class=\"hole\" [style.borderColor]=\"config.highlightBorderColor\"\r\n            [style.borderWidth]=\"config.highlightBorderWidth\"></div>\r\n    </div>\r\n\r\n</div>", styles: [".tour-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;pointer-events:auto;display:flex;align-items:center;justify-content:center}::ng-deep .tour-scroll-lock *{overscroll-behavior:none;overflow:hidden!important;scrollbar-width:none;-ms-overflow-style:none}.tour-popup{position:absolute;padding:0;border-radius:4px;box-shadow:0 4px 12px #0000004d;z-index:10000;pointer-events:auto;display:flex;flex-direction:column;gap:.5rem;font-family:Arial,sans-serif;transition:all .3s ease;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;animation:fadeSlideIn .3s ease-out;-webkit-animation:fadeSlideIn .3s ease-out}.tour-guide-title{margin:5px 0}.tour-guide-action-buttons{display:flex;justify-content:end;gap:.5rem;min-height:45px}.tour-guide-action-buttons button{padding:0rem .5rem;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background .2s ease;height:25px}.tour-guide-action-buttons button:focus-visible{outline:none!important}.tour-guide-action-buttons button[disabled]{cursor:not-allowed}.tour-guide-step-counter{font-size:.8rem;display:flex;justify-content:start;margin-top:20px}.tour-highlight{position:relative!important;z-index:10000!important;border-radius:4px;transition:box-shadow .3s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hole{position:absolute;width:0px;height:0px;z-index:3;top:0%;left:0%;box-shadow:0 0 0 9999px #000c;background:transparent;border:2px solid #57d914;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px}.tour-popup.rounded{border-radius:12px}.tour-popup.rectangle{border-radius:0}.tour-popup.circle{border-radius:50%;justify-content:center;padding:2rem;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.tour-popup.circle .tour-guide-title{padding:0 1rem;justify-content:center}.tour-popup.circle .tour-guide-action-buttons,.tour-popup.circle .tour-guide-step-counter{justify-content:center!important}.mat-mdc-card-header,.mat-mdc-card-content{padding:0 10px!important}.mdc-button{min-width:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibTourGuideComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'uxp-ruclib-tour-guide', template: "<button color=\"primary\" *ngIf=\"showStartButton\" mat-raised-button (click)=\"startTour()\">\r\n    {{startTourButtonLabel}}\r\n</button>\r\n\r\n<div id=\"tour-container\" class=\"{{ customTheme }}\" *ngIf=\"showTour\">\r\n    <div #overlayRef class=\"tour-overlay\" *ngIf=\"currentStepIndex < dataSource.length\">\r\n        <mat-card appearance=\"outlined\" class=\"tour-popup\" [style.minWidth]=\"config.defaultPopupWidth\"\r\n            [style.minHeight]=\"dataSource[currentStepIndex].shape === 'circle' ? config.defaultPopupWidth : 'auto'\"\r\n            [style.width]=\"dataSource[currentStepIndex].width || config.defaultPopupWidth\"\r\n            [style.height]=\"dataSource[currentStepIndex].shape === 'circle' ? dataSource[currentStepIndex].width || config.defaultPopupWidth : 'auto'\"\r\n            [ngClass]=\"dataSource[currentStepIndex].shape || 'rounded'\"\r\n            [ngStyle]=\"config.type === 'advance' ? popupStyle : null\" class=\"{{config.type}}\">\r\n\r\n            <!-- tour modal title -->\r\n            <mat-card-header class=\"tour-guide-title\">\r\n                <mat-card-title [style.fontSize]=\"config.titleFontSize\" *ngIf=\"dataSource[currentStepIndex].title\">\r\n                    {{ dataSource[currentStepIndex].title }}\r\n                </mat-card-title>\r\n            </mat-card-header>\r\n\r\n            <mat-card-content>\r\n                <!-- tour content details -->\r\n                <div class=\"tour-guide-content\" [style.fontSize]=\"config.contentFontSize\">\r\n                    <div [innerHTML]=\"dataSource[currentStepIndex].content\"></div>\r\n                </div>\r\n\r\n                <!-- tour step counter -->\r\n                <div class=\"tour-guide-step-counter\" [style.justifyContent]=\"config.stepCountAlignment\">\r\n                    {{config.stepCountStartText}} {{ currentStepIndex + 1 }} {{config.stepCountMiddleText}} {{\r\n                    dataSource.length }}\r\n                </div>\r\n            </mat-card-content>\r\n\r\n            <!-- tour action buttons -->\r\n            <mat-card-actions class=\"tour-guide-action-buttons\" [style.justifyContent]=\"config.buttonsAlignment\">\r\n                <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" *ngIf=\"config.showSkipButton\"\r\n                    (click)=\"skip()\">{{config.skipButtonText}}</button>\r\n\r\n                <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" (click)=\"previousStep()\"\r\n                    [disabled]=\"currentStepIndex === 0\">{{config.prevButtonText}}</button>\r\n\r\n                <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" (click)=\"nextStep()\">\r\n                    {{ currentStepIndex === dataSource.length - 1 ? config.finishButtonText : config.nextButtonText\r\n                    }}\r\n                </button>\r\n            </mat-card-actions>\r\n        </mat-card>\r\n\r\n        <!-- hole on overlayer for highlighted content -->\r\n        <div class=\"hole\" [style.borderColor]=\"config.highlightBorderColor\"\r\n            [style.borderWidth]=\"config.highlightBorderWidth\"></div>\r\n    </div>\r\n\r\n</div>", styles: [".tour-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;pointer-events:auto;display:flex;align-items:center;justify-content:center}::ng-deep .tour-scroll-lock *{overscroll-behavior:none;overflow:hidden!important;scrollbar-width:none;-ms-overflow-style:none}.tour-popup{position:absolute;padding:0;border-radius:4px;box-shadow:0 4px 12px #0000004d;z-index:10000;pointer-events:auto;display:flex;flex-direction:column;gap:.5rem;font-family:Arial,sans-serif;transition:all .3s ease;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;animation:fadeSlideIn .3s ease-out;-webkit-animation:fadeSlideIn .3s ease-out}.tour-guide-title{margin:5px 0}.tour-guide-action-buttons{display:flex;justify-content:end;gap:.5rem;min-height:45px}.tour-guide-action-buttons button{padding:0rem .5rem;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background .2s ease;height:25px}.tour-guide-action-buttons button:focus-visible{outline:none!important}.tour-guide-action-buttons button[disabled]{cursor:not-allowed}.tour-guide-step-counter{font-size:.8rem;display:flex;justify-content:start;margin-top:20px}.tour-highlight{position:relative!important;z-index:10000!important;border-radius:4px;transition:box-shadow .3s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hole{position:absolute;width:0px;height:0px;z-index:3;top:0%;left:0%;box-shadow:0 0 0 9999px #000c;background:transparent;border:2px solid #57d914;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px}.tour-popup.rounded{border-radius:12px}.tour-popup.rectangle{border-radius:0}.tour-popup.circle{border-radius:50%;justify-content:center;padding:2rem;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.tour-popup.circle .tour-guide-title{padding:0 1rem;justify-content:center}.tour-popup.circle .tour-guide-action-buttons,.tour-popup.circle .tour-guide-step-counter{justify-content:center!important}.mat-mdc-card-header,.mat-mdc-card-content{padding:0 10px!important}.mdc-button{min-width:50px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { rucEvent: [{
-                type: Output
-            }], rucInputData: [{
-                type: Input
-            }], customTheme: [{
-                type: Input
-            }], showStartButton: [{
-                type: Input
-            }], dataSource: [{
-                type: Input
-            }], overlayRef: [{
-                type: ViewChild,
-                args: ['overlayRef']
+class RuclibTourGuideComponent {
+    /**
+     * class constructor
+     * @param tourGuideService
+     * @param renderer
+     */
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.rucEvent = new EventEmitter();
+        this.showStartButton = false;
+        this.dataSource = [];
+        this.currentStepIndex = 0;
+        this.showTour = false;
+        this.startTourButtonLabel = DEFAULT_VALUES?.startTourButtonLabel;
+        this.config = defaultTourGuideConfig;
+        /**
+         * method to navigate between tour slides or skip tour using left, right and skip key
+         * @param event
+         * @returns
+         */
+        this.handleKey = (event) => {
+            if (!this.showTour)
+                return;
+            if (event.key === DEFAULT_VALUES.arrowRight)
+                this.nextStep();
+            else if (event.key === DEFAULT_VALUES.arrowLeft)
+                this.previousStep();
+            else if (event.key === DEFAULT_VALUES.escape)
+                this.skip();
+        };
+    }
+    /**
+      * handling input data changes
+      * updating default config with user provided config
+      * @param changes
+      */
+    ngOnChanges(changes) {
+        if (changes && changes['rucInputData'] && changes['rucInputData'].currentValue) {
+            this.config = { ...this.config, ...changes['rucInputData'].currentValue };
+        }
+    }
+    /**
+     * handling change on component initilization
+     */
+    ngOnInit() {
+        document.addEventListener('keydown', this.handleKey);
+        this.resizeListener = this.debounce(() => this.highlightElement(), 150);
+        window.addEventListener('resize', this.resizeListener);
+        if (!this.showStartButton) {
+            this.startTour();
+        }
+    }
+    /**
+     * this method handle the start of tour guide fetaure
+     */
+    startTour() {
+        this.showTour = true;
+        this.lockScroll();
+        setTimeout(() => {
+            if (!this.originalParent) {
+                this.originalParent = this.renderer.parentNode(this.overlayRef?.nativeElement);
+            }
+            if (this.overlayRef) {
+                this.renderer.appendChild(document.body, this.overlayRef?.nativeElement);
+            }
+            this.currentStepIndex = 0;
+            if (this.config.type === 'advance') {
+                this.highlightElement();
+            }
+        }, 10);
+    }
+    /**
+     * this method handle the navigation to next tour guide feature
+     */
+    nextStep() {
+        this.removeHighlight();
+        this.currentStepIndex++;
+        if (this.currentStepIndex < this.dataSource.length) {
+            if (this.config.type === 'advance')
+                this.highlightElement();
+        }
+        else {
+            this.currentStepIndex--;
+            this.showTour = false;
+            this.unlockScroll();
+            this.rucEvent.emit({ eventName: 'onTourComplete', eventOutput: null });
+            if (this.overlayRef) {
+                this.renderer.removeChild(document.body, this.overlayRef.nativeElement);
+            }
+        }
+    }
+    /**
+     * this method allow us to navigate back to previous tour guide feature
+     */
+    previousStep() {
+        if (this.currentStepIndex > 0) {
+            this.removeHighlight();
+            this.currentStepIndex--;
+            if (this.config.type === 'advance')
+                this.highlightElement();
+        }
+    }
+    /**
+     * method to skip the tour guide thats in progress
+     */
+    skip() {
+        this.removeHighlight();
+        this.showTour = false;
+        this.unlockScroll();
+        this.rucEvent.emit({ eventName: 'onTourSkip', eventOutput: null });
+        if (this.overlayRef) {
+            this.renderer.removeChild(document.body, this.overlayRef.nativeElement);
+        }
+    }
+    /**
+     * method to highlight feature area and changin details popup based on provide config
+     * @returns
+     */
+    async highlightElement() {
+        const step = this.dataSource[this.currentStepIndex];
+        if (this.config.type === 'simple' || !step?.selector) {
+            return;
+        }
+        // 1. Find and scroll to the element
+        this.currentElement = await this.findElementAndScroll(step.selector);
+        if (!this.currentElement) {
+            return;
+        }
+        // 2. Apply highlight styles
+        this.applyHighlightStyles(this.currentElement);
+        // 3. Calculate and apply popup position
+        this.calculateAndApplyPopupPosition(this.currentElement, step.position);
+        // 4. Create the visual hole in the overlay
+        this.createTransparentHole();
+    }
+    /**
+     * Finds an element by its selector, scrolls it into view, and waits for the scroll to complete.
+     * @param selector The CSS selector for the target element.
+     * @returns A promise that resolves to the HTMLElement or undefined if not found.
+     */
+    async findElementAndScroll(selector) {
+        const element = document.querySelector(selector);
+        if (!element) {
+            return undefined;
+        }
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        await this.waitForScroll();
+        return element;
+    }
+    /**
+     * Applies CSS classes and styles to visually highlight the target element.
+     * @param element The element to highlight.
+     */
+    applyHighlightStyles(element) {
+        this.renderer.addClass(element, 'tour-highlight');
+        this.renderer.setStyle(element, 'position', 'relative');
+        this.renderer.setStyle(element, 'z-index', '10000');
+    }
+    /**
+     * Calculates the optimal position for the tour popup and applies it.
+     * @param element The highlighted element.
+     * @param position The desired position ('auto', 'top', 'bottom', 'left', 'right').
+     */
+    calculateAndApplyPopupPosition(element, position = 'auto') {
+        const rect = element.getBoundingClientRect();
+        const offset = this.getAbsoluteOffset(element);
+        // Determine the best position if set to 'auto'
+        const finalPosition = this.determineAutoPosition(position, rect);
+        // Get the top/left coordinates based on the position
+        let coords = this.computePopupCoordinates(finalPosition, offset, element);
+        // Ensure the coordinates are within the viewport
+        coords = this.clampPopupCoordinates(coords);
+        // Apply the final styles to the popup
+        this.popupStyle = {
+            top: `${coords.top}px`,
+            left: `${coords.left}px`
+        };
+        // Ensure the popup itself is visible
+        this.scrollPopupIntoView();
+    }
+    /**
+     * Determines the best placement for the popup when position is 'auto'.
+     * @param position The configured position.
+     * @param rect The BoundingClientRect of the target element.
+     * @returns The calculated final position.
+     */
+    determineAutoPosition(position, rect) {
+        if (position !== 'auto') {
+            return position;
+        }
+        const { padding, width: popupWidth, height: popupHeight, safeMargin } = DEFAULT_VALUES.popup;
+        const fitsTop = rect.top >= popupHeight + padding;
+        const fitsBottom = window.innerHeight - rect.bottom >= popupHeight + padding + safeMargin;
+        const fitsRight = window.innerWidth - rect.right >= popupWidth + padding;
+        const fitsLeft = rect.left >= popupWidth + padding;
+        if (fitsRight)
+            return 'right';
+        if (fitsBottom)
+            return 'bottom';
+        if (fitsLeft)
+            return 'left';
+        if (fitsTop)
+            return 'top';
+        return 'bottom'; // fallback
+    }
+    /**
+     * Computes the top and left coordinates for the popup based on the target element and desired position.
+     * @param position The final position for the popup.
+     * @param offset The absolute offset of the target element.
+     * @param element The target element.
+     * @returns An object with top and left coordinates.
+     */
+    computePopupCoordinates(position, offset, element) {
+        const { padding, width: popupWidth, height: popupHeight } = DEFAULT_VALUES.popup;
+        let top = DEFAULT_VALUES.popup.top;
+        let left = DEFAULT_VALUES.popup.left;
+        switch (position) {
+            case 'top':
+                top = offset.top - popupHeight - padding - 20;
+                left = offset.left + element.offsetWidth / 2 - popupWidth / 2;
+                break;
+            case 'bottom':
+                top = offset.top + element.offsetHeight + padding;
+                left = offset.left + element.offsetWidth / 2 - popupWidth / 2;
+                break;
+            case 'left':
+                top = offset.top + element.offsetHeight / 2 - popupHeight / 2;
+                left = offset.left - popupWidth - padding + 50;
+                break;
+            case 'right':
+                top = offset.top + element.offsetHeight / 2 - popupHeight / 2;
+                left = offset.left + element.offsetWidth + padding;
+                break;
+        }
+        return { top, left };
+    }
+    /**
+     * Clamps the popup's coordinates to ensure it stays within the visible viewport.
+     * @param coords The calculated top and left coordinates.
+     * @returns The adjusted coordinates.
+     */
+    clampPopupCoordinates(coords) {
+        const { padding, width: popupWidth, height: popupHeight, safeMargin } = DEFAULT_VALUES.popup;
+        const scrollTop = window.scrollY;
+        const scrollLeft = window.scrollX;
+        const maxTop = scrollTop + window.innerHeight - popupHeight - safeMargin;
+        const maxLeft = scrollLeft + window.innerWidth - popupWidth - padding;
+        const top = Math.max(scrollTop + padding, Math.min(coords.top, maxTop));
+        const left = Math.max(scrollLeft + padding, Math.min(coords.left, maxLeft));
+        return { top, left };
+    }
+    /**
+     * If the popup is rendered inside a scrollable container, this ensures it's scrolled into view.
+     */
+    scrollPopupIntoView() {
+        setTimeout(() => {
+            const popupEl = document.querySelector('.tour-popup');
+            popupEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }, 50);
+    }
+    /**
+     * method to execute highlight process after scroll
+     * @returns
+     */
+    waitForScroll() {
+        return new Promise(resolve => setTimeout(resolve, 100)); // ⏱️ Adjust delay if needed
+    }
+    /**
+     * method to create transparent hole in overlay for visibility of highlighted area
+     */
+    createTransparentHole() {
+        if (!this.currentElement)
+            return;
+        setTimeout(() => {
+            const padding = 5;
+            const rect = this.currentElement?.getBoundingClientRect();
+            const top = Math.max(rect?.top - padding, 0);
+            const left = Math.max(rect?.left - padding, 0);
+            const width = rect?.width + padding * 2;
+            const height = rect?.height + padding * 2;
+            const holeElement = document.querySelector('.hole');
+            this.renderer.setStyle(holeElement, 'left', `${left}px`);
+            this.renderer.setStyle(holeElement, 'top', `${top}px`);
+            this.renderer.setStyle(holeElement, 'width', `${width}px`);
+            this.renderer.setStyle(holeElement, 'height', `${height}px`);
+        }, 50);
+    }
+    /**
+     * method to get absolute offset
+     * @param element
+     * @returns
+     */
+    getAbsoluteOffset(element) {
+        let top = 0, left = 0;
+        let el = element;
+        while (el) {
+            top += el.offsetTop - el.scrollTop + el.clientTop;
+            left += el.offsetLeft - el.scrollLeft + el.clientLeft;
+            el = el.offsetParent;
+        }
+        return { top, left };
+    }
+    /**
+     * method to lock scroll when tour guide is active
+     */
+    lockScroll() {
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
+        this.renderer.setStyle(document.documentElement, 'overflow', 'hidden');
+        document.documentElement.classList.add('tour-scroll-lock');
+    }
+    /**
+     * method to unlock scroll when tour guide is not active
+     */
+    unlockScroll() {
+        this.renderer.removeStyle(document.body, 'overflow');
+        this.renderer.removeStyle(document.documentElement, 'overflow');
+        document.documentElement.classList.remove('tour-scroll-lock');
+    }
+    /**
+     * method to remove highlight when tour is skipped or done
+     */
+    removeHighlight() {
+        if (this.currentElement) {
+            this.renderer.removeClass(this.currentElement, 'tour-highlight');
+            this.renderer.removeStyle(this.currentElement, 'z-index');
+            this.renderer.removeStyle(this.currentElement, 'position');
+            this.renderer.removeStyle(this.currentElement, 'box-shadow');
+        }
+    }
+    /**
+     * debounce method for smooth operation
+     * @param fn
+     * @param delay
+     * @returns
+     */
+    debounce(fn, delay) {
+        let timeout;
+        return () => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => fn(), delay);
+        };
+    }
+    /**
+     * handling change on component destroy
+     */
+    ngOnDestroy() {
+        document.removeEventListener('keydown', this.handleKey);
+        // Clean up: move overlay back (optional)
+        if (this.overlayRef && this.originalParent) {
+            this.renderer.appendChild(this.originalParent, this.overlayRef.nativeElement);
+        }
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibTourGuideComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibTourGuideComponent, isStandalone: true, selector: "uxp-ruclib-tour-guide", inputs: { rucInputData: "rucInputData", customTheme: "customTheme", showStartButton: "showStartButton", dataSource: "dataSource" }, outputs: { rucEvent: "rucEvent" }, viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showStartButton) {\r\n  <button color=\"primary\" mat-raised-button (click)=\"startTour()\">\r\n    {{startTourButtonLabel}}\r\n  </button>\r\n}\r\n\r\n@if (showTour) {\r\n  <div id=\"tour-container\" class=\"{{ customTheme }}\">\r\n    @if (currentStepIndex < dataSource.length) {\r\n      <div #overlayRef class=\"tour-overlay\">\r\n        <mat-card appearance=\"outlined\" class=\"tour-popup\" [style.minWidth]=\"config.defaultPopupWidth\"\r\n          [style.minHeight]=\"dataSource[currentStepIndex].shape === 'circle' ? config.defaultPopupWidth : 'auto'\"\r\n          [style.width]=\"dataSource[currentStepIndex].width || config.defaultPopupWidth\"\r\n          [style.height]=\"dataSource[currentStepIndex].shape === 'circle' ? dataSource[currentStepIndex].width || config.defaultPopupWidth : 'auto'\"\r\n          [ngClass]=\"dataSource[currentStepIndex].shape || 'rounded'\"\r\n          [ngStyle]=\"config.type === 'advance' ? popupStyle : null\" class=\"{{config.type}}\">\r\n          <!-- tour modal title -->\r\n          <mat-card-header class=\"tour-guide-title\">\r\n            @if (dataSource[currentStepIndex].title) {\r\n              <mat-card-title [style.fontSize]=\"config.titleFontSize\">\r\n                {{ dataSource[currentStepIndex].title }}\r\n              </mat-card-title>\r\n            }\r\n          </mat-card-header>\r\n          <mat-card-content>\r\n            <!-- tour content details -->\r\n            <div class=\"tour-guide-content\" [style.fontSize]=\"config.contentFontSize\">\r\n              <div [innerHTML]=\"dataSource[currentStepIndex].content\"></div>\r\n            </div>\r\n            <!-- tour step counter -->\r\n            <div class=\"tour-guide-step-counter\" [style.justifyContent]=\"config.stepCountAlignment\">\r\n              {{config.stepCountStartText}} {{ currentStepIndex + 1 }} {{config.stepCountMiddleText}} {{\r\n              dataSource.length }}\r\n            </div>\r\n          </mat-card-content>\r\n          <!-- tour action buttons -->\r\n          <mat-card-actions class=\"tour-guide-action-buttons\" [style.justifyContent]=\"config.buttonsAlignment\">\r\n            @if (config.showSkipButton) {\r\n              <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\"\r\n              (click)=\"skip()\">{{config.skipButtonText}}</button>\r\n            }\r\n            <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" (click)=\"previousStep()\"\r\n            [disabled]=\"currentStepIndex === 0\">{{config.prevButtonText}}</button>\r\n            <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" (click)=\"nextStep()\">\r\n              {{ currentStepIndex === dataSource.length - 1 ? config.finishButtonText : config.nextButtonText\r\n              }}\r\n            </button>\r\n          </mat-card-actions>\r\n        </mat-card>\r\n        <!-- hole on overlayer for highlighted content -->\r\n        <div class=\"hole\" [style.borderColor]=\"config.highlightBorderColor\"\r\n        [style.borderWidth]=\"config.highlightBorderWidth\"></div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".tour-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;pointer-events:auto;display:flex;align-items:center;justify-content:center}::ng-deep .tour-scroll-lock *{overscroll-behavior:none;overflow:hidden!important;scrollbar-width:none;-ms-overflow-style:none}.tour-popup{position:absolute;padding:0;border-radius:4px;box-shadow:0 4px 12px #0000004d;z-index:10000;pointer-events:auto;display:flex;flex-direction:column;gap:.5rem;font-family:Arial,sans-serif;transition:all .3s ease;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;animation:fadeSlideIn .3s ease-out;-webkit-animation:fadeSlideIn .3s ease-out}.tour-guide-title{margin:5px 0}.tour-guide-action-buttons{display:flex;justify-content:end;gap:.5rem;min-height:45px}.tour-guide-action-buttons button{padding:0rem .5rem;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background .2s ease;height:25px}.tour-guide-action-buttons button:focus-visible{outline:none!important}.tour-guide-action-buttons button[disabled]{cursor:not-allowed}.tour-guide-step-counter{font-size:.8rem;display:flex;justify-content:start;margin-top:20px}.tour-highlight{position:relative!important;z-index:10000!important;border-radius:4px;transition:box-shadow .3s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hole{position:absolute;width:0px;height:0px;z-index:3;top:0%;left:0%;box-shadow:0 0 0 9999px #000c;background:transparent;border:2px solid #57d914;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px}.tour-popup.rounded{border-radius:12px}.tour-popup.rectangle{border-radius:0}.tour-popup.circle{border-radius:50%;justify-content:center;padding:2rem;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.tour-popup.circle .tour-guide-title{padding:0 1rem;justify-content:center}.tour-popup.circle .tour-guide-action-buttons,.tour-popup.circle .tour-guide-step-counter{justify-content:center!important}.mat-mdc-card-header,.mat-mdc-card-content{padding:0 10px!important}.mdc-button{min-width:50px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibTourGuideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-tour-guide', imports: [CommonModule, MatCardModule, MatButtonModule], template: "@if (showStartButton) {\r\n  <button color=\"primary\" mat-raised-button (click)=\"startTour()\">\r\n    {{startTourButtonLabel}}\r\n  </button>\r\n}\r\n\r\n@if (showTour) {\r\n  <div id=\"tour-container\" class=\"{{ customTheme }}\">\r\n    @if (currentStepIndex < dataSource.length) {\r\n      <div #overlayRef class=\"tour-overlay\">\r\n        <mat-card appearance=\"outlined\" class=\"tour-popup\" [style.minWidth]=\"config.defaultPopupWidth\"\r\n          [style.minHeight]=\"dataSource[currentStepIndex].shape === 'circle' ? config.defaultPopupWidth : 'auto'\"\r\n          [style.width]=\"dataSource[currentStepIndex].width || config.defaultPopupWidth\"\r\n          [style.height]=\"dataSource[currentStepIndex].shape === 'circle' ? dataSource[currentStepIndex].width || config.defaultPopupWidth : 'auto'\"\r\n          [ngClass]=\"dataSource[currentStepIndex].shape || 'rounded'\"\r\n          [ngStyle]=\"config.type === 'advance' ? popupStyle : null\" class=\"{{config.type}}\">\r\n          <!-- tour modal title -->\r\n          <mat-card-header class=\"tour-guide-title\">\r\n            @if (dataSource[currentStepIndex].title) {\r\n              <mat-card-title [style.fontSize]=\"config.titleFontSize\">\r\n                {{ dataSource[currentStepIndex].title }}\r\n              </mat-card-title>\r\n            }\r\n          </mat-card-header>\r\n          <mat-card-content>\r\n            <!-- tour content details -->\r\n            <div class=\"tour-guide-content\" [style.fontSize]=\"config.contentFontSize\">\r\n              <div [innerHTML]=\"dataSource[currentStepIndex].content\"></div>\r\n            </div>\r\n            <!-- tour step counter -->\r\n            <div class=\"tour-guide-step-counter\" [style.justifyContent]=\"config.stepCountAlignment\">\r\n              {{config.stepCountStartText}} {{ currentStepIndex + 1 }} {{config.stepCountMiddleText}} {{\r\n              dataSource.length }}\r\n            </div>\r\n          </mat-card-content>\r\n          <!-- tour action buttons -->\r\n          <mat-card-actions class=\"tour-guide-action-buttons\" [style.justifyContent]=\"config.buttonsAlignment\">\r\n            @if (config.showSkipButton) {\r\n              <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\"\r\n              (click)=\"skip()\">{{config.skipButtonText}}</button>\r\n            }\r\n            <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" (click)=\"previousStep()\"\r\n            [disabled]=\"currentStepIndex === 0\">{{config.prevButtonText}}</button>\r\n            <button mat-raised-button [style.fontSize]=\"config.buttonsFontSize\" (click)=\"nextStep()\">\r\n              {{ currentStepIndex === dataSource.length - 1 ? config.finishButtonText : config.nextButtonText\r\n              }}\r\n            </button>\r\n          </mat-card-actions>\r\n        </mat-card>\r\n        <!-- hole on overlayer for highlighted content -->\r\n        <div class=\"hole\" [style.borderColor]=\"config.highlightBorderColor\"\r\n        [style.borderWidth]=\"config.highlightBorderWidth\"></div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".tour-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;pointer-events:auto;display:flex;align-items:center;justify-content:center}::ng-deep .tour-scroll-lock *{overscroll-behavior:none;overflow:hidden!important;scrollbar-width:none;-ms-overflow-style:none}.tour-popup{position:absolute;padding:0;border-radius:4px;box-shadow:0 4px 12px #0000004d;z-index:10000;pointer-events:auto;display:flex;flex-direction:column;gap:.5rem;font-family:Arial,sans-serif;transition:all .3s ease;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;animation:fadeSlideIn .3s ease-out;-webkit-animation:fadeSlideIn .3s ease-out}.tour-guide-title{margin:5px 0}.tour-guide-action-buttons{display:flex;justify-content:end;gap:.5rem;min-height:45px}.tour-guide-action-buttons button{padding:0rem .5rem;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background .2s ease;height:25px}.tour-guide-action-buttons button:focus-visible{outline:none!important}.tour-guide-action-buttons button[disabled]{cursor:not-allowed}.tour-guide-step-counter{font-size:.8rem;display:flex;justify-content:start;margin-top:20px}.tour-highlight{position:relative!important;z-index:10000!important;border-radius:4px;transition:box-shadow .3s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hole{position:absolute;width:0px;height:0px;z-index:3;top:0%;left:0%;box-shadow:0 0 0 9999px #000c;background:transparent;border:2px solid #57d914;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px}.tour-popup.rounded{border-radius:12px}.tour-popup.rectangle{border-radius:0}.tour-popup.circle{border-radius:50%;justify-content:center;padding:2rem;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.tour-popup.circle .tour-guide-title{padding:0 1rem;justify-content:center}.tour-popup.circle .tour-guide-action-buttons,.tour-popup.circle .tour-guide-step-counter{justify-content:center!important}.mat-mdc-card-header,.mat-mdc-card-content{padding:0 10px!important}.mdc-button{min-width:50px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { rucEvent: [{
+                type: Output
+            }], rucInputData: [{
+                type: Input
+            }], customTheme: [{
+                type: Input
+            }], showStartButton: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], overlayRef: [{
+                type: ViewChild,
+                args: ['overlayRef']
             }] } });
 
-class RuclibTourGuideModule {
-}
-RuclibTourGuideModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibTourGuideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuclibTourGuideModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibTourGuideModule, declarations: [RuclibTourGuideComponent], imports: [CommonModule, MatButtonModule, MatCardModule], exports: [RuclibTourGuideComponent] });
-RuclibTourGuideModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibTourGuideModule, imports: [CommonModule, MatButtonModule, MatCardModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibTourGuideModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, MatButtonModule, MatCardModule],
-                    declarations: [RuclibTourGuideComponent],
-                    exports: [RuclibTourGuideComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { RuclibTourGuideComponent, RuclibTourGuideModule };
+export { RuclibTourGuideComponent };
 //# sourceMappingURL=ruc-lib-tour-guide.mjs.map