@ruc-lib/tour-guide 3.1.0 → 3.2.0

package/fesm2022/ruc-lib-tour-guide.mjs

@@ -1,417 +0,0 @@
-import * as i3 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-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'
-};
-
-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']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { RuclibTourGuideComponent };
-//# sourceMappingURL=ruc-lib-tour-guide.mjs.map

package/fesm2022/ruc-lib-tour-guide.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ruc-lib-tour-guide.mjs","sources":["../../src/lib/model/default-config.model.ts","../../src/lib/ruclib-tour-guide/ruclib-tour-guide.component.ts","../../src/lib/ruclib-tour-guide/ruclib-tour-guide.component.html","../../src/ruc-lib-tour-guide.ts"],"sourcesContent":["import { TourGuideConfig } from \"./tour-guide.model\";\r\n\r\nexport const defaultTourGuideConfig: TourGuideConfig = {\r\n    type: \"advance\",\r\n    showSkipButton: true,\r\n    buttonsFontSize: \"14px\",\r\n    titleFontSize: '16px',\r\n    contentFontSize: '14px',\r\n    buttonsAlignment: 'end',\r\n    stepCountAlignment: 'start',\r\n    stepCountStartText: 'Step',\r\n    stepCountMiddleText: 'of',\r\n    skipButtonText: 'Skip',\r\n    prevButtonText: 'Back',\r\n    nextButtonText: 'Next',\r\n    finishButtonText: 'Finish',\r\n    highlightBorderColor: '#007bff',\r\n    highlightBorderWidth: '2px',\r\n    defaultPopupWidth: '250px',\r\n}\r\n\r\nexport const DEFAULT_VALUES = {\r\n    arrowRight: 'ArrowRight',\r\n    arrowLeft: 'ArrowLeft',\r\n    escape: 'Escape',\r\n    popup: {width: 300, height: 150, top: 0, left: 0, padding: 10, safeMargin: 64},\r\n    startTourButtonLabel: 'Start Tour Guide'\r\n  }","import { MatButtonModule } from '@angular/material/button';\r\nimport { MatCardModule } from '@angular/material/card';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Component, Input, Output, EventEmitter, Renderer2, OnInit, OnDestroy, ElementRef, ViewChild, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';\r\nimport { TourGuideConfig, TourGuideData } from '../model/tour-guide.model';\r\nimport { DEFAULT_VALUES, defaultTourGuideConfig } from '../model/default-config.model';\r\n\r\n@Component({\r\n    selector: 'uxp-ruclib-tour-guide',\r\n    imports: [CommonModule, MatCardModule, MatButtonModule],\r\n    templateUrl: './ruclib-tour-guide.component.html',\r\n    styleUrls: ['./ruclib-tour-guide.component.scss']\r\n})\r\nexport class RuclibTourGuideComponent implements OnInit, OnDestroy, OnChanges {\r\n  @Output() rucEvent = new EventEmitter<any>();\r\n  @Input() rucInputData!: TourGuideConfig;\r\n  @Input() customTheme: string | undefined;\r\n  @Input() showStartButton = false;\r\n  @Input() dataSource: Array<TourGuideData> = [];\r\n\r\n  @ViewChild('overlayRef') overlayRef!: ElementRef;\r\n\r\n  public currentStepIndex = 0;\r\n  private currentElement?: HTMLElement;\r\n  public popupStyle!: { top: string; left: string };\r\n  private originalParent?: HTMLElement;\r\n  public showTour = false;\r\n  public startTourButtonLabel = DEFAULT_VALUES?.startTourButtonLabel;\r\n  private resizeListener: any;\r\n  public config = defaultTourGuideConfig;\r\n\r\n  /**\r\n   * class constructor\r\n   * @param tourGuideService\r\n   * @param renderer\r\n   */\r\n  constructor(\r\n    private renderer: Renderer2\r\n  ) { }\r\n\r\n  /**\r\n    * handling input data changes\r\n    * updating default config with user provided config\r\n    * @param changes\r\n    */\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    if (changes && changes['rucInputData'] && changes['rucInputData'].currentValue) {\r\n      this.config = { ...this.config, ...changes['rucInputData'].currentValue }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * handling change on component initilization\r\n   */\r\n  ngOnInit() {\r\n    document.addEventListener('keydown', this.handleKey);\r\n    this.resizeListener = this.debounce(() => this.highlightElement(), 150);\r\n    window.addEventListener('resize', this.resizeListener);\r\n\r\n    if (!this.showStartButton) {\r\n      this.startTour()\r\n    }\r\n  }\r\n\r\n  /**\r\n   * this method handle the start of tour guide fetaure\r\n   */\r\n  startTour() {\r\n    this.showTour = true;\r\n    this.lockScroll();\r\n    setTimeout(() => {\r\n      if (!this.originalParent) {\r\n       this.originalParent = this.renderer.parentNode(this.overlayRef?.nativeElement);\r\n      }\r\n      if (this.overlayRef) {\r\n        this.renderer.appendChild(document.body, this.overlayRef?.nativeElement);\r\n      }\r\n      this.currentStepIndex = 0;\r\n      if (this.config.type === 'advance') {\r\n        this.highlightElement();\r\n      }\r\n    }, 10)\r\n  }\r\n\r\n  /**\r\n   * this method handle the navigation to next tour guide feature\r\n   */\r\n  nextStep() {\r\n    this.removeHighlight();\r\n    this.currentStepIndex++;\r\n    if (this.currentStepIndex < this.dataSource.length) {\r\n      if (this.config.type === 'advance') this.highlightElement();\r\n    } else {\r\n      this.currentStepIndex--;\r\n      this.showTour = false;\r\n      this.unlockScroll();\r\n      this.rucEvent.emit({ eventName: 'onTourComplete', eventOutput: null });\r\n      if (this.overlayRef) {\r\n        this.renderer.removeChild(document.body, this.overlayRef.nativeElement);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * this method allow us to navigate back to previous tour guide feature\r\n   */\r\n  previousStep() {\r\n    if (this.currentStepIndex > 0) {\r\n      this.removeHighlight();\r\n      this.currentStepIndex--;\r\n      if (this.config.type === 'advance') this.highlightElement();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * method to skip the tour guide thats in progress\r\n   */\r\n  skip() {\r\n    this.removeHighlight();\r\n    this.showTour = false;\r\n    this.unlockScroll();\r\n    this.rucEvent.emit({ eventName: 'onTourSkip', eventOutput: null });\r\n    if (this.overlayRef) {\r\n      this.renderer.removeChild(document.body, this.overlayRef.nativeElement);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * method to highlight feature area and changin details popup based on provide config\r\n   * @returns\r\n   */\r\n  private async highlightElement() {\r\n    const step = this.dataSource[this.currentStepIndex];\r\n    if (this.config.type === 'simple' || !step?.selector) {\r\n      return;\r\n    }\r\n\r\n    // 1. Find and scroll to the element\r\n    this.currentElement = await this.findElementAndScroll(step.selector);\r\n    if (!this.currentElement) {\r\n      return;\r\n    }\r\n\r\n    // 2. Apply highlight styles\r\n    this.applyHighlightStyles(this.currentElement);\r\n\r\n    // 3. Calculate and apply popup position\r\n    this.calculateAndApplyPopupPosition(this.currentElement, step.position);\r\n\r\n    // 4. Create the visual hole in the overlay\r\n    this.createTransparentHole();\r\n  }\r\n\r\n  /**\r\n   * Finds an element by its selector, scrolls it into view, and waits for the scroll to complete.\r\n   * @param selector The CSS selector for the target element.\r\n   * @returns A promise that resolves to the HTMLElement or undefined if not found.\r\n   */\r\n  private async findElementAndScroll(selector: string): Promise<HTMLElement | undefined> {\r\n    const element = document.querySelector(selector) as HTMLElement;\r\n    if (!element) {\r\n      return undefined;\r\n    }\r\n    element.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n    await this.waitForScroll();\r\n    return element;\r\n  }\r\n\r\n  /**\r\n   * Applies CSS classes and styles to visually highlight the target element.\r\n   * @param element The element to highlight.\r\n   */\r\n  private applyHighlightStyles(element: HTMLElement): void {\r\n    this.renderer.addClass(element, 'tour-highlight');\r\n    this.renderer.setStyle(element, 'position', 'relative');\r\n    this.renderer.setStyle(element, 'z-index', '10000');\r\n  }\r\n\r\n  /**\r\n   * Calculates the optimal position for the tour popup and applies it.\r\n   * @param element The highlighted element.\r\n   * @param position The desired position ('auto', 'top', 'bottom', 'left', 'right').\r\n   */\r\n  private calculateAndApplyPopupPosition(element: HTMLElement, position = 'auto'): void {\r\n    const rect = element.getBoundingClientRect();\r\n    const offset = this.getAbsoluteOffset(element);\r\n\r\n    // Determine the best position if set to 'auto'\r\n    const finalPosition = this.determineAutoPosition(position, rect);\r\n\r\n    // Get the top/left coordinates based on the position\r\n    let coords = this.computePopupCoordinates(finalPosition, offset, element);\r\n\r\n    // Ensure the coordinates are within the viewport\r\n    coords = this.clampPopupCoordinates(coords);\r\n\r\n    // Apply the final styles to the popup\r\n    this.popupStyle = {\r\n      top: `${coords.top}px`,\r\n      left: `${coords.left}px`\r\n    };\r\n\r\n    // Ensure the popup itself is visible\r\n    this.scrollPopupIntoView();\r\n  }\r\n\r\n  /**\r\n   * Determines the best placement for the popup when position is 'auto'.\r\n   * @param position The configured position.\r\n   * @param rect The BoundingClientRect of the target element.\r\n   * @returns The calculated final position.\r\n   */\r\n  private determineAutoPosition(position: string, rect: DOMRect): string {\r\n    if (position !== 'auto') {\r\n      return position;\r\n    }\r\n\r\n    const { padding, width: popupWidth, height: popupHeight, safeMargin } = DEFAULT_VALUES.popup;\r\n\r\n    const fitsTop = rect.top >= popupHeight + padding;\r\n    const fitsBottom = window.innerHeight - rect.bottom >= popupHeight + padding + safeMargin;\r\n    const fitsRight = window.innerWidth - rect.right >= popupWidth + padding;\r\n    const fitsLeft = rect.left >= popupWidth + padding;\r\n\r\n    if (fitsRight) return 'right';\r\n    if (fitsBottom) return 'bottom';\r\n    if (fitsLeft) return 'left';\r\n    if (fitsTop) return 'top';\r\n    return 'bottom'; // fallback\r\n  }\r\n\r\n  /**\r\n   * Computes the top and left coordinates for the popup based on the target element and desired position.\r\n   * @param position The final position for the popup.\r\n   * @param offset The absolute offset of the target element.\r\n   * @param element The target element.\r\n   * @returns An object with top and left coordinates.\r\n   */\r\n  private computePopupCoordinates(position: string, offset: { top: number, left: number }, element: HTMLElement): { top: number, left: number } {\r\n    const { padding, width: popupWidth, height: popupHeight } = DEFAULT_VALUES.popup;\r\n    let top = DEFAULT_VALUES.popup.top;\r\n    let left = DEFAULT_VALUES.popup.left;\r\n\r\n    switch (position) {\r\n      case 'top':\r\n        top = offset.top - popupHeight - padding - 20;\r\n        left = offset.left + element.offsetWidth / 2 - popupWidth / 2;\r\n        break;\r\n      case 'bottom':\r\n        top = offset.top + element.offsetHeight + padding;\r\n        left = offset.left + element.offsetWidth / 2 - popupWidth / 2;\r\n        break;\r\n      case 'left':\r\n        top = offset.top + element.offsetHeight / 2 - popupHeight / 2;\r\n        left = offset.left - popupWidth - padding + 50;\r\n        break;\r\n      case 'right':\r\n        top = offset.top + element.offsetHeight / 2 - popupHeight / 2;\r\n        left = offset.left + element.offsetWidth + padding;\r\n        break;\r\n    }\r\n    return { top, left };\r\n  }\r\n\r\n  /**\r\n   * Clamps the popup's coordinates to ensure it stays within the visible viewport.\r\n   * @param coords The calculated top and left coordinates.\r\n   * @returns The adjusted coordinates.\r\n   */\r\n  private clampPopupCoordinates(coords: { top: number, left: number }): { top: number, left: number } {\r\n    const { padding, width: popupWidth, height: popupHeight, safeMargin } = DEFAULT_VALUES.popup;\r\n    const scrollTop = window.scrollY;\r\n    const scrollLeft = window.scrollX;\r\n\r\n    const maxTop = scrollTop + window.innerHeight - popupHeight - safeMargin;\r\n    const maxLeft = scrollLeft + window.innerWidth - popupWidth - padding;\r\n\r\n    const top = Math.max(scrollTop + padding, Math.min(coords.top, maxTop));\r\n    const left = Math.max(scrollLeft + padding, Math.min(coords.left, maxLeft));\r\n\r\n    return { top, left };\r\n  }\r\n\r\n  /**\r\n   * If the popup is rendered inside a scrollable container, this ensures it's scrolled into view.\r\n   */\r\n  private scrollPopupIntoView(): void {\r\n    setTimeout(() => {\r\n      const popupEl = document.querySelector('.tour-popup') as HTMLElement;\r\n      popupEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n    }, 50);\r\n  }\r\n\r\n  /**\r\n   * method to execute highlight process after scroll\r\n   * @returns\r\n   */\r\n  private waitForScroll(): Promise<void> {\r\n    return new Promise(resolve => setTimeout(resolve, 100)); // ⏱️ Adjust delay if needed\r\n  }\r\n\r\n  /**\r\n   * method to create transparent hole in overlay for visibility of highlighted area\r\n   */\r\n  private createTransparentHole() {\r\n    if(!this.currentElement) return;\r\n    setTimeout(() => {\r\n      const padding = 5;\r\n      const rect: any = this.currentElement?.getBoundingClientRect();\r\n      const top = Math.max(rect?.top - padding, 0);\r\n      const left = Math.max(rect?.left - padding, 0);\r\n      const width = rect?.width + padding * 2;\r\n      const height = rect?.height + padding * 2;\r\n\r\n      const holeElement = document.querySelector('.hole') as HTMLElement;\r\n      this.renderer.setStyle(holeElement, 'left', `${left}px`);\r\n      this.renderer.setStyle(holeElement, 'top', `${top}px`);\r\n      this.renderer.setStyle(holeElement, 'width', `${width}px`);\r\n      this.renderer.setStyle(holeElement, 'height', `${height}px`);\r\n    }, 50)\r\n  }\r\n\r\n  /**\r\n   * method to get absolute offset\r\n   * @param element\r\n   * @returns\r\n   */\r\n  private getAbsoluteOffset(element: HTMLElement): { top: number; left: number } {\r\n    let top = 0, left = 0;\r\n    let el: HTMLElement | null = element;\r\n\r\n    while (el) {\r\n      top += el.offsetTop - el.scrollTop + el.clientTop;\r\n      left += el.offsetLeft - el.scrollLeft + el.clientLeft;\r\n      el = el.offsetParent as HTMLElement;\r\n    }\r\n\r\n    return { top, left };\r\n  }\r\n\r\n  /**\r\n   * method to lock scroll when tour guide is active\r\n   */\r\n  private lockScroll() {\r\n    this.renderer.setStyle(document.body, 'overflow', 'hidden');\r\n    this.renderer.setStyle(document.documentElement, 'overflow', 'hidden');\r\n    document.documentElement.classList.add('tour-scroll-lock');\r\n  }\r\n\r\n  /**\r\n   * method to unlock scroll when tour guide is not active\r\n   */\r\n  private unlockScroll() {\r\n    this.renderer.removeStyle(document.body, 'overflow');\r\n    this.renderer.removeStyle(document.documentElement, 'overflow');\r\n    document.documentElement.classList.remove('tour-scroll-lock');\r\n  }\r\n\r\n  /**\r\n   * method to remove highlight when tour is skipped or done\r\n   */\r\n  private removeHighlight() {\r\n    if (this.currentElement) {\r\n      this.renderer.removeClass(this.currentElement, 'tour-highlight');\r\n      this.renderer.removeStyle(this.currentElement, 'z-index');\r\n      this.renderer.removeStyle(this.currentElement, 'position');\r\n      this.renderer.removeStyle(this.currentElement, 'box-shadow');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * method to navigate between tour slides or skip tour using left, right and skip key\r\n   * @param event\r\n   * @returns\r\n   */\r\n  private handleKey = (event: KeyboardEvent) => {\r\n    if (!this.showTour) return;\r\n    if (event.key === DEFAULT_VALUES.arrowRight) this.nextStep();\r\n    else if (event.key === DEFAULT_VALUES.arrowLeft) this.previousStep();\r\n    else if (event.key === DEFAULT_VALUES.escape) this.skip();\r\n  };\r\n\r\n  /**\r\n   * debounce method for smooth operation\r\n   * @param fn\r\n   * @param delay\r\n   * @returns\r\n   */\r\n  private debounce(fn: () => void, delay: number) {\r\n    let timeout: any;\r\n    return () => {\r\n      clearTimeout(timeout);\r\n      timeout = setTimeout(() => fn(), delay);\r\n    };\r\n  }\r\n\r\n  /**\r\n   * handling change on component destroy\r\n   */\r\n  ngOnDestroy() {\r\n    document.removeEventListener('keydown', this.handleKey);\r\n\r\n    // Clean up: move overlay back (optional)\r\n    if (this.overlayRef && this.originalParent) {\r\n      this.renderer.appendChild(this.originalParent, this.overlayRef.nativeElement);\r\n    }\r\n\r\n    if (this.resizeListener) {\r\n      window.removeEventListener('resize', this.resizeListener);\r\n    }\r\n  }\r\n}\r\n","@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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAEO,MAAM,sBAAsB,GAAoB;AACnD,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,cAAc,EAAE,IAAI;AACpB,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,gBAAgB,EAAE,KAAK;AACvB,IAAA,kBAAkB,EAAE,OAAO;AAC3B,IAAA,kBAAkB,EAAE,MAAM;AAC1B,IAAA,mBAAmB,EAAE,IAAI;AACzB,IAAA,cAAc,EAAE,MAAM;AACtB,IAAA,cAAc,EAAE,MAAM;AACtB,IAAA,cAAc,EAAE,MAAM;AACtB,IAAA,gBAAgB,EAAE,QAAQ;AAC1B,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,oBAAoB,EAAE,KAAK;AAC3B,IAAA,iBAAiB,EAAE,OAAO;CAC7B;AAEM,MAAM,cAAc,GAAG;AAC1B,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAC;AAC9E,IAAA,oBAAoB,EAAE;CACvB;;MCdU,wBAAwB,CAAA;AAkBnC;;;;AAIG;AACH,IAAA,WAAA,CACU,QAAmB,EAAA;QAAnB,IAAA,CAAA,QAAQ,GAAR,QAAQ;AAvBR,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,YAAY,EAAO;QAGnC,IAAA,CAAA,eAAe,GAAG,KAAK;QACvB,IAAA,CAAA,UAAU,GAAyB,EAAE;QAIvC,IAAA,CAAA,gBAAgB,GAAG,CAAC;QAIpB,IAAA,CAAA,QAAQ,GAAG,KAAK;AAChB,QAAA,IAAA,CAAA,oBAAoB,GAAG,cAAc,EAAE,oBAAoB;QAE3D,IAAA,CAAA,MAAM,GAAG,sBAAsB;AAqVtC;;;;AAIG;AACK,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,KAAoB,KAAI;YAC3C,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE;AACpB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,cAAc,CAAC,UAAU;gBAAE,IAAI,CAAC,QAAQ,EAAE;AACvD,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,cAAc,CAAC,SAAS;gBAAE,IAAI,CAAC,YAAY,EAAE;AAC/D,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,cAAc,CAAC,MAAM;gBAAE,IAAI,CAAC,IAAI,EAAE;AAC3D,QAAA,CAAC;IAtVG;AAEJ;;;;AAII;AACJ,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC,IAAI,OAAO,CAAC,cAAc,CAAC,CAAC,YAAY,EAAE;AAC9E,YAAA,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC,YAAY,EAAE;QAC3E;IACF;AAEA;;AAEG;IACH,QAAQ,GAAA;QACN,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;AACpD,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAE,GAAG,CAAC;QACvE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC;AAEtD,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,CAAC,SAAS,EAAE;QAClB;IACF;AAEA;;AAEG;IACH,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACpB,IAAI,CAAC,UAAU,EAAE;QACjB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACzB,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;YAC/E;AACA,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,gBAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;YAC1E;AACA,YAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC;YACzB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,SAAS,EAAE;gBAClC,IAAI,CAAC,gBAAgB,EAAE;YACzB;QACF,CAAC,EAAE,EAAE,CAAC;IACR;AAEA;;AAEG;IACH,QAAQ,GAAA;QACN,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;AAClD,YAAA,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,SAAS;gBAAE,IAAI,CAAC,gBAAgB,EAAE;QAC7D;aAAO;YACL,IAAI,CAAC,gBAAgB,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACrB,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AACtE,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,gBAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;YACzE;QACF;IACF;AAEA;;AAEG;IACH,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE;YAC7B,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,gBAAgB,EAAE;AACvB,YAAA,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,SAAS;gBAAE,IAAI,CAAC,gBAAgB,EAAE;QAC7D;IACF;AAEA;;AAEG;IACH,IAAI,GAAA;QACF,IAAI,CAAC,eAAe,EAAE;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;QACrB,IAAI,CAAC,YAAY,EAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AAClE,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QACzE;IACF;AAEA;;;AAGG;AACK,IAAA,MAAM,gBAAgB,GAAA;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC;AACnD,QAAA,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE;YACpD;QACF;;AAGA,QAAA,IAAI,CAAC,cAAc,GAAG,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC;AACpE,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB;QACF;;AAGA,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;;QAG9C,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC;;QAGvE,IAAI,CAAC,qBAAqB,EAAE;IAC9B;AAEA;;;;AAIG;IACK,MAAM,oBAAoB,CAAC,QAAgB,EAAA;QACjD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAgB;QAC/D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS;QAClB;AACA,QAAA,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC/D,QAAA,MAAM,IAAI,CAAC,aAAa,EAAE;AAC1B,QAAA,OAAO,OAAO;IAChB;AAEA;;;AAGG;AACK,IAAA,oBAAoB,CAAC,OAAoB,EAAA;QAC/C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC;QACjD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC;QACvD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;IACrD;AAEA;;;;AAIG;AACK,IAAA,8BAA8B,CAAC,OAAoB,EAAE,QAAQ,GAAG,MAAM,EAAA;AAC5E,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE;QAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;;QAG9C,MAAM,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,EAAE,IAAI,CAAC;;AAGhE,QAAA,IAAI,MAAM,GAAG,IAAI,CAAC,uBAAuB,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,CAAC;;AAGzE,QAAA,MAAM,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;;QAG3C,IAAI,CAAC,UAAU,GAAG;AAChB,YAAA,GAAG,EAAE,CAAA,EAAG,MAAM,CAAC,GAAG,CAAA,EAAA,CAAI;AACtB,YAAA,IAAI,EAAE,CAAA,EAAG,MAAM,CAAC,IAAI,CAAA,EAAA;SACrB;;QAGD,IAAI,CAAC,mBAAmB,EAAE;IAC5B;AAEA;;;;;AAKG;IACK,qBAAqB,CAAC,QAAgB,EAAE,IAAa,EAAA;AAC3D,QAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;AACvB,YAAA,OAAO,QAAQ;QACjB;AAEA,QAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,cAAc,CAAC,KAAK;QAE5F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,WAAW,GAAG,OAAO;AACjD,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,IAAI,WAAW,GAAG,OAAO,GAAG,UAAU;AACzF,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,GAAG,OAAO;QACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,UAAU,GAAG,OAAO;AAElD,QAAA,IAAI,SAAS;AAAE,YAAA,OAAO,OAAO;AAC7B,QAAA,IAAI,UAAU;AAAE,YAAA,OAAO,QAAQ;AAC/B,QAAA,IAAI,QAAQ;AAAE,YAAA,OAAO,MAAM;AAC3B,QAAA,IAAI,OAAO;AAAE,YAAA,OAAO,KAAK;QACzB,OAAO,QAAQ,CAAC;IAClB;AAEA;;;;;;AAMG;AACK,IAAA,uBAAuB,CAAC,QAAgB,EAAE,MAAqC,EAAE,OAAoB,EAAA;AAC3G,QAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC,KAAK;AAChF,QAAA,IAAI,GAAG,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;AAClC,QAAA,IAAI,IAAI,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI;QAEpC,QAAQ,QAAQ;AACd,YAAA,KAAK,KAAK;gBACR,GAAG,GAAG,MAAM,CAAC,GAAG,GAAG,WAAW,GAAG,OAAO,GAAG,EAAE;AAC7C,gBAAA,IAAI,GAAG,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC,WAAW,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC;gBAC7D;AACF,YAAA,KAAK,QAAQ;gBACX,GAAG,GAAG,MAAM,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,GAAG,OAAO;AACjD,gBAAA,IAAI,GAAG,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC,WAAW,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC;gBAC7D;AACF,YAAA,KAAK,MAAM;AACT,gBAAA,GAAG,GAAG,MAAM,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC;gBAC7D,IAAI,GAAG,MAAM,CAAC,IAAI,GAAG,UAAU,GAAG,OAAO,GAAG,EAAE;gBAC9C;AACF,YAAA,KAAK,OAAO;AACV,gBAAA,GAAG,GAAG,MAAM,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC;gBAC7D,IAAI,GAAG,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO;gBAClD;;AAEJ,QAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE;IACtB;AAEA;;;;AAIG;AACK,IAAA,qBAAqB,CAAC,MAAqC,EAAA;AACjE,QAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,cAAc,CAAC,KAAK;AAC5F,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO;AAChC,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO;QAEjC,MAAM,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,WAAW,GAAG,WAAW,GAAG,UAAU;QACxE,MAAM,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,UAAU,GAAG,UAAU,GAAG,OAAO;QAErE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAE3E,QAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE;IACtB;AAEA;;AAEG;IACK,mBAAmB,GAAA;QACzB,UAAU,CAAC,MAAK;YACd,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB;AACpE,YAAA,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QACnE,CAAC,EAAE,EAAE,CAAC;IACR;AAEA;;;AAGG;IACK,aAAa,GAAA;AACnB,QAAA,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IAC1D;AAEA;;AAEG;IACK,qBAAqB,GAAA;QAC3B,IAAG,CAAC,IAAI,CAAC,cAAc;YAAE;QACzB,UAAU,CAAC,MAAK;YACd,MAAM,OAAO,GAAG,CAAC;YACjB,MAAM,IAAI,GAAQ,IAAI,CAAC,cAAc,EAAE,qBAAqB,EAAE;AAC9D,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,EAAE,CAAC,CAAC;AAC5C,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,EAAE,CAAC,CAAC;YAC9C,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,CAAC;YACvC,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC;YAEzC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAgB;AAClE,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,CAAC;AACxD,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI,CAAC;AACtD,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,OAAO,EAAE,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,CAAC;AAC1D,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,QAAQ,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,CAAC;QAC9D,CAAC,EAAE,EAAE,CAAC;IACR;AAEA;;;;AAIG;AACK,IAAA,iBAAiB,CAAC,OAAoB,EAAA;AAC5C,QAAA,IAAI,GAAG,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC;QACrB,IAAI,EAAE,GAAuB,OAAO;QAEpC,OAAO,EAAE,EAAE;AACT,YAAA,GAAG,IAAI,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,SAAS;AACjD,YAAA,IAAI,IAAI,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,UAAU;AACrD,YAAA,EAAE,GAAG,EAAE,CAAC,YAA2B;QACrC;AAEA,QAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE;IACtB;AAEA;;AAEG;IACK,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC;AAC3D,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,eAAe,EAAE,UAAU,EAAE,QAAQ,CAAC;QACtE,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC;IAC5D;AAEA;;AAEG;IACK,YAAY,GAAA;QAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;QACpD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,eAAe,EAAE,UAAU,CAAC;QAC/D,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC;IAC/D;AAEA;;AAEG;IACK,eAAe,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC;YAChE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;YACzD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;YAC1D,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;QAC9D;IACF;AAcA;;;;;AAKG;IACK,QAAQ,CAAC,EAAc,EAAE,KAAa,EAAA;AAC5C,QAAA,IAAI,OAAY;AAChB,QAAA,OAAO,MAAK;YACV,YAAY,CAAC,OAAO,CAAC;YACrB,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC;AACzC,QAAA,CAAC;IACH;AAEA;;AAEG;IACH,WAAW,GAAA;QACT,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;;QAGvD,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE;AAC1C,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QAC/E;AAEA,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC;QAC3D;IACF;8GA7YW,wBAAwB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,uXCbrC,slGAwDA,EAAA,MAAA,EAAA,CAAA,+pEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED/Cc,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,ihBAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAI7C,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBANpC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,WACxB,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,slGAAA,EAAA,MAAA,EAAA,CAAA,+pEAAA,CAAA,EAAA;;sBAKxD;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA,SAAS;uBAAC,YAAY;;;AEpBzB;;AAEG;;;;"}