import * as i4 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, Component, Inject, HostBinding, EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
import * as i2$1 from 'ng-devui/overlay-container';
import { OverlayContainerRef } from 'ng-devui/overlay-container';
import * as i2 from 'ng-devui/position';
import { PositioningModule } from 'ng-devui/position';
import * as i5 from 'ng-devui/utils';
import { SafePipeModule } from 'ng-devui/utils';
import * as i3 from 'ng-devui/i18n';
import { ReplaySubject, BehaviorSubject, fromEvent, Subscription } from 'rxjs';
import { debounceTime, throttleTime } from 'rxjs/operators';
import { throttle } from 'lodash-es';

class StepsGuideService {
    constructor() {
        this.showGuideSource = new ReplaySubject(1);
        this.currentIndexSource = new BehaviorSubject(0);
        this.showGuideObs = this.showGuideSource.asObservable();
        this.currentIndex = this.currentIndexSource.asObservable();
        // 引导步骤
        this.steps = [];
        this.currentStep = 0;
    }
    // 切换向导的显示和销毁
    showGuide(visible) {
        this.showGuideSource.next(visible);
    }
    setCurrentIndex(index) {
        this.currentStep = index;
        this.currentIndexSource.next(index);
    }
    getCurrentStep() {
        return this.currentStep;
    }
    setSteps(steps) {
        this.steps = steps;
    }
    getSteps() {
        return this.steps;
    }
}
StepsGuideService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
StepsGuideService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideService, decorators: [{
            type: Injectable
        }] });

