/**
 * @fileoverview added by tsickle
 * Generated from: lib/layout/rs-stepper/index.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
// 组件类
import { Component, EventEmitter, Input, Output, ViewChild, ElementRef, HostListener, ChangeDetectorRef, } from "@angular/core";
import { CommonFunctionService } from "../../service/common-function.service";
export class RSStepperComponent {
    /**
     * @param {?} cf
     * @param {?} ref
     */
    constructor(cf, ref) {
        this.cf = cf;
        this.ref = ref;
        this.steps = [];
        this.currentStep = 0;
        /**
         * Layout direction: 'horizontal' (default) or 'vertical'
         */
        this.orientation = "horizontal";
        this.stepClick = new EventEmitter();
        this.unlockedStep = 0; //已解锁的最大步骤
        this.showBtn = false;
        this.isAtStart = true;
        this.isAtEnd = false;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.steps.forEach((/**
         * @param {?} step
         * @return {?}
         */
        (step) => {
            step.displayTitle = this.cf.setMiddleEllipsis(step.label, 132, 12);
        }));
        this.syncUnlockedStep();
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        if (this.orientation === "horizontal") {
            setTimeout((/**
             * @return {?}
             */
            () => this.checkBtnShow(true)));
        }
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        if (changes["currentStep"] && !changes["currentStep"].firstChange) {
            this.syncUnlockedStep();
            if (this.orientation === "horizontal") {
                setTimeout((/**
                 * @return {?}
                 */
                () => this.scrollToStep()));
            }
        }
        if (this.orientation === "horizontal" &&
            ((changes["steps"] && changes["steps"].currentValue) ||
                changes["currentStep"])) {
            setTimeout((/**
             * @return {?}
             */
            () => this.checkBtnShow()));
        }
    }
    // 同步unlockedStep的最大值
    /**
     * @private
     * @return {?}
     */
    syncUnlockedStep() {
        if (this.currentStep > this.unlockedStep) {
            this.unlockedStep = this.currentStep;
        }
    }
    /**
     * @param {?} step
     * @param {?=} index
     * @return {?}
     */
    onStepClick(step, index) {
        if (step.step <= this.unlockedStep) {
            this.currentStep = step.step;
            this.stepClick.emit(step);
            if (this.orientation === "horizontal") {
                setTimeout((/**
                 * @return {?}
                 */
                () => this.scrollToStep(index)));
            }
        }
    }
    /**
     * @private
     * @param {?=} index
     * @return {?}
     */
    scrollToStep(index) {
        if (!this.menu || !this.menu.nativeElement)
            return;
        /** @type {?} */
        const menuEl = this.menu.nativeElement;
        /** @type {?} */
        const items = menuEl.querySelectorAll(".step");
        /** @type {?} */
        const targetIndex = typeof index === "number"
            ? index
            : this.steps.findIndex((/**
             * @param {?} s
             * @return {?}
             */
            (s) => s.step === this.currentStep));
        if (targetIndex < 0 || targetIndex >= items.length)
            return;
        /** @type {?} */
        const targetEl = (/** @type {?} */ (items[targetIndex]));
        //获取相对位置
        /** @type {?} */
        const containerRect = menuEl.getBoundingClientRect();
        /** @type {?} */
        const elementRect = targetEl.getBoundingClientRect();
        // 计算元素相对于容器的位置
        /** @type {?} */
        const elementRelativeLeft = elementRect.left - containerRect.left + menuEl.scrollLeft;
        /** @type {?} */
        const elementWidth = elementRect.width;
        /** @type {?} */
        const containerWidth = menuEl.clientWidth;
        // 计算元素中心点相对于容器的位置
        /** @type {?} */
        const elementCenter = elementRelativeLeft + elementWidth / 2;
        // 目标滚动位置：让元素中心出现在可视区域中心
        /** @type {?} */
        const scrollTarget = elementCenter - containerWidth / 2;
        // 限制在有效滚动范围内
        /** @type {?} */
        const maxScroll = Math.max(0, menuEl.scrollWidth - containerWidth);
        /** @type {?} */
        const finalTarget = Math.max(0, Math.min(scrollTarget, maxScroll));
        menuEl.scrollTo({ left: finalTarget, behavior: "smooth" });
        this.onScroll();
    }
    /**
     * @param {?} _event
     * @return {?}
     */
    onResize(_event) {
        if (this.orientation === "horizontal") {
            this.checkBtnShow();
        }
    }
    /**
     * @param {?=} init
     * @return {?}
     */
    checkBtnShow(init) {
        if (!this.menu || !this.menu.nativeElement)
            return;
        /** @type {?} */
        const menuEl = this.menu.nativeElement;
        const { scrollWidth, clientWidth } = menuEl;
        // 判断是否需要显示滚动按钮
        /** @type {?} */
        let threshold = clientWidth;
        if (this.containerRefId) {
            /** @type {?} */
            const containerRef = document.getElementById(this.containerRefId);
            if (containerRef) {
                threshold = Math.max(containerRef.offsetWidth * 0.8, 400);
            }
        }
        this.showBtn = scrollWidth > threshold;
        // 初始化时滚动到当前步骤
        if (init) {
            setTimeout((/**
             * @return {?}
             */
            () => this.scrollToStep()), 0);
        }
        this.onScroll();
        this.ref.markForCheck();
    }
    /**
     * @return {?}
     */
    scrollLeft() {
        const { scrollLeft } = this.menu.nativeElement;
        /** @type {?} */
        const dis = scrollLeft / 100 < 2 ? scrollLeft + 10 : 100;
        this.menu.nativeElement.scrollBy({ left: -dis, behavior: "smooth" });
    }
    /**
     * @return {?}
     */
    scrollRight() {
        const { scrollLeft, scrollWidth, clientWidth } = this.menu.nativeElement;
        /** @type {?} */
        const rest = scrollWidth - clientWidth - scrollLeft;
        /** @type {?} */
        const dis = rest / 100 < 2 ? rest + 10 : 100;
        this.menu.nativeElement.scrollBy({ left: dis, behavior: "smooth" });
    }
    /**
     * @return {?}
     */
    onScroll() {
        const { scrollLeft, scrollWidth, clientWidth } = this.menu.nativeElement;
        this.isAtStart = scrollLeft <= 1;
        this.isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
        this.ref.markForCheck();
    }
}
RSStepperComponent.decorators = [
    { type: Component, args: [{
                selector: "rs-stepper",
                template: "<div class=\"rs-stepper\" [ngClass]=\"{ 'rs-stepper--vertical': orientation === 'vertical' }\">\r\n  <!-- Horizontal stepper -->\r\n  <ng-container *ngIf=\"orientation === 'horizontal'\">\r\n    <div class=\"steps-wrap\">\r\n      <div\r\n        class=\"row-btn\"\r\n        [class.hidden]=\"isAtStart || !showBtn\"\r\n        (click)=\"scrollLeft()\"\r\n      >\r\n        <div class=\"hover\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"17\"\r\n            height=\"16\"\r\n            viewBox=\"0 0 17 16\"\r\n            fill=\"none\"\r\n          >\r\n            <path\r\n              d=\"M10.4995 3.99955L7.24219 8.24219L10.4995 12.4848\"\r\n              stroke=\"#1F7BFF\"\r\n            />\r\n          </svg>\r\n        </div>\r\n        <div class=\"normal\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"17\"\r\n            height=\"16\"\r\n            viewBox=\"0 0 17 16\"\r\n            fill=\"none\"\r\n          >\r\n            <path\r\n              d=\"M10.4995 3.99955L7.24219 8.24219L10.4995 12.4848\"\r\n              stroke=\"#6B6B6B\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"steps-content\"\r\n        [ngClass]=\"{\r\n          leftMask: showBtn && !isAtStart,\r\n          rightMask: showBtn && !isAtEnd,\r\n          bothMask: showBtn && !isAtStart && showBtn && !isAtEnd\r\n        }\"\r\n        #menu\r\n        (scroll)=\"onScroll()\"\r\n      >\r\n        <ng-container *ngFor=\"let item of steps; let i = index\">\r\n          <div\r\n            class=\"step\"\r\n            [ngClass]=\"{\r\n              done: item.step <= unlockedStep,\r\n              active: item.step === currentStep\r\n            }\"\r\n            (click)=\"onStepClick(item, i)\"\r\n          >\r\n            <div\r\n              class=\"step-label\"\r\n              [matTooltip]=\"item.label !== item.displayTitle ? item.label : ''\"\r\n              matTooltipPosition=\"above\"\r\n            >\r\n              {{ item.displayTitle }}\r\n            </div>\r\n          </div>\r\n          <div class=\"step-arrow\" *ngIf=\"i < steps.length - 1\">\r\n            <img src=\"/assets/img/step-arrow.svg\" />\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div\r\n        class=\"row-btn\"\r\n        [class.hidden]=\"isAtEnd || !showBtn\"\r\n        (click)=\"scrollRight()\"\r\n      >\r\n        <div class=\"hover\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"17\"\r\n            height=\"16\"\r\n            viewBox=\"0 0 17 16\"\r\n            fill=\"none\"\r\n          >\r\n            <path\r\n              d=\"M7.50045 3.99955L10.7578 8.24219L7.50045 12.4848\"\r\n              stroke=\"#1F7BFF\"\r\n            />\r\n          </svg>\r\n        </div>\r\n        <div class=\"normal\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"17\"\r\n            height=\"16\"\r\n            viewBox=\"0 0 17 16\"\r\n            fill=\"none\"\r\n          >\r\n            <path\r\n              d=\"M7.50045 3.99955L10.7578 8.24219L7.50045 12.4848\"\r\n              stroke=\"#6B6B6B\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Vertical stepper (Figma RAISE-UI-Kits: right border, \"Step N\" + title) -->\r\n  <div class=\"steps-wrap steps-wrap--vertical\" *ngIf=\"orientation === 'vertical'\">\r\n    <ol class=\"steps-vertical\" role=\"list\">\r\n      <li\r\n        *ngFor=\"let item of steps; let i = index\"\r\n        class=\"step-vertical\"\r\n        [ngClass]=\"{\r\n          'step-vertical--done': item.step <= unlockedStep,\r\n          'step-vertical--active': item.step === currentStep\r\n        }\"\r\n        (click)=\"onStepClick(item, i)\"\r\n      >\r\n        <span class=\"step-vertical__number\">Step {{ item.step + 1 }}</span>\r\n        <span\r\n          class=\"step-vertical__label\"\r\n          [matTooltip]=\"item.label !== (item.displayTitle || item.label) ? item.label : ''\"\r\n          matTooltipPosition=\"right\"\r\n        >\r\n          {{ item.displayTitle || item.label }}\r\n        </span>\r\n      </li>\r\n    </ol>\r\n  </div>\r\n</div>\r\n",
                styles: [".rs-stepper{font-family:var(--rs-font-family,Arial);width:100%}.rs-stepper:not(.rs-stepper--vertical){border-bottom:1px solid var(--rs-border-color)}.rs-stepper.rs-stepper--vertical{border-bottom:none}.rs-stepper .steps-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto}.rs-stepper .steps-wrap .steps-content{display:flex;align-items:center;flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;gap:8px}.rs-stepper .steps-wrap .steps-content.leftMask{-webkit-mask-image:linear-gradient(90deg,transparent,#fff 10%,#d8d3d3 100%);mask-image:linear-gradient(90deg,transparent,#fff 10%,#d8d3d3 100%)}.rs-stepper .steps-wrap .steps-content.rightMask{-webkit-mask-image:linear-gradient(90deg,#fff 0,#fff 90%,transparent);mask-image:linear-gradient(90deg,#fff 0,#fff 90%,transparent)}.rs-stepper .steps-wrap .steps-content.bothMask{-webkit-mask-image:linear-gradient(90deg,transparent,#fff 10%,#fff 90%,transparent)!important;mask-image:linear-gradient(90deg,transparent,#fff 10%,#fff 90%,transparent)!important}.rs-stepper .steps-wrap .steps-content::-webkit-scrollbar{width:0;height:0}.rs-stepper .steps-wrap .step{flex:0 0 auto}.rs-stepper .steps-wrap .step .step-label{color:var(--rs-labels-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;white-space:nowrap;padding:0 12px 12px;display:flex;align-items:center}.rs-stepper .steps-wrap .step.done{cursor:pointer}.rs-stepper .steps-wrap .step.done .step-label{color:var(--rs-active-labels-color)}.rs-stepper .steps-wrap .step.active .step-label{color:var(--rs-active-labels-color);font-weight:700;border-bottom:1px solid var(--rs-active-labels-color)}.rs-stepper .steps-wrap .step-arrow{flex:0 0 auto;padding:0 12px 12px;display:flex;align-items:center}.rs-stepper .row-btn{margin-bottom:12px;display:flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:4px;border:1px solid #bdc4ca;flex-shrink:0;cursor:pointer;visibility:visible}.rs-stepper .row-btn .hover{display:none}.rs-stepper .row-btn .normal{display:flex}.rs-stepper .row-btn:hover{background-color:rgba(31,123,255,.04)}.rs-stepper .row-btn:hover .normal{display:none}.rs-stepper .row-btn:hover .hover{display:flex}.rs-stepper .row-btn.hidden{visibility:hidden}.rs-stepper .steps-wrap--vertical{display:block;padding:0}.rs-stepper .steps-vertical{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}.rs-stepper .step-vertical{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:4px 12px 4px 0;border-right:2px solid var(--rs-border-color);cursor:default;text-align:right;font-family:var(--rs-font-family,Arial);font-size:11px;line-height:14px;color:var(--rs-labels-color);transition:background-color .15s,border-radius .15s}.rs-stepper .step-vertical.step-vertical--done{cursor:pointer;border-right-color:var(--rs-active-labels-color);color:var(--rs-active-labels-color)}.rs-stepper .step-vertical.step-vertical--done:hover{background-color:rgba(31,123,255,.04);border-top-left-radius:var(--rs-input-border-radius,4px);border-bottom-left-radius:var(--rs-input-border-radius,4px)}.rs-stepper .step-vertical.step-vertical--active{border-right-color:var(--rs-active-labels-color);color:var(--rs-active-labels-color)}.rs-stepper .step-vertical.step-vertical--active .step-vertical__label{font-weight:700}.rs-stepper .step-vertical__number{flex-shrink:0;font-weight:400}.rs-stepper .step-vertical__label{min-width:0;font-weight:400;word-break:break-word}.rs-stepper .step-vertical--active .step-vertical__label{font-weight:700}"]
            }] }
];
/** @nocollapse */
RSStepperComponent.ctorParameters = () => [
    { type: CommonFunctionService },
    { type: ChangeDetectorRef }
];
RSStepperComponent.propDecorators = {
    menu: [{ type: ViewChild, args: ["menu", { static: false },] }],
    steps: [{ type: Input }],
    currentStep: [{ type: Input }],
    orientation: [{ type: Input }],
    stepClick: [{ type: Output }],
    unlockedStep: [{ type: Input }],
    containerRefId: [{ type: Input }],
    onResize: [{ type: HostListener, args: ["window:resize", ["$event"],] }]
};
if (false) {
    /** @type {?} */
    RSStepperComponent.prototype.menu;
    /** @type {?} */
    RSStepperComponent.prototype.steps;
    /** @type {?} */
    RSStepperComponent.prototype.currentStep;
    /**
     * Layout direction: 'horizontal' (default) or 'vertical'
     * @type {?}
     */
    RSStepperComponent.prototype.orientation;
    /** @type {?} */
    RSStepperComponent.prototype.stepClick;
    /** @type {?} */
    RSStepperComponent.prototype.unlockedStep;
    /** @type {?} */
    RSStepperComponent.prototype.containerRefId;
    /** @type {?} */
    RSStepperComponent.prototype.showBtn;
    /** @type {?} */
    RSStepperComponent.prototype.isAtStart;
    /** @type {?} */
    RSStepperComponent.prototype.isAtEnd;
    /** @type {?} */
    RSStepperComponent.prototype.cf;
    /**
     * @type {?}
     * @private
     */
    RSStepperComponent.prototype.ref;
}
//# sourceMappingURL=data:application/json;base64, 