igot-cb-tour-guide 0.0.1-ang-13-17

package/fesm2022/igot-cb-tour-guide.mjs

@@ -0,0 +1,670 @@
+import { debounceTime } from 'rxjs/operators';
+import * as i0 from '@angular/core';
+import { PLATFORM_ID, Inject, Injectable, DOCUMENT, ViewChild, Input, ViewEncapsulation, Component, ErrorHandler, NgModule } from '@angular/core';
+import { Subject, fromEvent } from 'rxjs';
+import { cloneDeep } from 'lodash';
+import * as i3 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+class Orientation {
+    static Bottom = 'bottom';
+    static BottomLeft = 'bottom-left';
+    static BottomRight = 'bottom-right';
+    static Center = 'center';
+    static Left = 'left';
+    static Right = 'right';
+    static Top = 'top';
+    static TopLeft = 'top-left';
+    static TopRight = 'top-right';
+}
+var ProgressIndicatorLocation;
+(function (ProgressIndicatorLocation) {
+    ProgressIndicatorLocation["InsideNextButton"] = "inside-next-button";
+    ProgressIndicatorLocation["TopOfTourBlock"] = "top-of-tour-block";
+    ProgressIndicatorLocation["None"] = "none";
+    ProgressIndicatorLocation["Dots"] = "dots";
+})(ProgressIndicatorLocation || (ProgressIndicatorLocation = {}));
+
+function getWindow() {
+    return window;
+}
+function getMockWindow() {
+    return {
+        innerWidth: 0,
+        innerHeight: 0,
+        scrollY: 0,
+        scrollX: 0,
+        pageYOffset: 0,
+        pageXOffset: 0,
+        scroll: () => { },
+        scrollTo: () => { },
+        addEventListener: () => { },
+        removeEventListener: () => { },
+    };
+}
+class WindowRefService {
+    isBrowser = false;
+    get nativeWindow() {
+        if (this.isBrowser) {
+            return getWindow();
+        }
+        else {
+            return getMockWindow();
+        }
+    }
+    constructor(platformId) {
+        this.isBrowser = isPlatformBrowser(platformId);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WindowRefService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WindowRefService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WindowRefService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+class GuidedTourService {
+    errorHandler;
+    windowRef;
+    dom;
+    guidedTourCurrentStepStream;
+    guidedTourOrbShowingStream;
+    _guidedTourCurrentStepSubject = new Subject();
+    _guidedTourOrbShowingSubject = new Subject();
+    _currentTourStepIndex = 0;
+    _currentTour = null;
+    _onFirstStep = true;
+    _onLastStep = true;
+    _onResizeMessage = false;
+    constructor(errorHandler, windowRef, dom) {
+        this.errorHandler = errorHandler;
+        this.windowRef = windowRef;
+        this.dom = dom;
+        this.guidedTourCurrentStepStream = this._guidedTourCurrentStepSubject.asObservable();
+        this.guidedTourOrbShowingStream = this._guidedTourOrbShowingSubject.asObservable();
+        fromEvent(this.windowRef.nativeWindow, 'resize').pipe(debounceTime(200)).subscribe(() => {
+            if (this._currentTour && this._currentTourStepIndex > -1) {
+                if (this._currentTour.minimumScreenSize && this._currentTour.minimumScreenSize >= this.windowRef.nativeWindow.innerWidth) {
+                    this._onResizeMessage = true;
+                    const dialog = this._currentTour.resizeDialog || {
+                        title: 'Please resize',
+                        content: 'You have resized the tour to a size that is too small to continue. Please resize the browser to a larger size to continue the tour or close the tour.'
+                    };
+                    this._guidedTourCurrentStepSubject.next(dialog);
+                }
+                else {
+                    this._onResizeMessage = false;
+                    this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                }
+            }
+        });
+    }
+    nextStep() {
+        if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
+            this._currentTour.steps[this._currentTourStepIndex].closeAction();
+        }
+        if (this._currentTour.steps[this._currentTourStepIndex + 1]) {
+            this._currentTourStepIndex++;
+            this._setFirstAndLast();
+            if (this._currentTour.steps[this._currentTourStepIndex].action) {
+                this._currentTour.steps[this._currentTourStepIndex].action();
+                // Usually an action is opening something so we need to give it time to render.
+                setTimeout(() => {
+                    if (this._checkSelectorValidity()) {
+                        this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                    }
+                    else {
+                        this.nextStep();
+                    }
+                });
+            }
+            else {
+                if (this._checkSelectorValidity()) {
+                    this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                }
+                else {
+                    this.nextStep();
+                }
+            }
+            if (this._currentTour.nextCallback) {
+                this._currentTour.nextCallback(this._currentTourStepIndex, this._currentTour.steps[this._currentTourStepIndex]);
+            }
+        }
+        else {
+            if (this._currentTour.completeCallback) {
+                this._currentTour.completeCallback();
+            }
+            this.resetTour();
+        }
+    }
+    backStep() {
+        if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
+            this._currentTour.steps[this._currentTourStepIndex].closeAction();
+        }
+        if (this._currentTour.steps[this._currentTourStepIndex - 1]) {
+            this._currentTourStepIndex--;
+            this._setFirstAndLast();
+            if (this._currentTour.steps[this._currentTourStepIndex].action) {
+                this._currentTour.steps[this._currentTourStepIndex].action();
+                setTimeout(() => {
+                    if (this._checkSelectorValidity()) {
+                        this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                    }
+                    else {
+                        this.backStep();
+                    }
+                });
+            }
+            else {
+                if (this._checkSelectorValidity()) {
+                    this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                }
+                else {
+                    this.backStep();
+                }
+            }
+            if (this._currentTour.nextCallback) {
+                this._currentTour.prevCallback(this._currentTourStepIndex, this._currentTour.steps[this._currentTourStepIndex]);
+            }
+        }
+        else {
+            this.resetTour();
+        }
+    }
+    skipTour() {
+        if (this._currentTour.skipCallback) {
+            this._currentTour.skipCallback(this._currentTourStepIndex);
+        }
+        this.resetTour();
+    }
+    resetTour() {
+        this.dom.body.classList.remove('tour-open');
+        this._currentTour = null;
+        this._currentTourStepIndex = 0;
+        this._guidedTourCurrentStepSubject.next(null);
+    }
+    startTour(tour) {
+        this._currentTour = cloneDeep(tour);
+        this._currentTour.steps = this._currentTour.steps.filter(step => !step.skipStep);
+        this._currentTourStepIndex = 0;
+        this._setFirstAndLast();
+        this._guidedTourOrbShowingSubject.next(this._currentTour.useOrb);
+        if (this._currentTour.steps.length > 0
+            && (!this._currentTour.minimumScreenSize
+                || (this.windowRef.nativeWindow.innerWidth >= this._currentTour.minimumScreenSize))) {
+            if (!this._currentTour.useOrb) {
+                this.dom.body.classList.add('tour-open');
+            }
+            if (this._currentTour.steps[this._currentTourStepIndex].action) {
+                this._currentTour.steps[this._currentTourStepIndex].action();
+            }
+            if (this._checkSelectorValidity()) {
+                this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+            }
+            else {
+                this.nextStep();
+            }
+        }
+    }
+    activateOrb() {
+        this._guidedTourOrbShowingSubject.next(false);
+        this.dom.body.classList.add('tour-open');
+    }
+    _setFirstAndLast() {
+        this._onLastStep = (this._currentTour.steps.length - 1) === this._currentTourStepIndex;
+        this._onFirstStep = this._currentTourStepIndex === 0;
+    }
+    _checkSelectorValidity() {
+        if (this._currentTour.steps[this._currentTourStepIndex].selector) {
+            const selectedElement = this.dom.querySelector(this._currentTour.steps[this._currentTourStepIndex].selector);
+            if (!selectedElement) {
+                this.errorHandler.handleError(
+                // If error handler is configured this should not block the browser.
+                new Error(`Error finding selector ${this._currentTour.steps[this._currentTourStepIndex].selector} on step ${this._currentTourStepIndex + 1} during guided tour: ${this._currentTour.tourId}`));
+                return false;
+            }
+        }
+        return true;
+    }
+    get onLastStep() {
+        return this._onLastStep;
+    }
+    get onFirstStep() {
+        return this._onFirstStep;
+    }
+    get onResizeMessage() {
+        return this._onResizeMessage;
+    }
+    get currentTourStepDisplay() {
+        return this._currentTourStepIndex + 1;
+    }
+    get currentTourStepCount() {
+        return this._currentTour && this._currentTour.steps ? this._currentTour.steps.length : 0;
+    }
+    get preventBackdropFromAdvancing() {
+        return this._currentTour && this._currentTour.preventBackdropFromAdvancing;
+    }
+    getPreparedTourStep(index) {
+        return this.setTourOrientation(this._currentTour.steps[index]);
+    }
+    setTourOrientation(step) {
+        const convertedStep = cloneDeep(step);
+        if (convertedStep.orientation
+            && !(typeof convertedStep.orientation === 'string')
+            && convertedStep.orientation.length) {
+            convertedStep.orientation.sort((a, b) => {
+                if (!b.maximumSize) {
+                    return 1;
+                }
+                if (!a.maximumSize) {
+                    return -1;
+                }
+                return b.maximumSize - a.maximumSize;
+            });
+            let currentOrientation = Orientation.Top;
+            convertedStep.orientation.forEach((orientationConfig) => {
+                if (!orientationConfig.maximumSize || this.windowRef.nativeWindow.innerWidth <= orientationConfig.maximumSize) {
+                    currentOrientation = orientationConfig.orientationDirection;
+                }
+            });
+            convertedStep.orientation = currentOrientation;
+        }
+        return convertedStep;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourService, deps: [{ token: i0.ErrorHandler }, { token: WindowRefService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.ErrorHandler }, { type: WindowRefService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+class GuidedTourComponent {
+    guidedTourService;
+    windowRef;
+    dom;
+    topOfPageAdjustment = 0;
+    tourStepWidth = 300;
+    minimalTourStepWidth = 200;
+    skipText = 'Skip';
+    nextText = 'Next';
+    doneText = 'Done';
+    closeText = 'Close';
+    backText = 'Back';
+    progressIndicatorLocation = ProgressIndicatorLocation.InsideNextButton;
+    progressIndicator = undefined;
+    tourStep;
+    highlightPadding = 4;
+    currentTourStep = null;
+    selectedElementRect = null;
+    isOrbShowing = false;
+    progressIndicatorLocations = ProgressIndicatorLocation;
+    resizeSubscription;
+    scrollSubscription;
+    constructor(guidedTourService, windowRef, dom) {
+        this.guidedTourService = guidedTourService;
+        this.windowRef = windowRef;
+        this.dom = dom;
+    }
+    get maxWidthAdjustmentForTourStep() {
+        return this.tourStepWidth - this.minimalTourStepWidth;
+    }
+    get widthAdjustmentForScreenBound() {
+        if (!this.tourStep) {
+            return 0;
+        }
+        let adjustment = 0;
+        if (this.calculatedLeftPosition < 0) {
+            adjustment = -this.calculatedLeftPosition;
+        }
+        if (this.calculatedLeftPosition > this.windowRef.nativeWindow.innerWidth - this.tourStepWidth) {
+            adjustment = this.calculatedLeftPosition - (this.windowRef.nativeWindow.innerWidth - this.tourStepWidth);
+        }
+        return Math.min(this.maxWidthAdjustmentForTourStep, adjustment);
+    }
+    get calculatedTourStepWidth() {
+        return this.tourStepWidth - this.widthAdjustmentForScreenBound;
+    }
+    ngAfterViewInit() {
+        this.guidedTourService.guidedTourCurrentStepStream.subscribe((step) => {
+            this.currentTourStep = step;
+            if (step && step.selector) {
+                const selectedElement = this.dom.querySelector(step.selector);
+                if (selectedElement) {
+                    this.scrollToAndSetElement();
+                }
+                else {
+                    this.selectedElementRect = null;
+                }
+            }
+            else {
+                this.selectedElementRect = null;
+            }
+        });
+        this.guidedTourService.guidedTourOrbShowingStream.subscribe((value) => {
+            this.isOrbShowing = value;
+        });
+        this.resizeSubscription = fromEvent(this.windowRef.nativeWindow, 'resize').subscribe(() => {
+            this.updateStepLocation();
+        });
+        this.scrollSubscription = fromEvent(this.windowRef.nativeWindow, 'scroll').subscribe(() => {
+            this.updateStepLocation();
+        });
+    }
+    ngOnDestroy() {
+        this.resizeSubscription.unsubscribe();
+        this.scrollSubscription.unsubscribe();
+    }
+    scrollToAndSetElement() {
+        this.updateStepLocation();
+        // Allow things to render to scroll to the correct location
+        setTimeout(() => {
+            if (!this.isOrbShowing && !this.isTourOnScreen()) {
+                if (this.selectedElementRect && this.isBottom()) {
+                    // Scroll so the element is on the top of the screen.
+                    const topPos = ((this.windowRef.nativeWindow.scrollY + this.selectedElementRect.top) - this.topOfPageAdjustment)
+                        - (this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0)
+                        + this.getStepScreenAdjustment();
+                    try {
+                        this.windowRef.nativeWindow.scrollTo({
+                            left: null,
+                            top: topPos,
+                            behavior: 'smooth'
+                        });
+                    }
+                    catch (err) {
+                        if (err instanceof TypeError) {
+                            this.windowRef.nativeWindow.scroll(0, topPos);
+                        }
+                        else {
+                            throw err;
+                        }
+                    }
+                }
+                else {
+                    // Scroll so the element is on the bottom of the screen.
+                    const topPos = (this.windowRef.nativeWindow.scrollY + this.selectedElementRect.top + this.selectedElementRect.height)
+                        - this.windowRef.nativeWindow.innerHeight
+                        + (this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0)
+                        - this.getStepScreenAdjustment();
+                    try {
+                        this.windowRef.nativeWindow.scrollTo({
+                            left: null,
+                            top: topPos,
+                            behavior: 'smooth'
+                        });
+                    }
+                    catch (err) {
+                        if (err instanceof TypeError) {
+                            this.windowRef.nativeWindow.scroll(0, topPos);
+                        }
+                        else {
+                            throw err;
+                        }
+                    }
+                }
+            }
+        });
+    }
+    handleOrb() {
+        this.guidedTourService.activateOrb();
+        if (this.currentTourStep && this.currentTourStep.selector) {
+            this.scrollToAndSetElement();
+        }
+    }
+    isTourOnScreen() {
+        return this.tourStep
+            && this.elementInViewport(this.dom.querySelector(this.currentTourStep.selector))
+            && this.elementInViewport(this.tourStep.nativeElement);
+    }
+    // Modified from https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+    elementInViewport(element) {
+        let top = element.offsetTop;
+        const height = element.offsetHeight;
+        while (element.offsetParent) {
+            element = element.offsetParent;
+            top += element.offsetTop;
+        }
+        if (this.isBottom()) {
+            return (top >= (this.windowRef.nativeWindow.pageYOffset
+                + this.topOfPageAdjustment
+                + (this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0)
+                + this.getStepScreenAdjustment())
+                && (top + height) <= (this.windowRef.nativeWindow.pageYOffset + this.windowRef.nativeWindow.innerHeight));
+        }
+        else {
+            return (top >= (this.windowRef.nativeWindow.pageYOffset + this.topOfPageAdjustment - this.getStepScreenAdjustment())
+                && (top + height + (this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0)) <= (this.windowRef.nativeWindow.pageYOffset + this.windowRef.nativeWindow.innerHeight));
+        }
+    }
+    backdropClick(event) {
+        if (this.guidedTourService.preventBackdropFromAdvancing) {
+            event.stopPropagation();
+        }
+        else {
+            this.guidedTourService.nextStep();
+        }
+    }
+    updateStepLocation() {
+        if (this.currentTourStep && this.currentTourStep.selector) {
+            const selectedElement = this.dom.querySelector(this.currentTourStep.selector);
+            if (selectedElement && typeof selectedElement.getBoundingClientRect === 'function') {
+                this.selectedElementRect = selectedElement.getBoundingClientRect();
+            }
+            else {
+                this.selectedElementRect = null;
+            }
+        }
+        else {
+            this.selectedElementRect = null;
+        }
+    }
+    isBottom() {
+        return this.currentTourStep.orientation
+            && (this.currentTourStep.orientation === Orientation.Bottom
+                || this.currentTourStep.orientation === Orientation.BottomLeft
+                || this.currentTourStep.orientation === Orientation.BottomRight);
+    }
+    get topPosition() {
+        const paddingAdjustment = this.getHighlightPadding();
+        if (this.isBottom()) {
+            return this.selectedElementRect.top + this.selectedElementRect.height + paddingAdjustment;
+        }
+        return this.selectedElementRect.top - this.getHighlightPadding();
+    }
+    get orbTopPosition() {
+        if (this.isBottom()) {
+            return this.selectedElementRect.top + this.selectedElementRect.height;
+        }
+        if (this.currentTourStep.orientation === Orientation.Right
+            || this.currentTourStep.orientation === Orientation.Left) {
+            return (this.selectedElementRect.top + (this.selectedElementRect.height / 2));
+        }
+        return this.selectedElementRect.top;
+    }
+    get calculatedLeftPosition() {
+        const paddingAdjustment = this.getHighlightPadding();
+        if (this.currentTourStep.orientation === Orientation.TopRight
+            || this.currentTourStep.orientation === Orientation.BottomRight) {
+            return (this.selectedElementRect.right - this.tourStepWidth);
+        }
+        if (this.currentTourStep.orientation === Orientation.TopLeft
+            || this.currentTourStep.orientation === Orientation.BottomLeft) {
+            return (this.selectedElementRect.left);
+        }
+        if (this.currentTourStep.orientation === Orientation.Left) {
+            return this.selectedElementRect.left - this.tourStepWidth - paddingAdjustment;
+        }
+        if (this.currentTourStep.orientation === Orientation.Right) {
+            return (this.selectedElementRect.left + this.selectedElementRect.width + paddingAdjustment);
+        }
+        return (this.selectedElementRect.right - (this.selectedElementRect.width / 2) - (this.tourStepWidth / 2));
+    }
+    get leftPosition() {
+        if (this.calculatedLeftPosition >= 0) {
+            return this.calculatedLeftPosition;
+        }
+        const adjustment = Math.max(0, -this.calculatedLeftPosition);
+        const maxAdjustment = Math.min(this.maxWidthAdjustmentForTourStep, adjustment);
+        return this.calculatedLeftPosition + maxAdjustment;
+    }
+    get orbLeftPosition() {
+        if (this.currentTourStep.orientation === Orientation.TopRight
+            || this.currentTourStep.orientation === Orientation.BottomRight) {
+            return this.selectedElementRect.right;
+        }
+        if (this.currentTourStep.orientation === Orientation.TopLeft
+            || this.currentTourStep.orientation === Orientation.BottomLeft) {
+            return this.selectedElementRect.left;
+        }
+        if (this.currentTourStep.orientation === Orientation.Left) {
+            return this.selectedElementRect.left;
+        }
+        if (this.currentTourStep.orientation === Orientation.Right) {
+            return (this.selectedElementRect.left + this.selectedElementRect.width);
+        }
+        return (this.selectedElementRect.right - (this.selectedElementRect.width / 2));
+    }
+    get transform() {
+        if (!this.currentTourStep.orientation
+            || this.currentTourStep.orientation === Orientation.Top
+            || this.currentTourStep.orientation === Orientation.TopRight
+            || this.currentTourStep.orientation === Orientation.TopLeft) {
+            return 'translateY(-100%)';
+        }
+        return null;
+    }
+    get orbTransform() {
+        if (!this.currentTourStep.orientation
+            || this.currentTourStep.orientation === Orientation.Top
+            || this.currentTourStep.orientation === Orientation.Bottom
+            || this.currentTourStep.orientation === Orientation.TopLeft
+            || this.currentTourStep.orientation === Orientation.BottomLeft) {
+            return 'translateY(-50%)';
+        }
+        if (this.currentTourStep.orientation === Orientation.TopRight
+            || this.currentTourStep.orientation === Orientation.BottomRight) {
+            return 'translate(-100%, -50%)';
+        }
+        if (this.currentTourStep.orientation === Orientation.Right
+            || this.currentTourStep.orientation === Orientation.Left) {
+            return 'translate(-50%, -50%)';
+        }
+        return null;
+    }
+    get overlayTop() {
+        if (this.selectedElementRect) {
+            return this.selectedElementRect.top - this.getHighlightPadding();
+        }
+        return 0;
+    }
+    get overlayLeft() {
+        if (this.selectedElementRect) {
+            return this.selectedElementRect.left - this.getHighlightPadding();
+        }
+        return 0;
+    }
+    get overlayHeight() {
+        if (this.selectedElementRect) {
+            return this.selectedElementRect.height + (this.getHighlightPadding() * 2);
+        }
+        return 0;
+    }
+    get overlayWidth() {
+        if (this.selectedElementRect) {
+            return this.selectedElementRect.width + (this.getHighlightPadding() * 2);
+        }
+        return 0;
+    }
+    getHighlightPadding() {
+        let paddingAdjustment = this.currentTourStep.useHighlightPadding ? this.highlightPadding : 0;
+        if (this.currentTourStep.highlightPadding) {
+            paddingAdjustment = this.currentTourStep.highlightPadding;
+        }
+        return paddingAdjustment;
+    }
+    // This calculates a value to add or subtract so the step should not be off screen.
+    getStepScreenAdjustment() {
+        if (this.currentTourStep.orientation === Orientation.Left
+            || this.currentTourStep.orientation === Orientation.Right) {
+            return 0;
+        }
+        const scrollAdjustment = this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0;
+        const tourStepHeight = typeof this.tourStep.nativeElement.getBoundingClientRect === 'function' ? this.tourStep.nativeElement.getBoundingClientRect().height : 0;
+        const elementHeight = this.selectedElementRect.height + scrollAdjustment + tourStepHeight;
+        if ((this.windowRef.nativeWindow.innerHeight - this.topOfPageAdjustment) < elementHeight) {
+            return elementHeight - (this.windowRef.nativeWindow.innerHeight - this.topOfPageAdjustment);
+        }
+        return 0;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourComponent, deps: [{ token: GuidedTourService }, { token: WindowRefService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GuidedTourComponent, isStandalone: false, selector: "ngx-guided-tour", inputs: { topOfPageAdjustment: "topOfPageAdjustment", tourStepWidth: "tourStepWidth", minimalTourStepWidth: "minimalTourStepWidth", skipText: "skipText", nextText: "nextText", doneText: "doneText", closeText: "closeText", backText: "backText", progressIndicatorLocation: "progressIndicatorLocation", progressIndicator: "progressIndicator" }, viewQueries: [{ propertyName: "tourStep", first: true, predicate: ["tourStep"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"currentTourStep && selectedElementRect && isOrbShowing\" (mouseenter)=\"handleOrb()\"\n  class=\"tour-orb tour-{{ currentTourStep.orientation }}\" [style.top.px]=\"orbTopPosition\"\n  [style.left.px]=\"orbLeftPosition\" [style.transform]=\"orbTransform\">\n  <div class=\"tour-orb-ring\"></div>\n</div>\n<div *ngIf=\"currentTourStep && !isOrbShowing\">\n  <div class=\"guided-tour-user-input-mask\" (click)=\"backdropClick($event)\"></div>\n  <div class=\"\" [attr.class]=\"'guided-tour-spotlight-overlay ' + currentTourStep?.class\" [style.top.px]=\"overlayTop\"\n    [style.left.px]=\"overlayLeft\" [style.height.px]=\"overlayHeight\" [style.width.px]=\"overlayWidth\">\n  </div>\n</div>\n<div *ngIf=\"currentTourStep && !isOrbShowing\">\n  <div #tourStep *ngIf=\"currentTourStep\"\n    class=\"tour-step tour-{{ currentTourStep.orientation}} {{currentTourStep?.containerClass}}\" [ngClass]=\"{\n                    'page-tour-step': !currentTourStep.selector,\n                    'right-panel': currentTourStep.connectorDirection == 'right',\n                    'left-panel': currentTourStep.connectorDirection == 'left',\n                    'bottom-panel': currentTourStep.connectorDirection == 'bottom',\n                    'top-panel': currentTourStep.connectorDirection == 'top'\n                }\" [style.top.px]=\"(currentTourStep.selector && selectedElementRect ? topPosition : null)\"\n    [style.left.px]=\"(currentTourStep.selector && selectedElementRect ? leftPosition : null)\"\n    [style.width.px]=\"(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)\"\n    [style.transform]=\"(currentTourStep.selector && selectedElementRect ? transform : null)\">\n\n    <div *ngIf=\"currentTourStep.isMobile && currentTourStep.connectorDirection == 'bottom'\" class=\"tour-buttons tour-button-container\">\n      <div class=\"tour-actions-button-container\">\n        <button *ngIf=\"!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage\"\n          [attr.class]=\"currentTourStep?.backBtnClass + ' back-button'\" (click)=\"guidedTourService.backStep()\">\n          {{ backText }}\n        </button>\n      </div>\n      <button *ngIf=\"!guidedTourService.onLastStep && !guidedTourService.onResizeMessage\" class=\"next-button\"\n        (click)=\"guidedTourService.nextStep()\">\n        {{ nextText }}\n        <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">\n          <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n        </ng-container>\n      </button>\n      <button *ngIf=\"guidedTourService.onLastStep\" [attr.class]=\"currentTourStep?.nextBtnClass + ' next-button'\"\n        (click)=\"guidedTourService.nextStep()\">\n        {{ doneText }}\n      </button>\n      <button *ngIf=\"guidedTourService.onResizeMessage\" class=\"next-button\" (click)=\"guidedTourService.resetTour()\">\n        {{ closeText }}\n      </button>\n\n    </div>\n\n    <div *ngIf=\"currentTourStep.selector\" class=\"tour-arrow\"></div>\n    <div class=\"tour-block\">\n      <div class=\"arrow\" [ngClass]=\"{\n                        'right-connector': (currentTourStep.selector && currentTourStep.connectorDirection == 'right'),\n                        'left-connector': (currentTourStep.selector && currentTourStep.connectorDirection == 'left'),\n                        'bottom-connector': (currentTourStep.selector && currentTourStep.connectorDirection == 'bottom'),\n                        'top-connector': (currentTourStep.selector && currentTourStep.connectorDirection == 'top')\n                    }\">\n        <div class=\"circle\"></div>\n        <div class=\"circle-start-dot\"></div>\n        <div class=\"triangle\"></div>\n      </div>\n\n      <div *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.TopOfTourBlock\n                        && !guidedTourService.onResizeMessage\" class=\"tour-progress-indicator\">\n        <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n      </div>\n      <div class=\"tour-image\" *ngIf=\"currentTourStep.icon && currentTourStep.selector\">\n        <mat-icon>{{currentTourStep.icon}}</mat-icon>\n      </div>\n      <h3 class=\"tour-title\" *ngIf=\"currentTourStep.title && currentTourStep.selector\">\n        {{ currentTourStep.title }}\n      </h3>\n      <h2 class=\"tour-title\" *ngIf=\"currentTourStep.title && !currentTourStep.selector\">\n        {{ currentTourStep.title }}\n      </h2>\n      <div class=\"tour-content\" [innerHTML]=\"currentTourStep.content\"></div>\n      <div *ngIf=\"!currentTourStep.isMobile\" class=\"tour-buttons tour-button-container\">\n        <!-- <div class=\"tour-skip-container\">\n                            <button *ngIf=\"!guidedTourService.onResizeMessage\"\n                                (click)=\"guidedTourService.skipTour()\"\n                                [attr.class]=\"currentTourStep?.skipBtnClass + ' skip-button link-button'\">\n                                {{ skipText }}\n                            </button>\n                        </div> -->\n        <div class=\"tour-actions-button-container\">\n          <button *ngIf=\"!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage\"\n            [attr.class]=\"currentTourStep?.backBtnClass + ' back-button'\" (click)=\"guidedTourService.backStep()\">\n            {{ backText }}\n          </button>\n        </div>\n        <button *ngIf=\"!guidedTourService.onLastStep && !guidedTourService.onResizeMessage\" class=\"next-button\"\n          (click)=\"guidedTourService.nextStep()\">\n          {{ nextText }}\n          <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">\n            <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n          </ng-container>\n        </button>\n        <button *ngIf=\"guidedTourService.onLastStep\" [attr.class]=\"currentTourStep?.nextBtnClass + ' next-button'\"\n          (click)=\"guidedTourService.nextStep()\">\n          {{ doneText }}\n        </button>\n        <button *ngIf=\"guidedTourService.onResizeMessage\" class=\"next-button\" (click)=\"guidedTourService.resetTour()\">\n          {{ closeText }}\n        </button>\n\n      </div>\n\n\n      <div class=\"progress-container\">\n        <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.Dots\">\n          <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n        </ng-container>\n      </div>\n\n    </div>\n    <div *ngIf=\"currentTourStep.isMobile && currentTourStep.connectorDirection != 'bottom'\" class=\"tour-buttons tour-button-container\">\n      <div class=\"tour-actions-button-container\">\n        <button *ngIf=\"!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage\"\n          [attr.class]=\"currentTourStep?.backBtnClass + ' back-button'\" (click)=\"guidedTourService.backStep()\">\n          {{ backText }}\n        </button>\n      </div>\n      <button *ngIf=\"!guidedTourService.onLastStep && !guidedTourService.onResizeMessage\" class=\"next-button\"\n        (click)=\"guidedTourService.nextStep()\">\n        {{ nextText }}\n        <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">\n          <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n        </ng-container>\n      </button>\n      <button *ngIf=\"guidedTourService.onLastStep\" [attr.class]=\"currentTourStep?.nextBtnClass + ' next-button'\"\n        (click)=\"guidedTourService.nextStep()\">\n        {{ doneText }}\n      </button>\n      <button *ngIf=\"guidedTourService.onResizeMessage\" class=\"next-button\" (click)=\"guidedTourService.resetTour()\">\n        {{ closeText }}\n      </button>\n\n    </div>\n  </div>\n  <ng-template #progress>\n    <ng-container *ngTemplateOutlet=\"\n                progressIndicator || defaultProgressIndicator; \n                context: { currentStepNumber: guidedTourService.currentTourStepDisplay, totalSteps: guidedTourService.currentTourStepCount }\n            \"></ng-container>\n  </ng-template>\n  <ng-template #defaultProgressIndicator let-currentStepNumber=\"currentStepNumber\" let-totalSteps=\"totalSteps\">\n    <!-- <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">&nbsp;</ng-container>{{ currentStepNumber }}/{{ totalSteps }} -->\n    <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.Dots\">\n      <div class=\"pagination\">\n        <li class=\"nav-dots\">\n          <ng-container *ngFor=\"let dot of [].constructor(totalSteps); first as isFirst; index as i\">\n            <label [ngClass]=\"(currentStepNumber == (i+1)) ? 'nav-dot-active': ''\" class=\"nav-dot\"\n              id=\"img-dot-+{{i}}+{{currentStepNumber}}\"></label>\n          </ng-container>\n        </li>\n      </div>\n    </ng-container>\n  </ng-template>", styles: ["ngx-guided-tour .guided-tour-user-input-mask{position:fixed;top:0;left:0;display:block;height:100%;width:100%;max-height:100vh;text-align:center;opacity:0}ngx-guided-tour .guided-tour-spotlight-overlay{position:fixed;box-shadow:0 0 0 9999px #000000b3,0 0 1.5rem #00000080}ngx-guided-tour .tour-orb{position:fixed;width:20px;height:20px;border-radius:50%}ngx-guided-tour .tour-orb .tour-orb-ring{width:35px;height:35px;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 2s linear infinite}ngx-guided-tour .tour-orb .tour-orb-ring:after{content:\"\";display:inline-block;height:100%;width:100%;border-radius:50%}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.45);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}ngx-guided-tour .tour-step{position:fixed}ngx-guided-tour .tour-step.page-tour-step{max-width:400px;width:50%;left:50%;top:50%;transform:translate(-50%,-50%)}ngx-guided-tour .tour-step.tour-bottom .tour-arrow:before,ngx-guided-tour .tour-step.tour-bottom-right .tour-arrow:before,ngx-guided-tour .tour-step.tour-bottom-left .tour-arrow:before{position:absolute}ngx-guided-tour .tour-step.tour-bottom .tour-block,ngx-guided-tour .tour-step.tour-bottom-right .tour-block,ngx-guided-tour .tour-step.tour-bottom-left .tour-block{margin-top:10px}ngx-guided-tour .tour-step.tour-top,ngx-guided-tour .tour-step.tour-top-right,ngx-guided-tour .tour-step.tour-top-left{margin-bottom:10px}ngx-guided-tour .tour-step.tour-top .tour-arrow:before,ngx-guided-tour .tour-step.tour-top-right .tour-arrow:before,ngx-guided-tour .tour-step.tour-top-left .tour-arrow:before{position:absolute;bottom:0}ngx-guided-tour .tour-step.tour-top .tour-block,ngx-guided-tour .tour-step.tour-top-right .tour-block,ngx-guided-tour .tour-step.tour-top-left .tour-block{margin-bottom:10px}ngx-guided-tour .tour-step.tour-bottom .tour-arrow:before,ngx-guided-tour .tour-step.tour-top .tour-arrow:before{transform:translate(-50%);left:50%}ngx-guided-tour .tour-step.tour-bottom-right .tour-arrow:before,ngx-guided-tour .tour-step.tour-top-right .tour-arrow:before{transform:translate(-100%);left:calc(100% - 5px)}ngx-guided-tour .tour-step.tour-bottom-left .tour-arrow:before,ngx-guided-tour .tour-step.tour-top-left .tour-arrow:before{left:5px}ngx-guided-tour .tour-step.tour-left .tour-arrow:before{position:absolute;left:100%;transform:translate(-100%);top:5px}ngx-guided-tour .tour-step.tour-left .tour-block{margin-right:10px}ngx-guided-tour .tour-step.tour-right .tour-arrow:before{position:absolute;left:0;top:5px}ngx-guided-tour .tour-step.tour-right .tour-block{margin-left:10px}ngx-guided-tour .tour-step .tour-block{padding:15px 25px}ngx-guided-tour .tour-step .tour-progress-indicator{padding-bottom:15px}ngx-guided-tour .tour-step .tour-title{font-weight:700!important;padding-bottom:20px}ngx-guided-tour .tour-step h3.tour-title{font-size:20px}ngx-guided-tour .tour-step h2.tour-title{font-size:30px}ngx-guided-tour .tour-step .tour-content{min-height:80px;padding-bottom:30px;font-size:15px}ngx-guided-tour .tour-step .tour-buttons{overflow:hidden}ngx-guided-tour .tour-step .tour-buttons button.link-button{font-size:15px;font-weight:700;max-width:none!important;cursor:pointer;text-align:center;white-space:nowrap;vertical-align:middle;border:1px solid transparent;line-height:1.5;background-color:transparent;position:relative;outline:none;padding:0 15px;-webkit-appearance:button}ngx-guided-tour .tour-step .tour-buttons button.skip-button.link-button{padding-left:0;border-left:0}ngx-guided-tour .tour-step .tour-buttons .back-button{cursor:pointer;border-radius:1px;font-size:14px;border:none;outline:none;padding-left:10px;padding-right:10px}ngx-guided-tour .tour-step .tour-buttons .next-button{cursor:pointer;border-radius:1px;font-size:14px;border:none;outline:none;padding-left:10px;padding-right:10px}.arrow{position:absolute;left:-50px;top:-13px}.right-connector{transform:scaleX(-1);left:0;right:-46px}.circle{position:absolute;box-sizing:border-box;height:118px;width:100px;border:7px solid #000;border-radius:50%;-webkit-clip-path:inset(0 50% 0 0);clip-path:inset(0 50% 0 0);border-style:dotted}.triangle{position:absolute;width:20px;height:15px;background:#000;margin-top:-6px;margin-left:38px;-webkit-clip-path:polygon(50% 0,0% 100%,100% 100%);clip-path:polygon(50% 0,0% 100%,100% 100%);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.circle-start-dot{display:inline;width:16px;height:16px;background-color:#f3962e;content:\"\";border-radius:50%;position:absolute;margin-top:108px;margin-left:40px}.tour-step.left-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;position:absolute;content:\"\";overflow:hidden;top:10px}.tour-step.right-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;right:0;position:absolute;content:\"\";overflow:hidden;top:10px}.tour-step.top-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;right:0;position:absolute;content:\"\";overflow:hidden;top:10px}.tour-step.bottom-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;right:0;position:absolute;content:\"\";overflow:hidden;top:10px}.progress-container{display:flex;justify-content:center;align-items:center}.pagination{display:flex;justify-content:center;align-items:center;padding:.5rem}.nav-dots{display:inline-block;position:relative;width:auto;height:10px;border-radius:50%;cursor:default;margin:2px}.nav-dots .nav-dot{top:-5px;width:11px;height:11px;margin:0 4px;position:relative;border-radius:100%;display:inline-block;background-color:#d3d3d3}.nav-dot-active{background:#113463}.top-connector{top:-116px!important;right:173px!important}.top-connector .circle{top:50px;left:80px;transform:rotate(180deg);width:50px;height:70px}.top-connector .circle-start-dot{margin-left:100px}.top-connector .triangle{left:63px;top:49px;transform:rotate(44deg)!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-guided-tour', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div *ngIf=\"currentTourStep && selectedElementRect && isOrbShowing\" (mouseenter)=\"handleOrb()\"\n  class=\"tour-orb tour-{{ currentTourStep.orientation }}\" [style.top.px]=\"orbTopPosition\"\n  [style.left.px]=\"orbLeftPosition\" [style.transform]=\"orbTransform\">\n  <div class=\"tour-orb-ring\"></div>\n</div>\n<div *ngIf=\"currentTourStep && !isOrbShowing\">\n  <div class=\"guided-tour-user-input-mask\" (click)=\"backdropClick($event)\"></div>\n  <div class=\"\" [attr.class]=\"'guided-tour-spotlight-overlay ' + currentTourStep?.class\" [style.top.px]=\"overlayTop\"\n    [style.left.px]=\"overlayLeft\" [style.height.px]=\"overlayHeight\" [style.width.px]=\"overlayWidth\">\n  </div>\n</div>\n<div *ngIf=\"currentTourStep && !isOrbShowing\">\n  <div #tourStep *ngIf=\"currentTourStep\"\n    class=\"tour-step tour-{{ currentTourStep.orientation}} {{currentTourStep?.containerClass}}\" [ngClass]=\"{\n                    'page-tour-step': !currentTourStep.selector,\n                    'right-panel': currentTourStep.connectorDirection == 'right',\n                    'left-panel': currentTourStep.connectorDirection == 'left',\n                    'bottom-panel': currentTourStep.connectorDirection == 'bottom',\n                    'top-panel': currentTourStep.connectorDirection == 'top'\n                }\" [style.top.px]=\"(currentTourStep.selector && selectedElementRect ? topPosition : null)\"\n    [style.left.px]=\"(currentTourStep.selector && selectedElementRect ? leftPosition : null)\"\n    [style.width.px]=\"(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)\"\n    [style.transform]=\"(currentTourStep.selector && selectedElementRect ? transform : null)\">\n\n    <div *ngIf=\"currentTourStep.isMobile && currentTourStep.connectorDirection == 'bottom'\" class=\"tour-buttons tour-button-container\">\n      <div class=\"tour-actions-button-container\">\n        <button *ngIf=\"!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage\"\n          [attr.class]=\"currentTourStep?.backBtnClass + ' back-button'\" (click)=\"guidedTourService.backStep()\">\n          {{ backText }}\n        </button>\n      </div>\n      <button *ngIf=\"!guidedTourService.onLastStep && !guidedTourService.onResizeMessage\" class=\"next-button\"\n        (click)=\"guidedTourService.nextStep()\">\n        {{ nextText }}\n        <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">\n          <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n        </ng-container>\n      </button>\n      <button *ngIf=\"guidedTourService.onLastStep\" [attr.class]=\"currentTourStep?.nextBtnClass + ' next-button'\"\n        (click)=\"guidedTourService.nextStep()\">\n        {{ doneText }}\n      </button>\n      <button *ngIf=\"guidedTourService.onResizeMessage\" class=\"next-button\" (click)=\"guidedTourService.resetTour()\">\n        {{ closeText }}\n      </button>\n\n    </div>\n\n    <div *ngIf=\"currentTourStep.selector\" class=\"tour-arrow\"></div>\n    <div class=\"tour-block\">\n      <div class=\"arrow\" [ngClass]=\"{\n                        'right-connector': (currentTourStep.selector && currentTourStep.connectorDirection == 'right'),\n                        'left-connector': (currentTourStep.selector && currentTourStep.connectorDirection == 'left'),\n                        'bottom-connector': (currentTourStep.selector && currentTourStep.connectorDirection == 'bottom'),\n                        'top-connector': (currentTourStep.selector && currentTourStep.connectorDirection == 'top')\n                    }\">\n        <div class=\"circle\"></div>\n        <div class=\"circle-start-dot\"></div>\n        <div class=\"triangle\"></div>\n      </div>\n\n      <div *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.TopOfTourBlock\n                        && !guidedTourService.onResizeMessage\" class=\"tour-progress-indicator\">\n        <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n      </div>\n      <div class=\"tour-image\" *ngIf=\"currentTourStep.icon && currentTourStep.selector\">\n        <mat-icon>{{currentTourStep.icon}}</mat-icon>\n      </div>\n      <h3 class=\"tour-title\" *ngIf=\"currentTourStep.title && currentTourStep.selector\">\n        {{ currentTourStep.title }}\n      </h3>\n      <h2 class=\"tour-title\" *ngIf=\"currentTourStep.title && !currentTourStep.selector\">\n        {{ currentTourStep.title }}\n      </h2>\n      <div class=\"tour-content\" [innerHTML]=\"currentTourStep.content\"></div>\n      <div *ngIf=\"!currentTourStep.isMobile\" class=\"tour-buttons tour-button-container\">\n        <!-- <div class=\"tour-skip-container\">\n                            <button *ngIf=\"!guidedTourService.onResizeMessage\"\n                                (click)=\"guidedTourService.skipTour()\"\n                                [attr.class]=\"currentTourStep?.skipBtnClass + ' skip-button link-button'\">\n                                {{ skipText }}\n                            </button>\n                        </div> -->\n        <div class=\"tour-actions-button-container\">\n          <button *ngIf=\"!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage\"\n            [attr.class]=\"currentTourStep?.backBtnClass + ' back-button'\" (click)=\"guidedTourService.backStep()\">\n            {{ backText }}\n          </button>\n        </div>\n        <button *ngIf=\"!guidedTourService.onLastStep && !guidedTourService.onResizeMessage\" class=\"next-button\"\n          (click)=\"guidedTourService.nextStep()\">\n          {{ nextText }}\n          <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">\n            <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n          </ng-container>\n        </button>\n        <button *ngIf=\"guidedTourService.onLastStep\" [attr.class]=\"currentTourStep?.nextBtnClass + ' next-button'\"\n          (click)=\"guidedTourService.nextStep()\">\n          {{ doneText }}\n        </button>\n        <button *ngIf=\"guidedTourService.onResizeMessage\" class=\"next-button\" (click)=\"guidedTourService.resetTour()\">\n          {{ closeText }}\n        </button>\n\n      </div>\n\n\n      <div class=\"progress-container\">\n        <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.Dots\">\n          <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n        </ng-container>\n      </div>\n\n    </div>\n    <div *ngIf=\"currentTourStep.isMobile && currentTourStep.connectorDirection != 'bottom'\" class=\"tour-buttons tour-button-container\">\n      <div class=\"tour-actions-button-container\">\n        <button *ngIf=\"!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage\"\n          [attr.class]=\"currentTourStep?.backBtnClass + ' back-button'\" (click)=\"guidedTourService.backStep()\">\n          {{ backText }}\n        </button>\n      </div>\n      <button *ngIf=\"!guidedTourService.onLastStep && !guidedTourService.onResizeMessage\" class=\"next-button\"\n        (click)=\"guidedTourService.nextStep()\">\n        {{ nextText }}\n        <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">\n          <ng-container *ngTemplateOutlet=\"progress\"></ng-container>\n        </ng-container>\n      </button>\n      <button *ngIf=\"guidedTourService.onLastStep\" [attr.class]=\"currentTourStep?.nextBtnClass + ' next-button'\"\n        (click)=\"guidedTourService.nextStep()\">\n        {{ doneText }}\n      </button>\n      <button *ngIf=\"guidedTourService.onResizeMessage\" class=\"next-button\" (click)=\"guidedTourService.resetTour()\">\n        {{ closeText }}\n      </button>\n\n    </div>\n  </div>\n  <ng-template #progress>\n    <ng-container *ngTemplateOutlet=\"\n                progressIndicator || defaultProgressIndicator; \n                context: { currentStepNumber: guidedTourService.currentTourStepDisplay, totalSteps: guidedTourService.currentTourStepCount }\n            \"></ng-container>\n  </ng-template>\n  <ng-template #defaultProgressIndicator let-currentStepNumber=\"currentStepNumber\" let-totalSteps=\"totalSteps\">\n    <!-- <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">&nbsp;</ng-container>{{ currentStepNumber }}/{{ totalSteps }} -->\n    <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.Dots\">\n      <div class=\"pagination\">\n        <li class=\"nav-dots\">\n          <ng-container *ngFor=\"let dot of [].constructor(totalSteps); first as isFirst; index as i\">\n            <label [ngClass]=\"(currentStepNumber == (i+1)) ? 'nav-dot-active': ''\" class=\"nav-dot\"\n              id=\"img-dot-+{{i}}+{{currentStepNumber}}\"></label>\n          </ng-container>\n        </li>\n      </div>\n    </ng-container>\n  </ng-template>", styles: ["ngx-guided-tour .guided-tour-user-input-mask{position:fixed;top:0;left:0;display:block;height:100%;width:100%;max-height:100vh;text-align:center;opacity:0}ngx-guided-tour .guided-tour-spotlight-overlay{position:fixed;box-shadow:0 0 0 9999px #000000b3,0 0 1.5rem #00000080}ngx-guided-tour .tour-orb{position:fixed;width:20px;height:20px;border-radius:50%}ngx-guided-tour .tour-orb .tour-orb-ring{width:35px;height:35px;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 2s linear infinite}ngx-guided-tour .tour-orb .tour-orb-ring:after{content:\"\";display:inline-block;height:100%;width:100%;border-radius:50%}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.45);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}ngx-guided-tour .tour-step{position:fixed}ngx-guided-tour .tour-step.page-tour-step{max-width:400px;width:50%;left:50%;top:50%;transform:translate(-50%,-50%)}ngx-guided-tour .tour-step.tour-bottom .tour-arrow:before,ngx-guided-tour .tour-step.tour-bottom-right .tour-arrow:before,ngx-guided-tour .tour-step.tour-bottom-left .tour-arrow:before{position:absolute}ngx-guided-tour .tour-step.tour-bottom .tour-block,ngx-guided-tour .tour-step.tour-bottom-right .tour-block,ngx-guided-tour .tour-step.tour-bottom-left .tour-block{margin-top:10px}ngx-guided-tour .tour-step.tour-top,ngx-guided-tour .tour-step.tour-top-right,ngx-guided-tour .tour-step.tour-top-left{margin-bottom:10px}ngx-guided-tour .tour-step.tour-top .tour-arrow:before,ngx-guided-tour .tour-step.tour-top-right .tour-arrow:before,ngx-guided-tour .tour-step.tour-top-left .tour-arrow:before{position:absolute;bottom:0}ngx-guided-tour .tour-step.tour-top .tour-block,ngx-guided-tour .tour-step.tour-top-right .tour-block,ngx-guided-tour .tour-step.tour-top-left .tour-block{margin-bottom:10px}ngx-guided-tour .tour-step.tour-bottom .tour-arrow:before,ngx-guided-tour .tour-step.tour-top .tour-arrow:before{transform:translate(-50%);left:50%}ngx-guided-tour .tour-step.tour-bottom-right .tour-arrow:before,ngx-guided-tour .tour-step.tour-top-right .tour-arrow:before{transform:translate(-100%);left:calc(100% - 5px)}ngx-guided-tour .tour-step.tour-bottom-left .tour-arrow:before,ngx-guided-tour .tour-step.tour-top-left .tour-arrow:before{left:5px}ngx-guided-tour .tour-step.tour-left .tour-arrow:before{position:absolute;left:100%;transform:translate(-100%);top:5px}ngx-guided-tour .tour-step.tour-left .tour-block{margin-right:10px}ngx-guided-tour .tour-step.tour-right .tour-arrow:before{position:absolute;left:0;top:5px}ngx-guided-tour .tour-step.tour-right .tour-block{margin-left:10px}ngx-guided-tour .tour-step .tour-block{padding:15px 25px}ngx-guided-tour .tour-step .tour-progress-indicator{padding-bottom:15px}ngx-guided-tour .tour-step .tour-title{font-weight:700!important;padding-bottom:20px}ngx-guided-tour .tour-step h3.tour-title{font-size:20px}ngx-guided-tour .tour-step h2.tour-title{font-size:30px}ngx-guided-tour .tour-step .tour-content{min-height:80px;padding-bottom:30px;font-size:15px}ngx-guided-tour .tour-step .tour-buttons{overflow:hidden}ngx-guided-tour .tour-step .tour-buttons button.link-button{font-size:15px;font-weight:700;max-width:none!important;cursor:pointer;text-align:center;white-space:nowrap;vertical-align:middle;border:1px solid transparent;line-height:1.5;background-color:transparent;position:relative;outline:none;padding:0 15px;-webkit-appearance:button}ngx-guided-tour .tour-step .tour-buttons button.skip-button.link-button{padding-left:0;border-left:0}ngx-guided-tour .tour-step .tour-buttons .back-button{cursor:pointer;border-radius:1px;font-size:14px;border:none;outline:none;padding-left:10px;padding-right:10px}ngx-guided-tour .tour-step .tour-buttons .next-button{cursor:pointer;border-radius:1px;font-size:14px;border:none;outline:none;padding-left:10px;padding-right:10px}.arrow{position:absolute;left:-50px;top:-13px}.right-connector{transform:scaleX(-1);left:0;right:-46px}.circle{position:absolute;box-sizing:border-box;height:118px;width:100px;border:7px solid #000;border-radius:50%;-webkit-clip-path:inset(0 50% 0 0);clip-path:inset(0 50% 0 0);border-style:dotted}.triangle{position:absolute;width:20px;height:15px;background:#000;margin-top:-6px;margin-left:38px;-webkit-clip-path:polygon(50% 0,0% 100%,100% 100%);clip-path:polygon(50% 0,0% 100%,100% 100%);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.circle-start-dot{display:inline;width:16px;height:16px;background-color:#f3962e;content:\"\";border-radius:50%;position:absolute;margin-top:108px;margin-left:40px}.tour-step.left-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;position:absolute;content:\"\";overflow:hidden;top:10px}.tour-step.right-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;right:0;position:absolute;content:\"\";overflow:hidden;top:10px}.tour-step.top-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;right:0;position:absolute;content:\"\";overflow:hidden;top:10px}.tour-step.bottom-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;right:0;position:absolute;content:\"\";overflow:hidden;top:10px}.progress-container{display:flex;justify-content:center;align-items:center}.pagination{display:flex;justify-content:center;align-items:center;padding:.5rem}.nav-dots{display:inline-block;position:relative;width:auto;height:10px;border-radius:50%;cursor:default;margin:2px}.nav-dots .nav-dot{top:-5px;width:11px;height:11px;margin:0 4px;position:relative;border-radius:100%;display:inline-block;background-color:#d3d3d3}.nav-dot-active{background:#113463}.top-connector{top:-116px!important;right:173px!important}.top-connector .circle{top:50px;left:80px;transform:rotate(180deg);width:50px;height:70px}.top-connector .circle-start-dot{margin-left:100px}.top-connector .triangle{left:63px;top:49px;transform:rotate(44deg)!important}\n"] }]
+        }], ctorParameters: () => [{ type: GuidedTourService }, { type: WindowRefService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { topOfPageAdjustment: [{
+                type: Input
+            }], tourStepWidth: [{
+                type: Input
+            }], minimalTourStepWidth: [{
+                type: Input
+            }], skipText: [{
+                type: Input
+            }], nextText: [{
+                type: Input
+            }], doneText: [{
+                type: Input
+            }], closeText: [{
+                type: Input
+            }], backText: [{
+                type: Input
+            }], progressIndicatorLocation: [{
+                type: Input
+            }], progressIndicator: [{
+                type: Input
+            }], tourStep: [{
+                type: ViewChild,
+                args: ['tourStep', { static: false }]
+            }] } });
+
+class GuidedTourModule {
+    static forRoot() {
+        return {
+            ngModule: GuidedTourModule,
+            providers: [ErrorHandler, GuidedTourService],
+        };
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourModule, declarations: [GuidedTourComponent], imports: [CommonModule, MatIconModule], exports: [GuidedTourComponent] });
+    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourModule, providers: [WindowRefService], imports: [CommonModule, MatIconModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuidedTourModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GuidedTourComponent],
+                    imports: [CommonModule, MatIconModule],
+                    providers: [WindowRefService],
+                    exports: [GuidedTourComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-guided-tour
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GuidedTourComponent, GuidedTourModule, GuidedTourService, Orientation, ProgressIndicatorLocation, WindowRefService };
+//# sourceMappingURL=igot-cb-tour-guide.mjs.map