class StepsGuideComponent {
    constructor(stepService, renderer, positionService, elm, i18n, doc) {
        this.stepService = stepService;
        this.renderer = renderer;
        this.positionService = positionService;
        this.elm = elm;
        this.i18n = i18n;
        this.doc = doc;
        this.position = 'top';
        this.zIndex = 1100;
        this.dots = [];
        this.SCROLL_REFRESH_INTERVAL = 100;
        this.DOT_HORIZONTAL_MARGIN = 27;
        this.DOT_VERTICAL_MARGIN = 22;
        this.document = this.doc;
    }
    get class() {
        return 'devui-step-item ' + this.position;
    }
    get display() {
        return 'block';
    }
    ngOnInit() {
        this.dots = new Array(this.stepsCount);
        this.elm.nativeElement.style.zIndex = this.zIndex;
        this.i18nCommonText = this.i18n.getI18nText().stepsGuide;
        const i18nSubscription = this.i18n.langChange().subscribe((data) => {
            this.i18nCommonText = data.stepsGuide;
        });
        this.subScriber = fromEvent(window, 'resize')
            .pipe(debounceTime(this.SCROLL_REFRESH_INTERVAL))
            .subscribe(() => {
            this.updatePosition();
        });
        this.subScriber.add(i18nSubscription);
    }
    ngAfterViewInit() {
        this.updatePosition();
        if (!this.scrollElement) {
            const currentScrollElement = this.positionService.getScrollParent(this.triggerElement);
            this.scrollElement = currentScrollElement === this.document.body ? window : currentScrollElement;
        }
        const scrollSubscriber = fromEvent(this.scrollElement, 'scroll')
            .pipe(throttleTime(this.SCROLL_REFRESH_INTERVAL, undefined, { leading: true, trailing: true }))
            .subscribe(() => {
            this.updatePosition();
        });
        this.subScriber.add(scrollSubscriber);
    }
    ngOnDestroy() {
        if (this.subScriber) {
            this.subScriber.unsubscribe();
        }
    }
    updatePosition() {
        const calcPosition = this.position === 'left' ? 'left-top' : this.position === 'right' ? 'right-top' : this.position;
        const rect = this.positionService.positionElements(this.triggerElement, this.elm.nativeElement, calcPosition, true);
        const targetRect = this.triggerElement.getBoundingClientRect();
        let left = rect.left;
        let top = rect.top;
        switch (rect.placementPrimary) {
            case 'top':
                left = targetRect.left + this.triggerElement.clientWidth / 2 - this.elm.nativeElement.clientWidth / 2;
                top = top + this.triggerElement.clientHeight / 2 - this.DOT_HORIZONTAL_MARGIN;
                break;
            case 'bottom':
                left = targetRect.left + this.triggerElement.clientWidth / 2 - this.elm.nativeElement.clientWidth / 2;
                top = top + this.DOT_HORIZONTAL_MARGIN / 2;
                break;
            case 'left':
                left = left + this.triggerElement.clientWidth / 2 - this.DOT_HORIZONTAL_MARGIN;
                top = top + this.triggerElement.clientHeight / 2 - this.DOT_VERTICAL_MARGIN;
                break;
            case 'right':
                left = left - this.triggerElement.clientWidth / 2 + this.DOT_HORIZONTAL_MARGIN;
                top = top + this.triggerElement.clientHeight / 2 - this.DOT_VERTICAL_MARGIN;
                break;
            default:
        }
        switch (rect.placementSecondary) {
            case 'left':
                left = targetRect.left;
                break;
            case 'right':
                left = targetRect.left - this.elm.nativeElement.clientWidth + this.triggerElement.clientWidth;
                break;
            default:
        }
        this.renderer.setStyle(this.elm.nativeElement, 'left', `${left}px`);
        this.renderer.setStyle(this.elm.nativeElement, 'top', `${top}px`);
        if (this.leftFix) {
            this.renderer.setStyle(this.elm.nativeElement, 'marginLeft', `${this.leftFix}px`);
        }
        if (this.topFix) {
            this.renderer.setStyle(this.elm.nativeElement, 'marginTop', `${this.topFix}px`);
        }
    }
    next() {
        const newStep = (this.stepIndex + 1 < this.stepsCount && this.stepIndex + 1) || this.stepsCount - 1;
        this.stepService.setCurrentIndex(newStep);
        this.close(newStep, 'next');
    }
    prev() {
        const newStep = (this.stepIndex - 1 > 0 && this.stepIndex - 1) || 0;
        this.stepService.setCurrentIndex(newStep);
        this.close(newStep, 'prev');
    }
    closeAll() {
        localStorage.setItem(`devui_guide_${this.pageName}`, '0');
        this.close(this.stepService.getCurrentStep(), 'close');
    }
    close(step, type) { }
}
StepsGuideComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideComponent, deps: [{ token: StepsGuideService }, { token: i0.Renderer2 }, { token: i2.PositionService }, { token: i0.ElementRef }, { token: i3.I18nService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
StepsGuideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: StepsGuideComponent, selector: "ng-component", host: { properties: { "class": "this.class", "style.display": "this.display" } }, ngImport: i0, template: "<div class=\"devui-shining-dot\"></div>\n<div class=\"devui-shining-plus\"></div>\n<div class=\"devui-arrow\"></div>\n<div class=\"devui-guide-container\">\n  <p class=\"devui-title\">{{ title }}</p>\n  <div class=\"icon icon-close\" (click)=\"closeAll()\"></div>\n  <div class=\"devui-content\" [innerHTML]=\"content | safe: 'html'\"></div>\n  <div class=\"devui-ctrl\">\n    <div *ngIf=\"dots.length > 1 && !extraConfig?.hideStepNav\" class=\"devui-dots\">\n      <em *ngFor=\"let dot of dots; index as i\" class=\"icon icon-dot-status {{ i === stepIndex ? 'devui-active' : '' }}\"></em>\n    </div>\n    <div class=\"devui-guide-btn\">\n      <div *ngIf=\"stepIndex > 0 && !extraConfig?.hidePreStep\" class=\"devui-prev-step\" (click)=\"prev()\">{{ i18nCommonText.previous }}</div>\n      <div *ngIf=\"stepIndex + 1 < stepsCount\" (click)=\"next()\">{{ i18nCommonText.next }}</div>\n      <div *ngIf=\"stepIndex === stepsCount - 1\" (click)=\"closeAll()\">{{ i18nCommonText.finish }}</div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host.devui-step-item{width:400px;min-height:160px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0);box-shadow:0 8px 16px #252b3a1a;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);font-size:12px;font-size:var(--devui-font-size, 12px);color:#fff;color:var(--devui-light-text, #ffffff);padding:20px;position:absolute}:host.devui-step-item .devui-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);opacity:1;margin:0 0 20px;padding:0}:host.devui-step-item>.devui-arrow,:host.devui-step-item>.devui-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}:host.devui-step-item>.devui-arrow{border-width:8px}:host.devui-step-item.left>.devui-arrow{top:23px;right:-6px;margin-top:-3px;border-right-width:0;transform:rotate(-135deg);border-left-color:#5e7ce0;border-left-color:var(--devui-brand, #5e7ce0)}:host.devui-step-item.top>.devui-arrow,:host.devui-step-item.top-left>.devui-arrow,:host.devui-step-item.top-right>.devui-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#5e7ce0;border-top-color:var(--devui-brand, #5e7ce0);transform:rotate(135deg)}:host.devui-step-item.top>.devui-arrow{left:calc(50% - 4px)}:host.devui-step-item.top-left>.devui-arrow{left:23px}:host.devui-step-item.top-right>.devui-arrow{right:23px;transform:rotate(-135deg)}:host.devui-step-item.right>.devui-arrow{top:23px;left:-6px;margin-top:-3px;border-left-width:0;transform:rotate(135deg);border-right-color:#5e7ce0;border-right-color:var(--devui-brand, #5e7ce0)}:host.devui-step-item.bottom>.devui-arrow,:host.devui-step-item.bottom-left>.devui-arrow,:host.devui-step-item.bottom-right>.devui-arrow{top:-6px;margin-left:3px;border-top-width:0;border-bottom-color:#5e7ce0;border-bottom-color:var(--devui-brand, #5e7ce0)}:host.devui-step-item.bottom>.devui-arrow{left:calc(50% - 4px);transform:rotate(-135deg)}:host.devui-step-item.bottom-right>.devui-arrow{right:23px;transform:rotate(135deg)}:host.devui-step-item.bottom-left>.devui-arrow{left:23px;transform:rotate(-135deg)}:host.devui-step-item>.devui-shining-dot,:host.devui-step-item .devui-shining-plus{position:absolute;background:#5e7ce0;background:var(--devui-brand, #5e7ce0);width:6px;height:6px;border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px)}:host.devui-step-item.left>.devui-shining-dot,:host.devui-step-item.left>.devui-shining-plus{top:21px;right:-30px}:host.devui-step-item.right>.devui-shining-dot,:host.devui-step-item.right>.devui-shining-plus{top:21px;left:-30px}:host.devui-step-item.top>.devui-shining-dot,:host.devui-step-item.top>.devui-shining-plus{left:calc(50% - 3px);bottom:-30px}:host.devui-step-item.top-left>.devui-shining-dot,:host.devui-step-item.top-left>.devui-shining-plus{left:21px;bottom:-30px}:host.devui-step-item.top-right>.devui-shining-dot,:host.devui-step-item.top-right>.devui-shining-plus{right:21px;bottom:-30px}:host.devui-step-item.bottom>.devui-shining-dot,:host.devui-step-item.bottom>.devui-shining-plus{left:calc(50% - 3px);top:-30px}:host.devui-step-item.bottom-right>.devui-shining-dot,:host.devui-step-item.bottom-right>.devui-shining-plus{top:-30px;right:21px}:host.devui-step-item.bottom-left>.devui-shining-dot,:host.devui-step-item.bottom-left>.devui-shining-plus{top:-30px;left:21px}:host.devui-step-item .devui-shining-plus{-webkit-animation:devui-glow 2s 0s infinite;animation:devui-glow 2s 0s infinite}:host.devui-step-item .devui-guide-container{position:relative}:host.devui-step-item .devui-guide-container>.icon-close{position:absolute;top:0;right:0;cursor:pointer}:host.devui-step-item .devui-guide-container .devui-ctrl{display:flex;flex-wrap:wrap}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-dots{color:#fff;color:var(--devui-light-text, #ffffff);position:relative;top:25px;font-size:12px;font-size:var(--devui-font-size, 12px);height:30px}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-dots>em{opacity:.2;margin:0 5px 0 2px}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-dots>em.devui-active{opacity:1}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-guide-btn{display:flex;flex-flow:row nowrap;flex-grow:1;justify-content:flex-end;padding:20px 0 0;white-space:nowrap}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-guide-btn>div{color:#fff;color:var(--devui-light-text, #ffffff);background:rgba(255,255,255,.1);border-radius:2px;border-radius:var(--devui-border-radius, 2px);padding:5px 15px;cursor:pointer;margin-left:10px}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-guide-btn>div.devui-prev-step{background:none;border:solid 1px rgba(255,255,255,.1)}@-webkit-keyframes devui-glow{0%{transform:scale(1);opacity:.5}25%{transform:scale(2);opacity:.3}50%{transform:scale(3);opacity:.1}75%{transform:scale(2);opacity:.3}to{transform:scale(1);opacity:.5}}@keyframes devui-glow{0%{transform:scale(1);opacity:.5}25%{transform:scale(2);opacity:.3}50%{transform:scale(3);opacity:.1}75%{transform:scale(2);opacity:.3}to{transform:scale(1);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.SafePipe, name: "safe" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideComponent, decorators: [{
            type: Component,
            args: [{ preserveWhitespaces: false, template: "<div class=\"devui-shining-dot\"></div>\n<div class=\"devui-shining-plus\"></div>\n<div class=\"devui-arrow\"></div>\n<div class=\"devui-guide-container\">\n  <p class=\"devui-title\">{{ title }}</p>\n  <div class=\"icon icon-close\" (click)=\"closeAll()\"></div>\n  <div class=\"devui-content\" [innerHTML]=\"content | safe: 'html'\"></div>\n  <div class=\"devui-ctrl\">\n    <div *ngIf=\"dots.length > 1 && !extraConfig?.hideStepNav\" class=\"devui-dots\">\n      <em *ngFor=\"let dot of dots; index as i\" class=\"icon icon-dot-status {{ i === stepIndex ? 'devui-active' : '' }}\"></em>\n    </div>\n    <div class=\"devui-guide-btn\">\n      <div *ngIf=\"stepIndex > 0 && !extraConfig?.hidePreStep\" class=\"devui-prev-step\" (click)=\"prev()\">{{ i18nCommonText.previous }}</div>\n      <div *ngIf=\"stepIndex + 1 < stepsCount\" (click)=\"next()\">{{ i18nCommonText.next }}</div>\n      <div *ngIf=\"stepIndex === stepsCount - 1\" (click)=\"closeAll()\">{{ i18nCommonText.finish }}</div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host.devui-step-item{width:400px;min-height:160px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0);box-shadow:0 8px 16px #252b3a1a;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);font-size:12px;font-size:var(--devui-font-size, 12px);color:#fff;color:var(--devui-light-text, #ffffff);padding:20px;position:absolute}:host.devui-step-item .devui-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);opacity:1;margin:0 0 20px;padding:0}:host.devui-step-item>.devui-arrow,:host.devui-step-item>.devui-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}:host.devui-step-item>.devui-arrow{border-width:8px}:host.devui-step-item.left>.devui-arrow{top:23px;right:-6px;margin-top:-3px;border-right-width:0;transform:rotate(-135deg);border-left-color:#5e7ce0;border-left-color:var(--devui-brand, #5e7ce0)}:host.devui-step-item.top>.devui-arrow,:host.devui-step-item.top-left>.devui-arrow,:host.devui-step-item.top-right>.devui-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#5e7ce0;border-top-color:var(--devui-brand, #5e7ce0);transform:rotate(135deg)}:host.devui-step-item.top>.devui-arrow{left:calc(50% - 4px)}:host.devui-step-item.top-left>.devui-arrow{left:23px}:host.devui-step-item.top-right>.devui-arrow{right:23px;transform:rotate(-135deg)}:host.devui-step-item.right>.devui-arrow{top:23px;left:-6px;margin-top:-3px;border-left-width:0;transform:rotate(135deg);border-right-color:#5e7ce0;border-right-color:var(--devui-brand, #5e7ce0)}:host.devui-step-item.bottom>.devui-arrow,:host.devui-step-item.bottom-left>.devui-arrow,:host.devui-step-item.bottom-right>.devui-arrow{top:-6px;margin-left:3px;border-top-width:0;border-bottom-color:#5e7ce0;border-bottom-color:var(--devui-brand, #5e7ce0)}:host.devui-step-item.bottom>.devui-arrow{left:calc(50% - 4px);transform:rotate(-135deg)}:host.devui-step-item.bottom-right>.devui-arrow{right:23px;transform:rotate(135deg)}:host.devui-step-item.bottom-left>.devui-arrow{left:23px;transform:rotate(-135deg)}:host.devui-step-item>.devui-shining-dot,:host.devui-step-item .devui-shining-plus{position:absolute;background:#5e7ce0;background:var(--devui-brand, #5e7ce0);width:6px;height:6px;border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px)}:host.devui-step-item.left>.devui-shining-dot,:host.devui-step-item.left>.devui-shining-plus{top:21px;right:-30px}:host.devui-step-item.right>.devui-shining-dot,:host.devui-step-item.right>.devui-shining-plus{top:21px;left:-30px}:host.devui-step-item.top>.devui-shining-dot,:host.devui-step-item.top>.devui-shining-plus{left:calc(50% - 3px);bottom:-30px}:host.devui-step-item.top-left>.devui-shining-dot,:host.devui-step-item.top-left>.devui-shining-plus{left:21px;bottom:-30px}:host.devui-step-item.top-right>.devui-shining-dot,:host.devui-step-item.top-right>.devui-shining-plus{right:21px;bottom:-30px}:host.devui-step-item.bottom>.devui-shining-dot,:host.devui-step-item.bottom>.devui-shining-plus{left:calc(50% - 3px);top:-30px}:host.devui-step-item.bottom-right>.devui-shining-dot,:host.devui-step-item.bottom-right>.devui-shining-plus{top:-30px;right:21px}:host.devui-step-item.bottom-left>.devui-shining-dot,:host.devui-step-item.bottom-left>.devui-shining-plus{top:-30px;left:21px}:host.devui-step-item .devui-shining-plus{-webkit-animation:devui-glow 2s 0s infinite;animation:devui-glow 2s 0s infinite}:host.devui-step-item .devui-guide-container{position:relative}:host.devui-step-item .devui-guide-container>.icon-close{position:absolute;top:0;right:0;cursor:pointer}:host.devui-step-item .devui-guide-container .devui-ctrl{display:flex;flex-wrap:wrap}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-dots{color:#fff;color:var(--devui-light-text, #ffffff);position:relative;top:25px;font-size:12px;font-size:var(--devui-font-size, 12px);height:30px}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-dots>em{opacity:.2;margin:0 5px 0 2px}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-dots>em.devui-active{opacity:1}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-guide-btn{display:flex;flex-flow:row nowrap;flex-grow:1;justify-content:flex-end;padding:20px 0 0;white-space:nowrap}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-guide-btn>div{color:#fff;color:var(--devui-light-text, #ffffff);background:rgba(255,255,255,.1);border-radius:2px;border-radius:var(--devui-border-radius, 2px);padding:5px 15px;cursor:pointer;margin-left:10px}:host.devui-step-item .devui-guide-container .devui-ctrl .devui-guide-btn>div.devui-prev-step{background:none;border:solid 1px rgba(255,255,255,.1)}@-webkit-keyframes devui-glow{0%{transform:scale(1);opacity:.5}25%{transform:scale(2);opacity:.3}50%{transform:scale(3);opacity:.1}75%{transform:scale(2);opacity:.3}to{transform:scale(1);opacity:.5}}@keyframes devui-glow{0%{transform:scale(1);opacity:.5}25%{transform:scale(2);opacity:.3}50%{transform:scale(3);opacity:.1}75%{transform:scale(2);opacity:.3}to{transform:scale(1);opacity:.5}}\n"] }]
        }], ctorParameters: function () { return [{ type: StepsGuideService }, { type: i0.Renderer2 }, { type: i2.PositionService }, { type: i0.ElementRef }, { type: i3.I18nService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }]; }, propDecorators: { class: [{
                type: HostBinding,
                args: ['class']
            }], display: [{
                type: HostBinding,
                args: ['style.display']
            }] } });

class StepsGuideDirective {
    constructor(stepService, elm, componentFactoryResolver, overlayContainerRef, doc) {
        this.stepService = stepService;
        this.elm = elm;
        this.componentFactoryResolver = componentFactoryResolver;
        this.overlayContainerRef = overlayContainerRef;
        this.doc = doc;
        this.steps = [];
        // 可选，用于修正引导位置
        this.leftFix = 0;
        this.topFix = 0;
        this.zIndex = 1100;
        // 是否自动滚动页面至目标
        this.scrollToTargetSwitch = true;
        // 点击引导操作触发，返回当前步骤和当前操作，比如上一步、下一步、关闭
        this.operateChange = new EventEmitter();
        this.sub = new Subscription();
        // 监听dom变化的设置，监听属性变化和dom所属节点树变化
        this.MUTATION_OBSERVER_CONFIG = { attributes: true, subtree: true };
        this.MUTATION_OBSERVER_TIME = 500;
        // 监听dom变化的回调方法，即dom发生变化时触发resize事件
        this.mutationCallBack = () => {
            if (typeof window === 'undefined') {
                return;
            }
            const resizeEvt = this.document.createEvent('Event');
            resizeEvt.initEvent('resize', true, true);
            window.dispatchEvent(resizeEvt);
        };
        this.document = this.doc;
    }
    set dStepsGuidePosition(pos) {
        this._dStepsGuidePosition = pos;
    }
    get dStepsGuidePosition() {
        return this._dStepsGuidePosition || 'top';
    }
    /**
     * @deprecated Use dStepsGuidePosition to replace.
     */
    set position(pos) {
        if (!this._dStepsGuidePosition) {
            this.dStepsGuidePosition = pos;
        }
    }
    // 允许用户指定一个dom反馈页面变化，通过MutationObserver监听该dom所属节点树变化触发resize事件使引导弹窗自动修正位置
    set observerDom(dom) {
        if (dom) {
            this._observerDom = dom;
            // 创建监听实例，并限制回调方法在500ms内只响应一次，避免多次响应dom变化造成性能负担
            this.observer = new MutationObserver(throttle(this.mutationCallBack, this.MUTATION_OBSERVER_TIME, { 'leading': false, 'trailing': true }));
            this.observer.observe(this._observerDom, this.MUTATION_OBSERVER_CONFIG);
        }
        else {
            this.destroyMutationObserver(true);
        }
    }
    ngOnInit() {
        // 监听当前索引变化，决定显示步骤
        this.sub.add(this.stepService.currentIndex.subscribe(index => {
            this.canChange(index).then((change) => {
                if (!change) {
                    return;
                }
            });
            // 防止服务中的步骤被置空或默认为空
            const serviceSteps = this.stepService.getSteps() || [];
            this.steps = serviceSteps.length > 0 ? serviceSteps : this.steps;
            const state = localStorage.getItem(`devui_guide_${this.pageName}`) || '1';
            this.toggle = Number(state);
            this.currentIndex = index;
            const currentStep = this.steps.length > 0 && this.steps[this.currentIndex];
            // 当前步骤内容存在且未被屏蔽显示且为当前索引时插入操作指引弹窗
            if (currentStep && this.toggle && this.stepIndex === this.currentIndex) {
                const targetDom = this.targetElement || this.elm.nativeElement;
                if (this.scrollToTargetSwitch) {
                    targetDom.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
                }
                // 如果该步骤设置了监听dom和监听实例，重启监听
                if (this._observerDom && this.observer) {
                    this.observer.disconnect();
                    this.observer.observe(this._observerDom, this.MUTATION_OBSERVER_CONFIG);
                }
                setTimeout(() => {
                    this.insert({
                        triggerElement: targetDom,
                        scrollElement: this.scrollElement,
                        pageName: this.pageName,
                        title: currentStep.title,
                        content: currentStep.content,
                        stepsCount: this.steps.length,
                        stepIndex: this.stepIndex,
                        position: this.dStepsGuidePosition,
                        leftFix: this.leftFix,
                        topFix: this.topFix,
                        zIndex: this.zIndex,
                    });
                });
            }
        }));
        // 监听切换显示和隐藏
        this.sub.add(this.stepService.showGuideObs.subscribe(visible => {
            if (visible) {
                const currentIndex = this.stepService.getCurrentStep() || 0;
                localStorage.removeItem(`devui_guide_${this.pageName}`);
                this.stepService.setCurrentIndex(currentIndex);
            }
            else {
                localStorage.setItem(`devui_guide_${this.pageName}`, '0');
                this.destroyView();
            }
        }));
    }
    ngOnDestroy() {
        this.sub.unsubscribe();
        this.destroyView();
    }
    destroyView() {
        if (this.stepRef) {
            this.stepRef.hostView.destroy();
        }
        this.destroyMutationObserver();
    }
    insert(option) {
        const hasGuide = this.document.querySelector('body>.devui-step-item');
        if (!hasGuide) {
            this.stepRef = this.overlayContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(StepsGuideComponent));
            Object.assign(this.stepRef.instance, option, { extraConfig: this.extraConfig });
            this.stepRef.instance.close = (step, type) => {
                this.operateChange.emit({ clickType: type, currentIndex: step });
                this.destroyView();
            };
        }
    }
    // 断开监听, 清空监听dom和实例
    destroyMutationObserver(destroyAll) {
        if (this.observer) {
            this.observer.disconnect();
        }
        if (destroyAll) {
            this._observerDom = undefined;
            this.observer = undefined;
        }
    }
    canChange(index) {
        let changeResult = Promise.resolve(true);
        const currentIndex = this.currentIndex >= 0 ? this.currentIndex : this.stepIndex;
        if (currentIndex === index && this.beforeChange) {
            const result = this.beforeChange(currentIndex, index);
            if (typeof result !== 'undefined') {
                if (result.then) {
                    changeResult = result;
                }
                else if (result.subscribe) {
                    changeResult = result.toPromise();
                }
                else {
                    changeResult = Promise.resolve(result);
                }
            }
        }
        return changeResult;
    }
}
StepsGuideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideDirective, deps: [{ token: StepsGuideService }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i2$1.OverlayContainerRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
StepsGuideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: StepsGuideDirective, selector: "[dStepsGuide]", inputs: { pageName: "pageName", steps: "steps", stepIndex: "stepIndex", dStepsGuidePosition: "dStepsGuidePosition", position: "position", leftFix: "leftFix", topFix: "topFix", zIndex: "zIndex", targetElement: "targetElement", scrollElement: "scrollElement", scrollToTargetSwitch: "scrollToTargetSwitch", extraConfig: "extraConfig", observerDom: "observerDom", beforeChange: "beforeChange" }, outputs: { operateChange: "operateChange" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[dStepsGuide]',
                }]
        }], ctorParameters: function () { return [{ type: StepsGuideService }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i2$1.OverlayContainerRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }]; }, propDecorators: { pageName: [{
                type: Input
            }], steps: [{
                type: Input
            }], stepIndex: [{
                type: Input
            }], dStepsGuidePosition: [{
                type: Input
            }], position: [{
                type: Input
            }], leftFix: [{
                type: Input
            }], topFix: [{
                type: Input
            }], zIndex: [{
                type: Input
            }], targetElement: [{
                type: Input
            }], scrollElement: [{
                type: Input
            }], scrollToTargetSwitch: [{
                type: Input
            }], extraConfig: [{
                type: Input
            }], observerDom: [{
                type: Input
            }], beforeChange: [{
                type: Input
            }], operateChange: [{
                type: Output
            }] } });

class StepsGuideModule {
}
StepsGuideModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
StepsGuideModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideModule, declarations: [StepsGuideComponent, StepsGuideDirective], imports: [CommonModule,
        SafePipeModule,
        PositioningModule], exports: [StepsGuideDirective] });
StepsGuideModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideModule, providers: [
        OverlayContainerRef,
        StepsGuideService
    ], imports: [CommonModule,
        SafePipeModule,
        PositioningModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: StepsGuideModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        SafePipeModule,
                        PositioningModule
                    ],
                    declarations: [StepsGuideComponent, StepsGuideDirective],
                    exports: [StepsGuideDirective],
                    providers: [
                        OverlayContainerRef,
                        StepsGuideService
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { StepsGuideComponent, StepsGuideDirective, StepsGuideModule, StepsGuideService };
//# sourceMappingURL=ng-devui-steps-guide.mjs.map
